Interactive treemap

Weighted hierarchies shown as nested areas for broad branch-size comparison.

Purpose: Explore weighted hierarchies with area for leaves and branch totals.
Use when: Relative size within a recursive structure is more important than precise comparison.
Avoid when: Deep nesting or exact values must be compared; use a tree and table.
Equivalent data: An adjacent table preserves node paths, parents, totals, leaf values, and classes.

Default Rendered example

File system usage in KB. Select a directory to focus it in the same chart; use the breadcrumb to return.

Exact hierarchy and values

Path	Parent	Value	Class
d1 / f1	d1	1000	file
d1	—	1000	directory
d2 / f1	d2	100	file
d2 / f2	d2	300	file
d2 / f3	d2	200	file
d2	—	600	directory
d3 / f0	d3	8	file
d3 / f1	d3	5	file
d3 / f2	d3	12	file
d3 / f3	d3	9	file
d3 / f4	d3	6	file
d3 / f5	d3	13	file
d3 / f6	d3	10	file
d3 / f7	d3	7	file
d3 / f8	d3	14	file
d3 / f9	d3	11	file
d3 / f10	d3	8	file
d3 / f11	d3	5	file
d3 / f12	d3	12	file
d3 / f13	d3	9	file
d3 / f14	d3	6	file
d3 / f15	d3	13	file
d3 / f16	d3	10	file
d3 / f17	d3	7	file
d3 / f18	d3	14	file
d3 / f19	d3	11	file
d3 / f20	d3	8	file
d3 / f21	d3	5	file
d3 / f22	d3	12	file
d3 / f23	d3	9	file
d3 / f24	d3	6	file
d3 / f25	d3	13	file
d3 / f26	d3	10	file
d3 / f27	d3	7	file
d3 / f28	d3	14	file
d3 / f29	d3	11	file
d3 / f30	d3	8	file
d3 / f31	d3	5	file
d3 / f32	d3	12	file
d3 / f33	d3	9	file
d3 / f34	d3	6	file
d3 / f35	d3	13	file
d3 / f36	d3	10	file
d3 / f37	d3	7	file
d3 / f38	d3	14	file
d3 / f39	d3	11	file
d3	—	380	directory
f1	—	450	file

Usage Example

@interactivetreemap.Treemap(interactivetreemap.Config{
  Label: "Basic treemap example",
  Caption: "File system usage in KB. Select a directory; use the breadcrumb to return.",
  Nodes: []*interactivetreemap.Node{
    {Name: "d1", Class: "directory", Children: []*interactivetreemap.Node{
      {Name: "f1", Value: 1000, Class: "file"},
    }},
    {Name: "d2", Class: "directory", Children: []*interactivetreemap.Node{
      {Name: "f1", Value: 100}, {Name: "f2", Value: 300}, {Name: "f3", Value: 200},
    }},
    {Name: "d3", Class: "directory", Children: deterministicFiles},
    {Name: "f1", Value: 450, Class: "file"},
  },
  Navigation: interactivetreemap.NavigationDrillDown,
  Roam: interactivetreemap.RoamEnabled,
  LabelOptions: &chart.LabelOptions{Show: chart.Bool(true), Position: "inside"},
  UpperLabel: &chart.LabelOptions{Show: chart.Bool(true)},
  Breadcrumb: &interactivetreemap.Breadcrumb{Show: chart.Bool(true)},
  NodeStyle: interactivetreemap.NodeStyle{BorderWidth: 1, GapWidth: 1},
  LeafDepth: chart.Int(1),
  Width: "100%",
  Height: "500px",
})

Hierarchy values

Leaf values determine branch area. Use the table for exact totals and paths; drill-down is only a visual exploration aid.

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/interactive/treemap

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API