Canada to US Imports

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.

68% match

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.

66% match

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.

66% match

Region Filter

This interactive treemap visualizes steel scrap trade values between the United States and its partner countries, filtered by import or export direction. Users can toggle between these flows and select a specific region, which aggregates data by partner country using d3.hierarchy from the CSV dataset. The visualization uses d3.treemap to layout cells, with a sequential color scale mapping value magnitude from lightblue to darkblue. Clicking a country cell drills down to reveal commodity-level details, while the reset button restores the aggregated country view.

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

Gist 5e36771400038b0c861c6617c622c5f7

A map of Canada visualizes interprovincial migration flows for 2017 Q2 and Q3, using animated, arrow-headed routes and scaled circles to show the net movement of people between provinces and internationally. Provincial boundaries are rendered from a TopoJSON file via `d3.geoPath` with a conic conformal projection, while migration data from a CSV file drives the visualization. A dropdown menu lets users switch between time periods, and D3 v4 handles the SVG rendering and animations.

MMbrownshoes

Quantity added to the visuals and

This interactive treemap visualizes the value and quantity of steel scrap imports and exports by region and partner country. Users can filter by region and toggle between import and export data, with each country’s box subdivided by commodity type. Built with D3 v7, it uses `d3.treemap()` for the layout and `d3.hierarchy().sum()` to aggregate values. A sequential color scale encodes the total value, while tooltips display both monetary value and quantity. The visualization reads from a CSV and supports drill-down on click.

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.