U.S. States

A map of U.S. states overlaid with computed centroids. 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("states", "data/us-counties-10m.json", {layer: "states"})
]);

export default vg.plot(
  vg.geo(
    vg.from("states"),
    {stroke: "currentColor", strokeWidth: 1}
  ),
  vg.dot(
    vg.from("states"),
    {
      x: vg.centroidX("geom"),
      y: vg.centroidY("geom"),
      r: 2,
      fill: "steelblue",
      tip: true,
      title: "name"
    }
  ),
  vg.margin(0),
  vg.projectionType("albers")
);

YAML

meta:
  title: U.S. States
  description: >
    A map of U.S. states overlaid with computed centroids.
    Requires the DuckDB `spatial` extension.
  credit: Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-state-centroids).
data:
  states:
    type: spatial
    file: data/us-counties-10m.json
    layer: states
plot:
- mark: geo
  data: { from: states }
  stroke: currentColor
  strokeWidth: 1
- mark: dot
  data: { from: states }
  x: { centroidX: geom }
  y: { centroidY: geom }
  r: 2
  fill: steelblue
  tip: true
  title: name
margin: 0
projectionType: albers

JSON

{
  "meta": {
    "title": "U.S. States",
    "description": "A map of U.S. states overlaid with computed centroids. Requires the DuckDB `spatial` extension.\n",
    "credit": "Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-state-centroids)."
  },
  "data": {
    "states": {
      "type": "spatial",
      "file": "data/us-counties-10m.json",
      "layer": "states"
    }
  },
  "plot": [
    {
      "mark": "geo",
      "data": {
        "from": "states"
      },
      "stroke": "currentColor",
      "strokeWidth": 1
    },
    {
      "mark": "dot",
      "data": {
        "from": "states"
      },
      "x": {
        "centroidX": "geom"
      },
      "y": {
        "centroidY": "geom"
      },
      "r": 2,
      "fill": "steelblue",
      "tip": true,
      "title": "name"
    }
  ],
  "margin": 0,
  "projectionType": "albers"
}