A bubble chart about "global deaths from natural disasters". This example covers transformation strategies for the layout, axis, legend.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"url": "data/disasters.csv"
},
"width": 600,
"height": 400,
"transform": [
{"filter": "datum.Entity !== 'All natural disasters'"}
],
"mark": {
"type": "circle",
"opacity": 0.8,
"stroke": "black",
"strokeWidth": 1
},
"encoding": {
"x": {
"field": "Year",
"type": "temporal",
"axis": {"grid": false}
},
"y": {"field": "Entity", "type": "nominal", "axis": {"title": ""}},
"size": {
"field": "Deaths",
"type": "quantitative",
"title": "Annual Global Deaths",
"legend": {"values": [500000, 1000000, 2000000,3000000]},
// Legened values are modified for the demonstration purpose. "scale": {"rangeMax": 5000}
},
"color": {"field": "Entity", "type": "nominal", "legend": null}
}
}
Below, we provide one transformation rule at a time, and show the intermediate result on the side.
{
"$schema": "../cicero.json",
"name": "vl-disaster-mobile",
"description": "This is a Cicero specification for 'Natural Disaster' visualization (using Vega-Lite) from desktop to mobile.",
"metadata": {
"condition": "small"
},
"transformations": [
...
]
}
{
"description": "Resize the chart",
"specifier": {
"role": "view"
},
"action": "modify",
"option": {
"size": [
300,
500
]
}
}
{
"description": "Transpose axes",
"specifier": {
"role": "view"
},
"action": "transpose"
}
{
"description": "Reposition the horizontal axis labels",
"specifier": {
"role": "hAxis",
// Alternative "role": "axis",
"field": "Deaths"
},
"action": "reposition",
"option": {
// Removed some details "orient": "top"
// assign new axis orientation }
}
{
"description": "Remove the legend for 500000.",
"specifier": {
"role": "legend"
},
"action": "remove",
"option": {
"values": [
500000
// adjusted 5000 to 500000 ]
}
}
{
"description": "Move the legend to the topright position",
"specifier": {
"role": "legend"
},
"action": "reposition",
"option": {
"position": "top"
// adjusted bottom-right to top }
}
{
"description": "Resize the size encoding scale with relative value.",
"specifier": {
"role": "mark"
},
"action": "modify",
"option": {
"size": {
"scale": {
"range": {
"prod": 0.4
// multiply 0.4 to range values }
}
}
}
}