Skip to main content
SimilarExport ZIP
100%

Treemap Demo

✓ Published1🌍 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Treemap Demo

This interactive treemap displays a hierarchical company dataset with a CEO, three group leaders, and their employees. The visualization supports CRUD operations through buttons that update node values, add or remove employee nodes, and add or remove parent groups. Built with React and D3 v5, it uses `d3.hierarchy` and `d3.treemap` to compute layout, with SVG rectangles and text labels rendered, while `d3.transition` animates position and size changes over three seconds. Color and opacity scales encode group membership and node values.

Ddasari234
91% match
Loading thumbnail…

Treemap Template in React

This treemap displays hierarchical data with three group leaders and fourteen employees, using color to distinguish parent categories and labels to show names and values. Built with React and D3 v5, the visualization constructs the layout using `d3.hierarchy` and `d3.treemap`, while `d3.scaleOrdinal` assigns colors. The chart renders as SVG, with React’s `.map()` method generating rectangles and text elements instead of traditional D3 joins. Data is fetched asynchronously from a remote JSON file using `d3.json` within a React hook.

Iiblub
85% match
Loading thumbnail…

Untitled

This visualization displays a treemap of a hierarchical dataset with three group leaders and 14 employees. The rectangles are colored by parent group using a categorical scale and sized by leaf values, with opacity reflecting the numeric value. The code uses the D3.js hierarchy API and treemap layout to compute positions, then renders SVG rectangles and text labels, including group titles and individual data values. Data is loaded from a remote JSON file.

Pphemmati
84% match
Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie
80% match
Loading thumbnail…

d3 template

This example renders a treemap visualization using D3.js v6 in a React environment. It displays hierarchical data as nested rectangles, with each leaf node's area representing its value and labeled with its name. The code loads JSON data from a remote GitHub source, converts it into a hierarchy using `d3.hierarchy`, then computes the spatial layout with `d3.treemap`. The resulting SVG rectangles and text labels are appended to the chart, with leaves filled in slate blue, providing a clear visual breakdown of the data's composition.

NNita
79% match
Loading thumbnail…

Visualization of Spatial Data - Tree Graph

This example visualizes an organizational hierarchy as a tree graph using D3.js v5. The code loads employee data from a remote CSV file, then uses `d3.stratify()` to convert flat records into a hierarchical structure and `d3.tree()` to compute layout positions. Nodes are rendered as colored SVG circles—green for CEO, blue for CTO, orange for CFO, and red for HR Manager—with employee names displayed as text labels, while curved links connect managers to their direct reports.

Sshailajat1998@gmail.com
79% match
Loading thumbnail…

Treemap Example

This treemap visualizes the hierarchical flare dataset, showing relative leaf-node values as nested rectangles colored by their top-level parent category. Built with D3 v6 and rendered as SVG, the example implements a custom treemap layout algorithm via recursive space partitioning that alternates between horizontal and vertical splits. The code uses d3.scaleLinear for proportional sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and calculates text visibility based on rectangle dimensions. Data is loaded from a JSON file and displayed with interactive hover effects absent, focusing purely on static hierarchical encoding.

HhelloHailey-sketch
78% match
Loading thumbnail…

TreeMap Layout

This example demonstrates a treemap layout using D3 v5, displaying hierarchical data as nested rectangles sized proportionally to their values. The visualization shows four labeled nodes—three leaf nodes (C1, C2, C3) with varying values beneath a parent node (B1), alongside a sibling node (B2)—all enclosed within root A1, with padding and gaps between groups. It uses `d3.hierarchy` to structure the data and `d3.treemap` to compute the layout, rendering rectangles and text as SVG elements. The treemap applies an outer padding of 16 pixels and scales to a 400×200 pixel area, with a static dataset defined in the code.

Ffloresh
77% match