Observable Plot tile for usage with Svelte layout engine tilez.
Install tilez-observable-plot as npm package via
npm install tilez-observable-plot
You can use Observable Plot tile for tile types 'html'
and 'svg'
. Component ObservablePlotTile has following props:
<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.