Sunburst Example
A sunburst diagram is a radial space-filling tree visualization, similar in spirit to a treemap. Adjacency, rather than containment, is used to depict hierarchical relationships. The layout is computed using Vega’s partition transform. This example shows the software class hierarchy of the Flare visualization toolkit; node areas are proportional to the file size in bytes of each source code file.
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An example of a space-fulling radial layout for hierarchical data.",
"width": 600,
"height": 600,
"padding": 5,
"autosize": "none",
"data": [
{
"name": "tree",
"url": "data/flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "partition",
"field": "size",
"sort": {"field": "value"},
"size": [{"signal": "2 * PI"}, {"signal": "width / 2"}],
"as": ["a0", "r0", "a1", "r1", "depth", "children"]
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {"data": "tree", "field": "depth"},
"range": {"scheme": "tableau20"}
}
],
"marks": [
{
"type": "arc",
"from": {"data": "tree"},
"encode": {
"enter": {
"x": {"signal": "width / 2"},
"y": {"signal": "height / 2"},
"fill": {"scale": "color", "field": "depth"},
"tooltip": {"signal": "datum.name + (datum.size ? ', ' + datum.size + ' bytes' : '')"}
},
"update": {
"startAngle": {"field": "a0"},
"endAngle": {"field": "a1"},
"innerRadius": {"field": "r0"},
"outerRadius": {"field": "r1"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 0.5},
"zindex": {"value": 0}
},
"hover": {
"stroke": {"value": "red"},
"strokeWidth": {"value": 2},
"zindex": {"value": 1}
}
}
}
]
}