Wheat and Wages Example

A recreation of William Playfair’s classic chart visualizing the price of wheat, the wages of a mechanic, and the reigning British monarch. Based on a chart by @manzt.

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 900,
  "height": 400,
  "data": { "url": "data/wheat.json"},
  "transform": [{"calculate": "+datum.year + 5", "as": "year_end"}],
  "encoding": {
    "y": {
      "type": "quantitative",
      "axis": { "zindex": 1 }
    },
    "x": {
      "type": "quantitative",
      "axis": {"tickCount": 5, "format": "d"}
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "fill": "#aaa", "stroke": "#999"},
      "encoding": {
        "x": {"field": "year"},
        "x2": {"field": "year_end"},
        "y": {"field": "wheat"}
      }
    },
    {
      "data": {
        "values": [
          { "year": "1600" },
          { "year": "1650" },
          { "year": "1700" },
          { "year": "1750" },
          { "year": "1800" }
        ]
      },
      "mark": {
        "type": "rule",
        "stroke": "#000",
        "strokeWidth": 0.6,
        "opacity": 0.5
      },
      "encoding": {
        "x": {"field": "year"}
      }
    },
    {
      "mark": {
        "type": "area",
        "color": "#a4cedb",
        "opacity": 0.7
      },
      "encoding": {
        "x": {"field": "year"},
        "y": {"field": "wages"}
      }
    },
    {
      "mark": {"type": "line", "color": "#000", "opacity": 0.7},
      "encoding": {
        "x": {"field": "year"},
        "y": {"field": "wages"}
      }
    },
    {
      "mark": {"type": "line", "yOffset": -2, "color": "#EE8182"},
      "encoding": {
        "x": {"field": "year"},
        "y": {"field": "wages"}
      }
    },
    {
      "data": {"url": "data/monarchs.json"},
      "transform": [
        { "calculate": "((!datum.commonwealth && datum.index % 2) ? -1: 1) * 2 + 95", "as": "offset" },
        { "calculate": "95", "as": "y" }
      ],
      "mark": {"type": "bar", "stroke": "#000"},
      "encoding": {
        "x": {"field": "start"},
        "x2": {"field": "end"},
        "y": {"field": "y"},
        "y2": { "field": "offset" },
        "fill": {
          "field": "commonwealth",
          "scale": { "range": ["black", "white"] },
          "legend": null
        }
      }
    },
    {
      "data": {"url": "data/monarchs.json"},
      "transform": [
        { "calculate": "((!datum.commonwealth && datum.index % 2) ? -1: 1) + 95", "as": "off2" },
        { "calculate": "+datum.start + (+datum.end - +datum.start)/2", "as": "x"}
      ],
      "mark": {
        "type": "text",
        "yOffset": 16,
        "fontSize": 9,
        "baseline": "bottom",
        "fontStyle": "italic"
      },
      "encoding": {
        "x": {"field": "x"},
        "y": {"field": "off2"},
        "text": {"field": "name"}
      }
    }
  ],
  "config": {
    "axis": {
      "title": null,
      "gridColor": "white",
      "gridOpacity": 0.25,
      "domain": false
    },
    "view": { "stroke": "transparent" }
  }
}