Картограмма Дорлинга
Картограмма Дорлинга — тематическая карта, где величина показателя для каждого региона передаётся размером круга. Здесь изображена доля взрослых людей с ожирением (индекс массы тела ≥ 30) по штатам США в 1995 году. Показатель закодирован одновременно площадью и цветом круга. Для расчёта расположения применяются преобразование force и функция выражений geoCentroid Vega.
Спецификация Vega в JSON <>
{
"$schema": "https://vega.github.io/schema/vega/v6.json",
"description": "Картограмма Дорлинга с показателями ожирения по штатам США.",
"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": "Доля взрослых с ожирением, %",
"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": "'Доля взрослых с ожирением: ' + 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"}
}
}
}
]
}