Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
GGuillamon
Last edited Mar 28, 2020
Created on Mar 28, 2020
Forked from Untitled

This zoomable treemap visualizes hierarchical data with interactive drill-down navigation. The chart renders rectangles sized by a primary measure, with a grandparent breadcrumb bar at the top for navigating back through levels. Hovering highlights child rects and displays a custom light-blue tooltip with additional metrics. The implementation uses `d3.hierarchy`, `d3.treemap`, and SVG animations, while the data is preprocessed through `d3.nest` to build the nested structure from flat records.

AI-generated description

V2 Example taken from here https://bl.ocks.org/amo6002/921e5933211ee996cd49420b21afca2c

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This zoomable treemap visualizes hierarchical data with interactive drill-down navigation. The chart renders rectangles sized by a primary measure, with a grandparent breadcrumb bar at the top for navigating back through levels. Hovering highlights child rects and displays a custom light-blue tooltip with additional metrics. The implementation uses `d3.hierarchy`, `d3.treemap`, and SVG animations, while the data is preprocessed through `d3.nest` to build the nested structure from flat records.

GGuillamon
100% match
Loading thumbnail…

Untitled

This interactive treemap visualization displays hierarchical data using nested rectangles sized by a primary measure, with color encoding based on an optional secondary metric. The chart supports drill-down navigation through clickable parent nodes and shows tooltips on hover. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to transform flat data into a navigable structure, rendering SVG elements with smooth animated transitions between zoom levels.

Ttareefroustom
94% match
Loading thumbnail…

Untitled

This interactive treemap visualizes a hierarchical dataset with nested rectangles sized by a primary numeric measure and colored by a secondary metric. Users can hover over nodes to see tooltips with additional data, while clicking parent and grandparent rectangles zooms into deeper levels of the hierarchy. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to aggregate data, with SVG rendering and smooth transitions between zoom states. The hover effects and tooltip functionality are implemented with CSS and JavaScript event handlers.

GGuillamon
94% match
Loading thumbnail…

Fork of Untitled

A zoomable treemap visualizes hierarchical data, with rectangles sized by a user-selected measure and color-coded by an optional metric. The chart supports interactive drilling down through levels, showing breadcrumb navigation and tooltips on hover. Built with D3 v4, the visualization uses `d3.treemap` for layout, `d3.hierarchy` and `d3.nest` for data structuring, and SVG with animated transitions for smooth zooming between levels. Hover effects highlight parent-child relationships, and the code includes customizable parameters for multiple measures and tooltip fields.

Llimenzi
89% match
Loading thumbnail…

Untitled

This example displays a treemap visualization of hierarchical data, with the current view showing video game sales grouped by platform, or movie and Kickstarter data sets selectable via links at the top. It uses the d3 v4 API, specifically `d3.treemap()`, `d3.hierarchy()`, and `d3.scaleOrdinal` with the `schemeCategory20` color palette, to render the nested rectangles. The SVG output includes tooltips on mouseover, which display the name, category, and value of each tile using data attributes.

Vvaynexie
83% 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
82% match
Loading thumbnail…

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Rrca0214
81% match
Loading thumbnail…

Untitled

This example demonstrates an interactive, zoomable tree diagram built with D3.js, presenting hierarchical data from a JSON file. Users can pan and zoom the tree, as well as drag and drop nodes to rearrange them, with animations using `d3.layout.tree` and `d3.svg.diagonal`. The code includes custom panning logic and a zoom listener with scale constraints, rendering the visualization as SVG elements with linked paths and draggable node circles.

Ppo-drik
81% match