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 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.

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>

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
100% 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
94% 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
93% 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
88% 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
76% 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
76% match
Loading thumbnail…

Taiwanese Internatiobal Trade

A bar chart displays Taiwan's total trade values for various countries across years, with a horizontal timeline above it. Users hover over circles representing years from 2001 to 2019 to update the chart, triggering a smooth transition as the bars and axes animate to reflect the selected year's data. The visualization uses D3.js v4 with SVG rendering, employing scales, axes, and transition methods such as `transition().duration()` to animate changes. The code loads CSV data from a GitHub raw URL and renders in React, though the primary implementation is in plain JavaScript.

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