https://github.com/spren9er/tilez-observable-plot

Observable Plot component for Svelte layout engine 'tilez'
https://github.com/spren9er/tilez-observable-plot

observable-plot svelte tilez

Last synced: 6 months ago
JSON representation

Observable Plot component for Svelte layout engine 'tilez'

• Host: GitHub
• URL: https://github.com/spren9er/tilez-observable-plot
• Owner: spren9er
• License: mit
• Created: 2023-02-27T15:44:41.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-24T18:29:12.000Z (over 1 year ago)
• Last Synced: 2025-10-05T13:17:46.339Z (6 months ago)
• Topics: observable-plot, svelte, tilez
• Language: Svelte
• Homepage: https://tilez.spren9er.de
• Size: 289 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# ![Tilez-Logo](https://github.com/spren9er/tilez/blob/main/docs/images/tilez_logo.svg?raw=true) tilez - observable plot

_Observable Plot_ tile for usage with Svelte layout engine [**_tilez_**](https://github.com/spren9er/tilez).

## Installation

Install **_tilez-observable-plot_** as npm package via

```bash

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

```html

  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]),

    ]

  };

  

```

**Note:** _Observable Plot_ renders a HTML figure, when legends are involved. If legends are necessary, document type `'html'` should be used.