Skip to content

Instantly share code, notes, and snippets.

@keckelt
Last active November 25, 2020 13:11
Show Gist options
  • Save keckelt/2a924e13b9de9ac2d0f6e3469a477aaa to your computer and use it in GitHub Desktop.
Save keckelt/2a924e13b9de9ac2d0f6e3469a477aaa to your computer and use it in GitHub Desktop.
Team Changes - Diverging Bar Chart
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
"data": {
"values": [
{"a": "Avengers", "b": -0.5},
{"a": "Masters of the Universe", "b": 0.6},
{"a": "X-Men", "b": 0.0}
]
},
"encoding": {
"y": {"field": "a", "type": "nominal", "axis": null},
"x": {"field": "b", "type": "quantitative", "axis": {"format": ",%", "title": "Change"},"scale": {"domain": [-1,1]}}
},
"layer": [{
"mark": "bar"
}, {
"mark": {
"type": "text",
"align": {"expr": "datum.b < 0 ? 'right' : 'left'"},
"baseline": "middle",
"dx": {"expr": "datum.b < 0 ? -5 : 5"}
},
"encoding": {
"text": {"field": "a", "type": "nominal"}
}
}],
"config": {
"view": {"stroke": 0}
}
}
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
"data": {
"values": [
{"a": "Avengers", "b": -0.5},
{"a": "Masters of the Universe", "b": 0.6},
{"a": "X-Men", "b": 0.0}
]
},
"encoding": {
"y": {"field": "a", "type": "nominal", "axis": null},
"x": {"field": "b", "type": "quantitative", "axis": {
"format": ",%",
"title": "Change",
"gridColor": {
"condition": {"test": "datum.value === 0", "value": "black"},
"value": "#ddd"
}
},"scale": {"domain": [-1,1], "padding": 10}}
},
"layer": [{
"mark": "bar"
}, {
"transform": [
{"calculate": "datum.b < 0 ? 0 : datum.b", "as": "b"}
],
"mark": {
"type": "text",
"limit": 100,
"align": "left",
"baseline": "middle",
"dx": 5
},
"encoding": {
"text": {"field": "a", "type": "nominal"}
}
}],
"config": {
"view": {"stroke": 0}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment