Fork of Treemap Demo

100%

Fork of Treemap Demo

✓ Published0🌍 Public

Last edited Nov 25, 2021

Created on Nov 25, 2021

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Treemap Demo

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.

Ggeorgeeeee

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

84% 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

81% match

Loading thumbnail…

Fork of vxv tree

This visualization displays a treemap of companies grouped by industry, with each cell sized by relative score and color-coded to show either relationship scores or percentage net change. The treemap is built using `d3.treemap` and `d3.hierarchy` with hierarchical data parsed from a JSON source. Cells contain clipped text labels, and a React interface toggles between the two color scales (`d3.scaleLinear`). The SVG rendering uses React with D3 v7 and updates colors via a `useEffect` hook.

MMark Lam

79% match

Loading thumbnail…

Fork of Collapsible Tree Version 3

This collapsible tree diagram displays hierarchical employee data, organized by department such as Operation, Technology, and HR & Admin. The visualization uses a D3 tree layout with SVG rendering and animated transitions to expand and collapse nodes on click. Built with d3.hierarchy and the d3.tree() API, the code reads hierarchical data from a JavaScript object and applies a diagonal path generator for curved links. Node circles and text labels update their positions smoothly over a 750-millisecond duration, with collapsed nodes remaining visible via a lighter blue fill.

Gganeshnikumbh

78% match

Loading thumbnail…

Fork of D3 Tree with Multiple Parents

This example visualizes a hierarchical company ownership structure where nodes can have multiple parents, showing relationships between companies, government, labor, and the stock market. The visualization uses a D3 tree layout with data from a JSON file, and employs Underscore.js to deduplicate nodes by ID and recalculate their positions. Nodes and links render as SVG text and paths, with interactions including zoom and pan via `d3.zoom`, while the code uses `d3.hierarchy`, `tree()`, and `linkHorizontal`. The rendering includes animations when nodes transition positions using D3 transitions.

AAnkitha B H

78% match

Loading thumbnail…

Organizational chart using d3.v5

This example displays an interactive organizational chart for a fictional company, with employee nodes showing photos, names, and job titles. The hierarchy is rendered as a zoomable and pannable tree using SVG and animations. Built with React and d3.v5, it leverages `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` to manage layout, links, and pan/zoom interactions. The data comes from `flare.json`, with expand/collapse controls and a search feature for finding employees.

Ssrinivasjavvadi

77% match

Loading thumbnail…

Fork of Tree Example

This interactive tree diagram visualizes a hierarchical family tree using D3.js. Users can click on nodes to collapse or expand branches, with smooth animated transitions between states. The visualization uses D3’s tree layout and diagonal path generator to render SVG links, while node positions animate via `transition()` calls. Data is structured as a nested JSON array, and the code employs `d3.layout.tree`, `d3.svg.diagonal`, and event handlers for node toggling.

TTejucmandava

77% match