Radial Plot Example
This radial plot uses both angular and radial extent to convey multiple dimensions of data. However, this approach is not perceptually effective, as viewers will most likely be drawn to the total area of the shape, conflating the two dimensions. This example also demonstrates one way to add labels to circular plots.
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A basic radial plot that encodes two values as the angle and radius of an arc.",
"width": 200,
"height": 200,
"data": [
{
"name": "table",
"values": [12, 23, 47, 6, 52, 19],
"transform": [{"type": "pie", "field": "data"}]
}
],
"scales": [
{
"name": "r",
"type": "sqrt",
"domain": {"data": "table", "field": "data"},
"zero": true,
"range": [20, 100]
}
],
"marks": [
{
"type": "arc",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"field": {"group": "width"}, "mult": 0.5},
"y": {"field": {"group": "height"}, "mult": 0.5},
"startAngle": {"field": "startAngle"},
"endAngle": {"field": "endAngle"},
"innerRadius": {"value": 20},
"outerRadius": {"scale": "r", "field": "data"},
"stroke": {"value": "#fff"}
},
"update": {
"fill": {"value": "#ccc"}
},
"hover": {
"fill": {"value": "pink"}
}
}
},
{
"type": "text",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"field": {"group": "width"}, "mult": 0.5},
"y": {"field": {"group": "height"}, "mult": 0.5},
"radius": {"scale": "r", "field": "data", "offset": 8},
"theta": {"signal": "(datum.startAngle + datum.endAngle)/2"},
"fill": {"value": "#000"},
"align": {"value": "center"},
"baseline": {"value": "middle"},
"text": {"field": "data"}
}
}
}
]
}