README.md

tilez - observable plot

Observable Plot tile for usage with Svelte layout engine tilez.

Installation

Install tilez-observable-plot as npm package via

npm install tilez-observable-plot

Usage

You can use Observable Plot tile for tile types 'html' and 'svg'. Component ObservablePlotTile has following props:

• options Observable Plot specs

<script lang="ts">
  import * as Plot from '@observablehq/plot';

  import { Tile } from 'tilez';
  import { ObservablePlotTile } from 'tilez-observable-plot';

  const data = [
    { a: 'A', b: 28 },
    { a: 'B', b: 55 },
    { a: 'C', b: 43 },
    { a: 'D', b: 91 },
    { a: 'E', b: 81 },
    { a: 'F', b: 53 },
    { a: 'G', b: 19 },
    { a: 'H', b: 87 },
    { a: 'I', b: 52 }
  ];

  const options = {
    marks: [
      Plot.barY(data, { x: 'a', y: 'b', fill: 'steelblue' }),
      Plot.ruleY([0]),
    ]
  };
</script>

<Tile type="html" width="800px" height="600px">
  <ObservablePlotTile {options} />
</Tile>

Note: Observable Plot renders a HTML figure, when legends are involved. If legends are necessary, document type 'html' should be used.