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

100%

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

✓ Published0🌍 Public

Last edited Jun 1, 2018

Created on Jun 1, 2018

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.

AI-generated description

A zoomable treemap, dynamic width for mobile, wrap text and colors. Created for the Open Data Portal of Seine-Saint-Denis, with the datasets grouped by political publics drawn based on the budget of the individual datasets

The d3 code is heavily based on code shared by Mike Bostock, Zan Armstron and PMeinshausen.

forked from <a href='http://bl.ocks.org/JacquesJahnichen/'>JacquesJahnichen</a>'s block: <a href='http://bl.ocks.org/JacquesJahnichen/42afd0cde7cbf72ecb81'>d3.js - A zoomable treemap, dynamic width, with colors and wrap text</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3.js v4 - Zoomable treemap

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.

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

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

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

73% match

Loading thumbnail…

Zoomable Treemap

This zoomable treemap visualizes UK Home Office flight data from 2011, showing hierarchical relationships between destinations, suppliers, and ticket classes. Built with D3 v2 and rendered as an SVG with smooth zoom animations, the treemap uses nested rectangles sized by paid fare amounts, with color encoding categories. Users can click to zoom between hierarchy levels. The data is loaded from a CSV and transformed using d3.nest, while the custom layout function optimizes the treemap for the current zoom state, enabling fluid transitions as users navigate the data.

CCBasis

73% match

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

72% match

Loading thumbnail…

d3-voronoi-treemap

The visualization displays global economic output by GDP, showing a treemap that morphs between rectangular and Voronoï layouts. It uses D3.js v4 with the d3-voronoi-treemap plugin, which iteratively partitions space to create weighted Voronoï polygons. Animated transitions between the two layouts are powered by flubber's `fromRect` interpolation, applied via `transition.attrTween` on SVG paths. The data comes from a JSON file of country GDP weights grouped by continent, with each region assigned a distinct color.

KKcnarf

71% match