{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"width": 900,
"height": 520,
"autosize": "none",
"config": {
"legend": {
"gradientWidth": 120,
"gradientHeight": 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"},
"range": [0, 5000]
},
{
"name": "color",
"type": "sequential",
"nice": true,
"domain": {"data": "obesity", "field": "rate"},
"range": "ramp"
}
],
"legends": [
{
"title": "% of Obese Adults",
"orient": "bottom-right",
"type": "gradient",
"fill": "color",
"format": ".1%"
}
],
"marks": [
{
"type": "shape",
"from": {"data": "states"},
"encode": {
"update": {
"strokeWidth": {"value": 1},
"stroke": {"value": "#777"},
"fill": {"value": "transparent"},
"zindex": {"value": 0}
},
"hover": {
"strokeWidth": {"value": 1},
"stroke": {"value": "firebrick"},
"zindex": {"value": 1}
}
},
"transform": [
{ "type": "geoshape", "projection": "projection" }
]
},
{
"name": "circles",
"type": "symbol",
"from": {"data": "obesity"},
"encode": {
"update": {
"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%')"},
"zindex": {"value": 50}
}
},
"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": {"mark": "circles"},
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "middle"},
"fontSize": {"value": 13},
"fontWeight": {"value": "bold"},
"text": {"field": "datum.state"},
"zindex": {"value": 0}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"}
}
}
}
]
}