Skip to main content
100%

Canadian Exports to US Treemap

✓ Published0🌍 Public
CCurran Kelleher
Last edited Dec 23, 2025
Created on Mar 10, 2025

This visualization displays Canada's exports to the United States in 2022 as a hierarchical treemap, with rectangles sized by export value and colored by sector (e.g., Minerals, Agriculture). Hovering over a product rectangle highlights related items and reveals a tooltip with the product name, export amount, share, code, and sector. Built with D3.js, it uses d3.treemap for layout, d3.scaleOrdinal for color assignment, d3.scaleSqrt for font sizing, and a ResizeObserver for responsive dimensions. The data loads from a TSV file via d3.tsv.

AI-generated description

This visualization shows Canadian exports to the United States in 2022 using a hierarchical treemap layout. The data is organized by sectors, with individual products nested within each sector. The data and visualization idea come from Atlas of Economic Complexity: What did Canada export to the United States of America in 2022?

See also Gist containing the data.

Visualization Features

  • Hierarchical treemap showing export values by sector and product
  • Interactive tooltips with detailed information
  • Color coding by sector
  • Responsive layout that adapts to screen size
  • Hover effects to highlight related items

Data Structure

The data is structured hierarchically:

  • Top level: Total exports
  • Second level: Sectors (e.g., Minerals, Agriculture)
  • Third level: Individual products within each sector

Each product includes:

  • Name
  • Export value
  • Share of total exports
  • Product code
  • Parent sector

Technical Implementation

Built using:

  • D3.js for visualization
  • Treemap layout for hierarchical data representation
  • ResizeObserver for responsive design
  • Custom tooltip implementation

How to Read the Visualization

  • Each rectangle represents a product or sector
  • Size corresponds to export value
  • Color indicates the sector
  • Hover over rectangles to see detailed information
  • Related items are highlighted on hover
MIT Licensed

Similar vizzes

Loading thumbnail…

Canadian Exports to US Treemap (draft)

This visualization presents Canadian exports to the United States in 2022 as a hierarchical treemap, with rectangles sized by export value and colored by sector using d3.treemap and d3.scaleOrdinal with schemeCategory10. Hovering reveals tooltips with product name, export value, share, code, and sector. The data comes from the Atlas of Economic Complexity via a TSV file, with D3.js handling data loading, layout, and responsive rendering based on container dimensions observed through ResizeObserver.

CCurran Kelleher
96% match
Loading thumbnail…

Canada to US Imports

This visualization shows a treemap of imports from Canada to the US, sized by gross export value and colored by sector (minerals, agriculture, food, etc.). The data, sourced from the Harvard Atlas of Economic Complexity and formatted as a TSV with names, values, and share percentages, is rendered using the D3.js treemap layout. The treemap uses D3’s `treemap` layout algorithm to position and size rectangles proportionally, with a color scale distinguishing sectors, displaying the dominant share of crude petroleum and other mineral exports.

CCurran Kelleher
87% match
Loading thumbnail…

Custom Color TreeMap

A custom color TreeMap visualizes US steel scrap exports, showing the hierarchy of partner countries (Canada, India, South Korea, Mexico, Pakistan, Taiwan, Thailand, Turkey) and the value of each commodity shipped. The treemap uses nested rectangles sized by the total export value per country, with a dark blue to light blue sequential color scale encoding magnitude. The visualization, built with d3.treemap and d3.hierarchy, supports drill-down by clicking a country's cell to explore its commodity breakdown. A reset button restores the root view, and transitions animate changes when drilling down or resetting.

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

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Hhanulik.ondrej@gmail.com
69% match
Loading thumbnail…

Tree Map Example

This treemap visualizes steel scrap exports from partner countries, with each initial rectangle representing a country and its total export value. Clicking a country drills down to show a secondary treemap of that country’s commodity descriptions and their values. Built with D3 v7, the visualization uses `d3.hierarchy` and `d3.treemap` to compute the layout, rendering rectangles and labels as SVG elements. Data is loaded from a CSV file, and the drill-down interaction uses D3 transitions to animate the rectangle sizes and text updates over 500 milliseconds.

GGayan Priyadarshana
68% match
Loading thumbnail…

TreeMap with Tooltips and colors correctly

This treemap visualizes the total export values of steel scrap commodities by partner country, using a hierarchical layout where each country is a top-level branch and individual commodities become leaf cells. The diagram is initially aggregated to country level, but users can click any country cell to drill down and reveal its commodity breakdown, with a reset button to return to the overview. Cell size encodes total trade value, while color runs from light to dark blue via a sequential scale based on the maximum leaf value. The visualization is built with D3 v7, using `d3.hierarchy` for tree construction, `d3.treemap` for layout, and SVG transitions with 500-millisecond durations to animate changes between drill-down levels. Tooltips on each cell display either the country total or the commodity name and value, and text labels are wrapped to fit within each cell’s dimensions. Data is loaded from a CSV file containing partnerCountry, commodityDescription, and Value columns, representing U.S. steel scrap exports.

GGayan Priyadarshana
68% match