Choropleth map

US county-level unemployment rates on a choropleth map.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "description": "US county-level unemployment rates",
  "width": 500,
  "height": 300,
  "data": {
    "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/us-10m.json",
    "format": {
      "type": "topojson",
      "feature": "counties"
    }
  },
  "transform": [
    {
      "lookup": "id",
      "from": {
        "data": {
          "url": "https://raw.githubusercontent.com/vega/vega-datasets/next/data/unemployment.tsv"
        },
        "key": "id",
        "fields": [
          "rate"
        ]
      }
    }
  ],
  "projection": {
    "type": "albersUsa"
  },
  "mark": "geoshape",
  "encoding": {
    "color": {
      "field": "rate",
      "type": "quantitative"
    }
  }
}

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