Skip to content

Instantly share code, notes, and snippets.

@jonmmease
Created July 9, 2022 14:50
Show Gist options
  • Save jonmmease/2d2d5b751e69f1eb2ec4cca589a9bdbb to your computer and use it in GitHub Desktop.
Save jonmmease/2d2d5b751e69f1eb2ec4cca589a9bdbb to your computer and use it in GitHub Desktop.
Vega-Lite Heatlane
{
"$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"}}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment