Lasagna plot

Stock prices as a time-by-symbol lasagna plot.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/stocks.csv"
  },
  "width": 300,
  "height": 100,
  "mark": "rect",
  "transform": [
    {
      "filter": "datum.symbol !== 'GOOG'"
    }
  ],
  "encoding": {
    "x": {
      "timeUnit": "yearmonthdate",
      "field": "date",
      "type": "ordinal",
      "title": "Time",
      "axis": {
        "format": "%Y",
        "labelAngle": 0,
        "labelOverlap": false,
        "labelColor": {
          "condition": {
            "test": {
              "timeUnit": "monthdate",
              "field": "value",
              "equal": {
                "month": 1,
                "date": 1
              }
            },
            "value": "black"
          },
          "value": null
        },
        "tickColor": {
          "condition": {
            "test": {
              "timeUnit": "monthdate",
              "field": "value",
              "equal": {
                "month": 1,
                "date": 1
              }
            },
            "value": "black"
          },
          "value": null
        }
      }
    },
    "y": {
      "field": "symbol",
      "type": "nominal",
      "title": null
    },
    "color": {
      "aggregate": "sum",
      "field": "price",
      "type": "quantitative",
      "title": "Price"
    }
  }
}

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'));