Heat Lane Chart

Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/

View this example in the online editor

Vega-Lite JSON Specification

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/",
  "data": {"url": "data/cars.json"},
  "height": 150,
  "width": 400,
  "title": "Heat Lane of Horsepower",
  "transform": [
    {
      "bin": true,
      "field": "Horsepower",
      "as": ["bin_Horsepower_start", "bin_Horsepower_end"]
    },
    {
      "aggregate": [{"op": "count", "as": "count"}],
      "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"]
    },
    {"bin": true, "field": "count", "as": ["bin_count_start", "bin_count_end"]},
    {"calculate": "-datum.bin_count_end/2", "as": "y2"},
    {"calculate": "datum.bin_count_end/2", "as": "y"},
    {
      "joinaggregate": [
        {"field": "bin_count_end", "op": "max", "as": "max_bin_count_end"}
      ]
    }
  ],
  "encoding": {
    "x": {
      "field": "bin_Horsepower_start",
      "type": "quantitative",
      "title": "Horsepower",
      "axis": {"grid": false}
    },
    "x2": {"field": "bin_Horsepower_end"},
    "y": {"field": "y", "axis": null},
    "y2": {"field": "y2"}
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "xOffset": 2,
        "x2Offset": -2,
        "cornerRadius": 3
      },
      "encoding": {
        "color": {
          "field": "max_bin_count_end",
          "type": "ordinal",
          "title": "count",
          "scale": {"scheme": "lighttealblue"}
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "xOffset": 2,
        "x2Offset": -2,
        "yOffset": -3,
        "y2Offset": 3
      },
      "encoding": {
        "color": {"field": "bin_count_end", "type": "ordinal", "title": "count"}
      }
    }
  ]
}