Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Treemap Demo

Public visualization

Treemap Demo

0 stars1🌍 Public
Ggeorgeeeee
Last edited Oct 3, 2020
Created on Oct 1, 2020
Forked from React Starter

This treemap demo shows a hierarchical dataset of a CEO’s employees, grouped into three boss-level parents, with each leaf rectangle sized by its numeric value. The interface includes buttons to mutate the data: changing leaf values, adding or removing child nodes, and adding or removing entire parent groups. The visualization updates with animated transitions on rectangles and text labels, rendered in SVG via React. It uses d3.hierarchy and d3.treemap for layout, d3.scaleOrdinal for color coding by parent, and d3.scaleLinear for opacity based on value.

AI-generated description

A treemap demo which implements CRUD of nodes by using d3.hierarchy and d3.treemap.

Comments

Sign in to join the discussion.

MIT Licensed