Skip to main content
SimilarExport ZIP
100%

Zoomable Treemap Bar Chart

✓ Published0🌍 Public
KKuerzibe
Last edited Apr 6, 2017
Created on Apr 6, 2017

This visualization shows U.S. import and export trade balances by country and year, displayed as grouped treemap bar charts with inflation adjustment. Clicking a country zooms that country to the full height of the year’s bar, while other countries’ bars compress. The D3 code uses `d3.hierarchy`, `d3.scaleBand`, and `d3.scaleLinear` to lay out the data, with transitions animating the zoom effect. Data comes from the U.S. Census Bureau, with a checkbox to toggle between raw and inflation-adjusted values.

AI-generated description

Block-a-Day #12. Update of Treemap Bar Chart to enable zooming into a specific country on click.

Data Sources: Census

What I Learned: In a bit of treemap implementation trivia, nodes without a parent value of zero (i.e. those in a different continent than the selected country) will have NaN for their position values, as a result of a divide by zero, while those with a parent value but no value of their own will have position values, although width and height of, obviously, zero. I was originally just catching the NaNs, but this resulted in nodes flying to two different positions, thus the checking of d.value to determine how to position the nodes.

What I'd Do With More Time: Might be interesting if the transition was to vertically expand and fade the non-selected countries, to reinforce the idea of zooming in.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

  1. Ideas over implementation. Do something novel, don't sweat the details.
  2. No more than two hours can be spent on coding (give or take).
  3. Every. Single. Day.

Previously

forked from <a href='http://bl.ocks.org/timelyportfolio/'>timelyportfolio</a>'s block: <a href='http://bl.ocks.org/timelyportfolio/86b67adad02ea8ab8845abeedaa269cb'>Zoomable Treemap Bar Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

US FOREIGN TRADE

A bubble chart visualizes US foreign trade figures by region and country, using bubble size to represent total trade volume and color to indicate trade magnitude (low, medium, or high). Users can filter the display by year (2006–2010) or by clicking a regional bubble to drill down into individual countries. The visualization is built with the D3.js library (v2), using `d3.nest()` to hierarchically group data from the U.S. Census Bureau’s Foreign Trade Division, and `d3.layout.force()` for animated bubble positioning in SVG.

GGerHobbelt
73% match
Loading thumbnail…

Treemap Visualization

This treemap visualizes U.S. steel scrap trade values by partner country, with radio buttons to switch between Import and Export data. Each rectangle represents a country, sized and colored by total trade value, and clicking a cell drills down to show individual commodities. The visualization uses D3.js v7 with `d3.hierarchy`, `d3.treemap`, and `d3.scaleSequential` for color encoding, rendering SVG elements with interactive click handlers and animated updates. Data comes from a CSV file containing import/export records.

GGayan Priyadarshana
73% match
Loading thumbnail…

Interactive Graph

This interactive graph visualizes changes in U.S. import and export values across six commodity categories over multiple time periods. Users can switch between different data snapshots and toggle between imports and exports, with animated bar transitions updating the display. The visualization uses D3.js (v7) with SVG rendering, leveraging scales, axes, and transition methods to create smooth updates. The bar chart encodes values on a linear scale, and the code includes predefined datasets for each period.

CChuyang Xiao
72% 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
72% match
Loading thumbnail…

TreeMap with a reset button to go back

This interactive D3.js treemap visualizes U.S. scrap metal export values by partner country and commodity, using an SVG rendering with clickable cells and animated transitions. The chart initially displays total export values per country as hierarchically sized rectangles, and clicking any country drills down to show its commodity-level breakdown. A reset button restores the view. The code uses `d3.csv` to load data, `d3.hierarchy` and `d3.treemap` for layout, and `transition()` for smooth updates, with data sourced from a CSV file.

GGayan Priyadarshana
71% match
Loading thumbnail…

TreeMap with Tooltips

This tree map displays US steel scrap exports by partner country and commodity type, with each rectangle sized according to trade value. The visualization supports drill-down interaction by clicking on a country to reveal its commodity breakdown, plus a reset button to return to the top level. Built with D3 v7, it uses `d3.hierarchy` and `d3.treemap` to compute the layout, renders SVG rectangles with native tooltips via the `title` element, and animates resizing through `transition`. Data comes from an external CSV file containing country, commodity, and value columns.

GGayan Priyadarshana
71% 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
70% match
Loading thumbnail…

Untitled

This example visualizes the GDP per Capita of a selection of countries as animated bar charts, with interactivity provided by hovering over bars to see tooltips and clicking a checkbox to sort the values in descending order. The visualization is built using D3 v4 (loaded via UNPKG), rendering SVG elements, and fetching data from the Wasabi API. The code demonstrates importing from the `d3` module and local ES6 modules, using `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart.

EEklavya Jain
70% match