Skip to main content
SimilarExport ZIP
100%

d3.js v4 - Zoomable treemap

✓ Published0🌍 Public
SSigfried
Last edited Jun 1, 2018
Created on Jun 1, 2018

This zoomable treemap visualizes the provisional income budget for the city of Rome across three years (2016–2018), using nested rectangles to represent hierarchical budget categories. Built with D3 v4, it employs `d3.treemap`, `d3.hierarchy`, and linear scales for layout, with SVG rendering and animated transitions on zoom. Breadcrumbs in the navigation bar track the current hierarchy level, while tooltips appear via SVG title elements. The code supports dynamic width for mobile devices and wraps text labels within cells; it omits colors entirely, relying on structure and labels for readability.

AI-generated description

A zoomable treemap, with dynamic width for mobile, and wrapped texts.

The code has been ported to D3v4, and humbly improved from the original Jacques Jahnichen's Block.

The data visualizes the income provisional budget for the city of Rome, as of year 2016.

This gist is part of the OpenBilanci project.

Modifications and improvements include: colors are not used, breadcrumbs have been added to the navigation bar, titles have been added to the svg rects (popover effect on some browser)

forked from <a href='http://bl.ocks.org/guglielmo/'>guglielmo</a>'s block: <a href='http://bl.ocks.org/guglielmo/f28d653dce899affeec6e34a733325e4'>d3.js v4 - Zoomable treemap</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

d3.js - A zoomable treemap, dynamic width, with colors and wrap text

This zoomable treemap visualizes the budget of the Seine-Saint-Denis department, grouping datasets by political policy areas. Color encodes the rate of budget change, from negative (purple) to positive (blue), while rectangle size reflects monetary value. The d3.v3 layout uses `d3.layout.treemap` with dynamic width for mobile, animated transitions, and wrapped text labels. Data comes from `budget-data.json`, and the implementation builds on Mike Bostock's treemap and Zan Armstrong's adaptations.

SSigfried
84% match
Loading thumbnail…

Zoomable treemap template

This zoomable treemap template visualizes hierarchical data, allowing users to click on nested groups to zoom into deeper levels or click the orange top band to zoom out. Built with D3 v3, it uses `d3.layout.treemap`, custom layout functions, and SVG transitions to animate the zooming. The example includes sample data representing world population figures organized by region and subregion, sourced from countries.git. The code is written in ES2015 and follows an Airbnb-style format, with the main logic abstracted into `drawTreemap.js`.

PPacsangon
77% match
Loading thumbnail…

Zoomable treemap template

Built with D3.js v3 and jQuery, this interactive visualization presents education resource data as a zoomable treemap. The code uses `d3.layout.treemap` to hierarchically arrange rectangles by value, colored via `d3.scale.category20c`, with click-to-transition zooming between parent and child nodes. Data is loaded from a JSON array of entries containing subject, region, subregion, and count values, which the treemap aggregates and lays out recursively. The SVG renders responsive rectangles and a grandparent breadcrumb header, demonstrating a reusable template for hierarchical exploration.

Aabhineetsingh10
76% 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
76% 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
75% match
Loading thumbnail…

Zoomable treemap template

This zoomable treemap displays hierarchical data through nested rectangles sized by value, allowing drill-down navigation to explore subregions. It visualizes Indian education statistics from a JSON file, grouping entries by region and subregion. The example uses d3.v3 with the d3.layout.treemap API and SVG rendering, implementing custom recursive layout and accumulate functions. Click transitions animate zooming between hierarchy levels, with an orange breadcrumb bar showing the current path and enabling navigation back to parent nodes.

Aabhineetsingh10
75% 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
74% 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
74% match