Радиальная диаграмма
Радиальная диаграмма передаёт несколько показателей углом и расстоянием от центра. Однако читать её непросто: зритель прежде всего воспринимает общую площадь фигуры и может смешивать влияние двух измерений. Пример также показывает один из способов добавлять подписи к круговым диаграммам.
Спецификация Vega в JSON <>
{
"$schema": "https://vega.github.io/schema/vega/v6.json",
"description": "Радиальная диаграмма, кодирующая два значения углом и радиусом дуги.",
"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"}
}
}
}
]
}