tilez - vega-lite

Vega-Lite tile for usage with Svelte layout engine tilez.

Installation

Install tilez-vega-lite as npm package via

npm install tilez-vega-lite

Usage

You can use Vega-Lite tile for tile types 'html' and 'svg'. Component VegaLiteTile has following props:

• spec Vega-Lite spec
• data given data as JSON, Apache Arrow table, etc. [optional]
• options Vega-Lite configuration [optional]

When no data is given, Vega-Lite spec must have inline data.

<script lang="ts">
  import { Tile } from 'tilez';
  import { VegaLiteTile } from 'tilez-vega-lite';

  const spec = {
    mark: 'bar',
    encoding: {
      x: { field: 'a', type: 'nominal', axis: { labelAngle: 0 } },
      y: { field: 'b', type: 'quantitative' }
    }
  };

  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 = {
    renderer: 'svg',
    actions: false
  };
</script>

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

SSR

Underlying VegaLite class can also be used for server side rendering without tilez, see ssr route in example app.