Vega-Lite Heatlane

heatlane-spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Heatlane chart: https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/",
  "data": {"url": "data/cars.json"},
  "height": 150,
  "width": 400,
  "title": "Heatlane",
  "transform": [
    {"bin": true, "field": "Horsepower"},
    {
      "aggregate": [{"op": "count"}],
      "groupby": ["bin_maxbins_10_Horsepower", "bin_maxbins_10_Horsepower_end"]
    },
    {"bin": true, "field": "count"},
    {"calculate": "-datum.bin_maxbins_10_count_end/2", "as": "y2"},
    {"calculate": "datum.bin_maxbins_10_count_end/2", "as": "y"}
  ],
  "encoding": {
    "x": {
      "field": "bin_maxbins_10_Horsepower",
      "type": "quantitative",
      "title": "Horsepower",
      "axis": {"grid": false}
    },
    "x2": {"field": "bin_maxbins_10_Horsepower_end"},
    "y": {"field": "y", "axis": null},
    "y2": {"field": "y2"}
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "xOffset": 2,
        "x2Offset": -2,
        "color": "black",
        "cornerRadius": 3
      }
    },
    {
      "mark": {
        "type": "bar",
        "xOffset": 2,
        "x2Offset": -2,
        "yOffset": -3,
        "y2Offset": 3
      },
      "encoding": {"color": {"field": "y", "type": "ordinal", "title": "count"}}
    }
  ]
}