Treemap
Rectangle hierarchy sized by metric.
Rendering…
Make it your own.
{
"$schema":"https://vega.github.io/schema/vega/v5.json",
"width":400,"height":260,"padding":5,"autosize":"none",
"data":[{
"name":"tree","values":[
{"id":"all","parent":null,"name":"All"},
{"id":"a","parent":"all","name":"Engineering","size":35},
{"id":"b","parent":"all","name":"Sales","size":25},
{"id":"c","parent":"all","name":"Marketing","size":15},
{"id":"d","parent":"all","name":"Support","size":12},
{"id":"e","parent":"all","name":"Ops","size":8},
{"id":"f","parent":"all","name":"Other","size":5}
],
"transform":[
{"type":"stratify","key":"id","parentKey":"parent"},
{"type":"treemap","field":"size","sort":{"field":"value","order":"descending"},"size":[{"signal":"width"},{"signal":"height"}]}
]
}],
"scales":[{"name":"color","type":"ordinal","domain":{"data":"tree","field":"name"},"range":{"scheme":"tableau10"}}],
"marks":[
{"type":"rect","from":{"data":"tree"},
"encode":{"enter":{"x":{"field":"x0"},"y":{"field":"y0"},"x2":{"field":"x1"},"y2":{"field":"y1"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"name"}}}},
{"type":"text","from":{"data":"tree"},"interactive":false,
"encode":{"enter":{"x":{"signal":"(datum.x0+datum.x1)/2"},"y":{"signal":"(datum.y0+datum.y1)/2"},"text":{"field":"name"},"align":{"value":"center"},"baseline":{"value":"middle"},"fontSize":{"value":11},"fill":{"value":"white"}}}}
]
}