Streamgraph

A streamgraph of unemployment across industries.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 200,
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/unemployment-across-industries.json"
  },
  "mark": "area",
  "encoding": {
    "x": {
      "timeUnit": "yearmonth",
      "field": "date",
      "axis": {
        "domain": false,
        "format": "%Y",
        "tickSize": 0
      }
    },
    "y": {
      "aggregate": "sum",
      "field": "count",
      "axis": null,
      "stack": "center"
    },
    "color": {
      "field": "series",
      "scale": {
        "scheme": "category20b"
      }
    }
  }
}

Usage

import { olliVis } from 'olli';
import { VegaLiteAdapter } from 'olli/adapters';

// vlSpec is your Vega-Lite specification (shown above)
const olliSpec = await VegaLiteAdapter(vlSpec);
olliVis(olliSpec, document.getElementById('olli-tree'));