Skip to content
Vega templates

Treemap

Hierarchical proportional area chart.

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