Skip to main content
SimilarExport ZIP
100%

HindSight: Zoomable Treemap Bar Chart

✓ Published0🌍 Public
AAjayyy
Last edited Jun 16, 2019
Created on Jun 16, 2019

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.

AI-generated description

Applying HindSight to...

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>

forked from <a href='http://bl.ocks.org/evanpeck/'>evanpeck</a>'s block: <a href='http://bl.ocks.org/evanpeck/43bd75f612fc3087d6b7a102cc196528'>HindSight: Zoomable Treemap Bar Chart</a>

forked from <a href='http://bl.ocks.org/evanpeck/'>evanpeck</a>'s block: <a href='http://bl.ocks.org/evanpeck/767ec5e067e0f9801e13ab9481b910e0'>HindSight: Zoomable Treemap Bar Chart</a>

forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/69a10a4678c005d6b4c1c0e09967569a'>HindSight: 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
88% 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
88% 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
88% match
Loading thumbnail…

Zoomable Treemap Bar Chart

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.

TThanaporn-sk
86% match
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
74% 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
74% match
Loading thumbnail…

Quantity added to the visuals and

This interactive treemap visualizes steel scrap import and export quantities by partner country for a selected region, with each rectangle sized by trade value and colored on a light-to-dark blue scale. Users filter by region and import/export direction via dropdown and radio buttons, and clicking a country drills down to show commodity-level details. Built with D3 v7, it uses `d3.hierarchy` for data nesting, `d3.scaleSequential` with `interpolateRgb` for color, and SVG elements with `.exit()` and `.enter()` patterns for updates. The tooltip reveals both monetary value and shipment quantity.

GGayan Priyadarshana
72% match
Loading thumbnail…

Untitled

This interactive bar chart displays GDP per capita for a selection of countries, with bars colored in blue and one highlighted in orange. Users can hover over individual bars to see details and click a checkbox to sort the values in descending order. Built with React and D3 v4, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to map country names and GDP values to SVG coordinates, with `d3.axisBottom` rendering the x-axis labels. The dataset is embedded directly in the code, and CSS classes define the bar colors for normal and highlighted states.

UUtsav Vachhani
72% match