U.S. Counties

A map of U.S. counties. County name tooltips are anchored to invisible centroid dot marks. Requires the DuckDB spatial extension.

Loading 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.loadSpatial("states", "data/us-counties-10m.json", {layer: "states"})
]);

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

YAML

meta:
  title: U.S. Counties
  description: >
    A map of U.S. counties.
    County name tooltips are anchored to invisible centroid dot marks.
    Requires the DuckDB `spatial` extension.
data:
  counties:
    type: spatial
    file: data/us-counties-10m.json
    layer: counties
  states:
    type: spatial
    file: data/us-counties-10m.json
    layer: states
plot:
- mark: geo
  data: { from: counties }
  stroke: currentColor
  strokeWidth: 0.25
- mark: geo
  data: { from: states }
  stroke: currentColor
  strokeWidth: 1
- mark: dot
  data: { from: counties }
  x: { centroidX: geom }
  y: { centroidY: geom }
  r: 2
  fill: transparent
  tip: true
  title: name
margin: 0
projectionType: albers

JSON

{
  "meta": {
    "title": "U.S. Counties",
    "description": "A map of U.S. counties. County name tooltips are anchored to invisible centroid dot marks. Requires the DuckDB `spatial` extension.\n"
  },
  "data": {
    "counties": {
      "type": "spatial",
      "file": "data/us-counties-10m.json",
      "layer": "counties"
    },
    "states": {
      "type": "spatial",
      "file": "data/us-counties-10m.json",
      "layer": "states"
    }
  },
  "plot": [
    {
      "mark": "geo",
      "data": {
        "from": "counties"
      },
      "stroke": "currentColor",
      "strokeWidth": 0.25
    },
    {
      "mark": "geo",
      "data": {
        "from": "states"
      },
      "stroke": "currentColor",
      "strokeWidth": 1
    },
    {
      "mark": "dot",
      "data": {
        "from": "counties"
      },
      "x": {
        "centroidX": "geom"
      },
      "y": {
        "centroidY": "geom"
      },
      "r": 2,
      "fill": "transparent",
      "tip": true,
      "title": "name"
    }
  ],
  "margin": 0,
  "projectionType": "albers"
}