Treemap
Hierarchical proportional area chart.
Rendering…
Make it your own.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 480, "height": 320, "padding": 4, "autosize": "none",
"data":[
{"name":"tree","values":[
{"id":1,"name":"root","parent":null,"size":null},
{"id":2,"name":"Bio","parent":1,"size":null},
{"id":3,"name":"Chem","parent":1,"size":null},
{"id":4,"name":"Physics","parent":1,"size":null},
{"id":5,"name":"Genetics","parent":2,"size":40},
{"id":6,"name":"Ecology","parent":2,"size":25},
{"id":7,"name":"Organic","parent":3,"size":35},
{"id":8,"name":"Inorganic","parent":3,"size":15},
{"id":9,"name":"Quantum","parent":4,"size":30},
{"id":10,"name":"Mechanics","parent":4,"size":20}
],
"transform":[{"type":"stratify","key":"id","parentKey":"parent"},
{"type":"treemap","field":"size","size":[{"signal":"width"},{"signal":"height"}],"padding":2,"as":["x0","y0","x1","y1","depth","children"]}]
}
],
"scales":[{"name":"color","type":"ordinal","range":{"scheme":"category10"},"domain":{"data":"tree","field":"name"}}],
"marks":[
{"type":"rect","from":{"data":"tree"},
"encode":{"enter":{"fill":{"scale":"color","field":"name"},"stroke":{"value":"white"}},
"update":{"x":{"field":"x0"},"y":{"field":"y0"},"x2":{"field":"x1"},"y2":{"field":"y1"}}}},
{"type":"text","from":{"data":"tree"},
"encode":{"enter":{"fill":{"value":"white"},"fontSize":{"value":12},"baseline":{"value":"middle"},"align":{"value":"center"}},
"update":{"x":{"signal":"(datum.x0+datum.x1)/2"},"y":{"signal":"(datum.y0+datum.y1)/2"},"text":{"signal":"datum.depth>0 ? datum.name : ''"}}}}
]
}