Faceted chart

Becker's barley trellis plot, one panel per site.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Becker's Barley Trellis Plot.",
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/barley.json"
  },
  "mark": "point",
  "height": {
    "step": 12
  },
  "encoding": {
    "facet": {
      "field": "site",
      "type": "ordinal",
      "columns": 2,
      "sort": {
        "op": "median",
        "field": "yield"
      }
    },
    "x": {
      "field": "yield",
      "type": "quantitative",
      "scale": {
        "zero": false
      }
    },
    "y": {
      "field": "variety",
      "type": "ordinal",
      "sort": "-x"
    },
    "color": {
      "field": "year",
      "type": "nominal"
    }
  }
}

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