Skip to main content
SimilarExport ZIP
100%

Zoomable Treemap Bar Chart

✓ Published0🌍 Public
TThanaporn-sk
Last edited Oct 30, 2019
Created on Oct 30, 2019

This interactive visualization combines a treemap and a bar chart to show U.S. trade balances across countries and years. Users can click a country to zoom into its trade data, adjusting for inflation via a toggle, with nodes animating to their new positions. Built with D3 v4, the chart uses `d3.json` to load Census data, `d3.hierarchy` for structure, and `d3.scaleBand` and `d3.scaleLinear` for axes. The implementation handles divide-by-zero `NaN` values during treemap transitions.

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/cmgiven/'>cmgiven</a>'s block: <a href='http://bl.ocks.org/cmgiven/4541f6de7b6fbef482aaa43f3a71f8d4'>Zoomable Treemap Bar Chart</a>

forked from <a href='http://bl.ocks.org/noblemillie/'>noblemillie</a>'s block: <a href='http://bl.ocks.org/noblemillie/61488e11d36467235dfe803f702a4905'>Zoomable Treemap Bar Chart</a>

forked from <a href='http://bl.ocks.org/noblemillie/'>noblemillie</a>'s block: <a href='http://bl.ocks.org/noblemillie/2ee582e828368148c2c2102023733440'>Zoomable Treemap Bar Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Zoomable Treemap Bar Chart

This zoomable treemap bar chart visualizes U.S. trade imports and exports from 1995 onward, with each year split into two bars for import and export values. Clicking a country zooms into its trade data, while a checkbox toggles between raw and inflation-adjusted figures. The visualization uses D3 v4’s `d3.hierarchy`, `d3.treemap`, `d3.scaleBand`, and `d3.axisBottom` to render SVG rectangles and axes, with transitions animating the zoom. Data comes from the U.S. Census Bureau’s foreign trade balance records.

TThanaporn-sk
93% match
Loading thumbnail…

Zoomable Treemap Bar Chart

This zoomable treemap bar chart visualizes U.S. trade imports and exports from 1995 onward, with each year split into two bars for import and export values. Clicking a country zooms into its trade data, while a checkbox toggles between raw and inflation-adjusted figures. The visualization uses D3 v4’s `d3.hierarchy`, `d3.treemap`, `d3.scaleBand`, and `d3.axisBottom` to render SVG rectangles and axes, with transitions animating the zoom. Data comes from the U.S. Census Bureau’s foreign trade balance records.

TThanaporn-sk
93% match
Loading thumbnail…

Zoomable Treemap Bar Chart

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.

KKuerzibe
91% match
Loading thumbnail…

HindSight: Zoomable Treemap Bar Chart

This interactive treemap bar chart visualizes United States trade balances across countries and continents from 1995 onward, with imports and exports shown as grouped bars per year. Users can click a country to zoom into its trade details, and a checkbox toggles between raw values and inflation-adjusted figures. Built with D3 v4, the visualization uses SVG rendering with smooth transitions (`d3.transition`) to animate the layout changes. The data is loaded from a local `data.json` file containing census trade statistics.

AAjayyy
86% 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

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…

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
73% 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
73% match