Dorling Cartogram Example
A Dorling cartogram is a thematic map that uses sized circles to represent a quantity of interest per geographic region. This example visualizes the ratio of obese adults (BMI >= 30) by U.S. state in 2008. A redundant encoding uses both circle area and fill color to convey the obesity rate. Vega’s force transform and geoCentroid expression function are used to compute the layout.
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A Dorling cartogram depicting U.S. state obesity rates.",
"width": 900,
"height": 520,
"autosize": "none",
"config": {
"legend": {
"gradientDirection": "horizontal",
"gradientLength": 120,
"gradientThickness": 10
}
},
"data": [
{
"name": "states",
"url": "data/us-10m.json",
"format": {"type": "topojson", "feature": "states"}
},
{
"name": "obesity",
"url": "data/obesity.json",
"transform": [
{
"type": "lookup",
"from": "states", "key": "id",
"fields": ["id"], "as": ["geo"]
},
{
"type": "filter",
"expr": "datum.geo"
},
{
"type": "formula", "as": "centroid",
"expr": "geoCentroid('projection', datum.geo)"
}
]
}
],
"projections": [
{
"name": "projection",
"type": "albersUsa",
"scale": 1100,
"translate": [{"signal": "width / 2"}, {"signal": "height / 2"}]
}
],
"scales": [
{
"name": "size",
"domain": {"data": "obesity", "field": "rate"},
"zero": false,
"range": [1000, 5000]
},
{
"name": "color",
"type": "linear",
"nice": true,
"domain": {"data": "obesity", "field": "rate"},
"range": "ramp"
}
],
"legends": [
{
"title": "% of Obese Adults",
"orient": "bottom-right",
"type": "symbol",
"size": "size",
"fill": "color",
"format": ".1%",
"clipHeight": 16
}
],
"marks": [
{
"name": "circles",
"type": "symbol",
"from": {"data": "obesity"},
"encode": {
"enter": {
"size": {"scale": "size", "field": "rate"},
"fill": {"scale": "color", "field": "rate"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 1.5},
"x": {"field": "centroid[0]"},
"y": {"field": "centroid[1]"},
"tooltip": {"signal": "'Obesity Rate: ' + format(datum.rate, '.1%')"}
}
},
"transform": [
{
"type": "force",
"static": true,
"forces": [
{"force": "collide", "radius": {"expr": "1 + sqrt(datum.size) / 2"}},
{"force": "x", "x": "datum.centroid[0]"},
{"force": "y", "y": "datum.centroid[1]"}
]
}
]
},
{
"type": "text",
"interactive": false,
"from": {"data": "circles"},
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontSize": {"value": 13},
"fontWeight": {"value": "bold"},
"text": {"field": "datum.state"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"}
}
}
}
]
}