Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
GGuillamon
Last edited Nov 25, 2019
Created on Nov 7, 2019
Forked from 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.

AI-generated description

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

MIT Licensed

Similar vizzes

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
96% match
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
94% match
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
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
86% 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
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
83% 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
82% match
Loading thumbnail…

Untitled

This interactive visualization displays a hierarchical tree as a circular packing layout, where nodes are sized proportionally to their values. The code uses the D3.js library (v6.7.0) with its `pack` and `hierarchy` APIs to compute node positions, and transitions to animate changes. Clicking a parent node collapses or expands its children, triggering a re-layout. The SVG renders nodes as circles with labels, and blue directed links with arrowheads connect specific nodes across the hierarchy, based on a `links` array in the data.

Mmiloparra
81% match