Skip to content
Vega templates

Sunburst hierarchy

Radial space-filling tree showing org hierarchy depth.

Template previewVega
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}
    }}
  }]
}