Walmart Openings

Maps showing Walmart store openings per decade. 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"}),
  vg.loadSpatial("nation", "data/us-counties-10m.json", {layer: "nation"}),
  vg.loadParquet("walmarts", "data/walmarts.parquet")
]);

export default vg.vconcat(
  vg.plot(
    vg.geo(
      vg.from("states"),
      {stroke: "#aaa", strokeWidth: 1}
    ),
    vg.geo(
      vg.from("nation"),
      {stroke: "currentColor"}
    ),
    vg.dot(
      vg.from("walmarts"),
      {
        x: "longitude",
        y: "latitude",
        fy: vg.sql`10 * decade(date)`,
        r: 1.5,
        fill: "blue"
      }
    ),
    vg.axisFy({frameAnchor: "top", dy: 30, tickFormat: "d"}),
    vg.margin(0),
    vg.fyLabel(null),
    vg.projectionType("albers")
  )
);

YAML

meta:
  title: Walmart Openings
  description: >
    Maps showing Walmart store openings per decade.
    Requires the DuckDB `spatial` extension.
  credit: Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-map-large-multiples).
data:
  states:
    type: spatial
    file: data/us-counties-10m.json
    layer: states
  nation:
    type: spatial
    file: data/us-counties-10m.json
    layer: nation
  walmarts:
    file: data/walmarts.parquet
vconcat:
- plot:
  - mark: geo
    data: { from: states }
    stroke: '#aaa'
    strokeWidth: 1
  - mark: geo
    data: { from: nation }
    stroke: currentColor
  - mark: dot
    data: { from: walmarts }
    x: longitude
    y: latitude
    fy: { sql: 10 * decade(date) }
    r: 1.5
    fill: blue
  - mark: axisFy
    frameAnchor: top
    dy: 30
    tickFormat: d
  margin: 0
  fyLabel: null
  projectionType: albers

JSON

{
  "meta": {
    "title": "Walmart Openings",
    "description": "Maps showing Walmart store openings per decade. Requires the DuckDB `spatial` extension.\n",
    "credit": "Adapted from an [Observable Plot example](https://observablehq.com/@observablehq/plot-map-large-multiples)."
  },
  "data": {
    "states": {
      "type": "spatial",
      "file": "data/us-counties-10m.json",
      "layer": "states"
    },
    "nation": {
      "type": "spatial",
      "file": "data/us-counties-10m.json",
      "layer": "nation"
    },
    "walmarts": {
      "file": "data/walmarts.parquet"
    }
  },
  "vconcat": [
    {
      "plot": [
        {
          "mark": "geo",
          "data": {
            "from": "states"
          },
          "stroke": "#aaa",
          "strokeWidth": 1
        },
        {
          "mark": "geo",
          "data": {
            "from": "nation"
          },
          "stroke": "currentColor"
        },
        {
          "mark": "dot",
          "data": {
            "from": "walmarts"
          },
          "x": "longitude",
          "y": "latitude",
          "fy": {
            "sql": "10 * decade(date)"
          },
          "r": 1.5,
          "fill": "blue"
        },
        {
          "mark": "axisFy",
          "frameAnchor": "top",
          "dy": 30,
          "tickFormat": "d"
        }
      ],
      "margin": 0,
      "fyLabel": null,
      "projectionType": "albers"
    }
  ]
}