Skip to main content
SimilarExport ZIP
100%

Fork of Untitled

✓ Published0🌍 Public
Llimenzi
Last edited May 18, 2021
Created on May 18, 2021
Forked from 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.

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
89% 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
89% 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
86% 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
86% match
Loading thumbnail…

Fork of TreeMap Layout

This example displays a treemap visualization of hierarchical data using D3 v5’s `d3.hierarchy` and `d3.treemap` layouts. The SVG renders nested rectangles sized proportionally to node values, with labels for named leaves and empty labels for internal branches. The code manually constructs the dataset in `index.js`, sums values via `root.sum`, and applies layout properties like `paddingOuter`. Rectangles and text are appended into grouped `<g>` elements, with styling from `styles.css` using royal blue fills and white strokes.

ZZoha9
80% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This fork of the D3 v5 Zoomable Sunburst visualizes hierarchical data as an interactive radial partition layout. Clicking a node zooms the view to focus on that node’s subtree, with smooth animated transitions between levels. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates arc paths and labels. Data is loaded from the Observable `@observablehq/flare` dataset, rendered as SVG paths with color-coded top-level branches and interactive click handlers.

CChase Hall
79% match
Loading thumbnail…

Zoomable Treemap

A zoomable treemap displays a hierarchical dataset as nested rectangles, with area encoding each node’s value. Users click a cell to zoom in and explore its children, or click the top to zoom back out. Built with d3.treemap, a custom tiling function, and d3.scaleLinear for positioning. Zoom transitions animate both SVG groups and their coordinates. Data comes from the flare-2.json file, rendered as animated SVG with click-driven navigation.

VVickoh
79% match
Loading thumbnail…

Fork of Untitled

This interactive visualization uses a circular packing layout to display the hierarchical structure of the flare dataset, with nested circles representing categories and their sub-items sized by a numeric value. Clicking a circle zooms into that node, smoothly animating the view through a tween on the interpolateZoom function while adjusting label visibility and opacity for the new focus. The SVG is rendered with D3 v4, using the d3.pack layout and d3.hierarchy API to compute circle positions, and a linear color scale with HSL interpolation to encode depth. The code is built as a React component, though the visualization itself relies on direct DOM manipulation through D3 selections.

LLaowei42
79% match