U.S. Unemployment

A choropleth map of unemployment rates for U.S. counties. Requires the DuckDB spatial extension.

Loading Example... ⏳

Credit: Adapted from an Observable Plot example.

Specification

JavaScript

import * as vg from "@uwdata/vgplot";

await vg.coordinator().exec([
  vg.loadExtension("spatial"),
  vg.loadSpatial("counties", "data/us-counties-10m.json", {layer: "counties"}),
  vg.loadParquet("rates", "data/us-county-unemployment.parquet"),
  `CREATE TEMP TABLE IF NOT EXISTS combined AS SELECT a.geom AS geom, b.rate AS rate FROM counties AS a, rates AS b WHERE a.id = b.id`
]);

export default vg.vconcat(
  vg.colorLegend({for: "county-map", label: "Unemployment (%)"}),
  vg.plot(
    vg.geo(
      vg.from("combined"),
      {fill: "rate", title: vg.sql`concat(rate, '%')`}
    ),
    vg.name("county-map"),
    vg.margin(0),
    vg.colorScale("quantile"),
    vg.colorN(9),
    vg.colorScheme("blues"),
    vg.projectionType("albers-usa")
  )
);

YAML

meta:
  title: U.S. Unemployment
  description: >
    A choropleth map of unemployment rates for U.S. counties.
    Requires the DuckDB `spatial` extension.
  credit: Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-us-choropleth).
data:
  counties:
    type: spatial
    file: data/us-counties-10m.json
    layer: counties
  rates:
    file: data/us-county-unemployment.parquet
  combined: >
    SELECT a.geom AS geom, b.rate AS rate
    FROM counties AS a, rates AS b
    WHERE a.id = b.id
vconcat:
- legend: color
  for: county-map
  label: Unemployment (%)
- name: county-map
  plot:
  - mark: geo
    data: { from: combined }
    fill: rate
    title: { sql: "concat(rate, '%')" }
  margin: 0
  colorScale: quantile
  colorN: 9
  colorScheme: blues
  projectionType: albers-usa

JSON

{
  "meta": {
    "title": "U.S. Unemployment",
    "description": "A choropleth map of unemployment rates for U.S. counties. Requires the DuckDB `spatial` extension.\n",
    "credit": "Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-us-choropleth)."
  },
  "data": {
    "counties": {
      "type": "spatial",
      "file": "data/us-counties-10m.json",
      "layer": "counties"
    },
    "rates": {
      "file": "data/us-county-unemployment.parquet"
    },
    "combined": "SELECT a.geom AS geom, b.rate AS rate FROM counties AS a, rates AS b WHERE a.id = b.id\n"
  },
  "vconcat": [
    {
      "legend": "color",
      "for": "county-map",
      "label": "Unemployment (%)"
    },
    {
      "name": "county-map",
      "plot": [
        {
          "mark": "geo",
          "data": {
            "from": "combined"
          },
          "fill": "rate",
          "title": {
            "sql": "concat(rate, '%')"
          }
        }
      ],
      "margin": 0,
      "colorScale": "quantile",
      "colorN": 9,
      "colorScheme": "blues",
      "projectionType": "albers-usa"
    }
  ]
}