Sunburst hierarchy
Radial space-filling tree showing org hierarchy depth.
Rendering…
Make it your own.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 360, "height": 360, "padding": 5, "autosize": "none",
"data": [{
"name": "tree",
"values": [
{"id":1,"name":"Co"}, {"id":2,"parent":1,"name":"Eng"},
{"id":3,"parent":1,"name":"Sales"}, {"id":4,"parent":1,"name":"Ops"},
{"id":5,"parent":2,"name":"FE","size":1200},
{"id":6,"parent":2,"name":"BE","size":1800},
{"id":7,"parent":2,"name":"Infra","size":900},
{"id":8,"parent":3,"name":"AE","size":2200},
{"id":9,"parent":3,"name":"SE","size":1400},
{"id":10,"parent":4,"name":"Finance","size":700},
{"id":11,"parent":4,"name":"People","size":500}
],
"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":"tableau10"}}],
"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):'')"}
},"update":{
"startAngle":{"field":"a0"},"endAngle":{"field":"a1"},
"innerRadius":{"field":"r0"},"outerRadius":{"field":"r1"},
"stroke":{"value":"white"},"strokeWidth":{"value":0.5}
}}
}]
}