Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
},
"encoding": {"color": {"field": "y", "type": "ordinal", "title": "count", "legend": null, "scale": {"scheme": ["#828585","#7a7e7e","#737678","#6a7072","#60686c","#3e666e","#226070","#21576f","#204e6d","#1d466c"
]}}}
},
{
"mark": {
"type": "bar",
"xOffset": 2,
"x2Offset": -2,
"yOffset": -3,
"y2Offset": 3
},
"encoding": {"color": {"field": "y", "type": "ordinal", "title": "count", "scale": {"scheme": "lightGreyTeal"}}}
}
],
"resolve": {"scale": {"color": "independent"}}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment