Skip to content
Vega templates

Treemap

Rectangle hierarchy sized by metric.

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