NAFTA treemap

100%

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

This treemap visualizes NAFTA trade data, with each rectangle representing a product category and its area proportional to trade value. Color encodes the parent country (Mexico, Canada, or the United States), using a faded categorical color scheme. Built with D3 v4 and rendered in SVG, the view includes radio buttons to switch the treemap's value metric between size (trade value) and count. The rectangles are labeled with product names and values, and the layout uses the squarified treemap algorithm with animated transitions when switching modes.

AI-generated description

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063582'>Treemap</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Nafta tre

A treemap of U.S. trade with Canada visualizes the value of exported goods across 99 product categories. Each rectangle's area encodes the export value in US dollars, while color encodes the product category using a faded categorical palette. The visualization uses D3 v4’s hierarchical treemap layout with the squarified tiling algorithm to recursively subdivide the space. A radio button labeled “Size” is provided, though it only toggles the single available mode; hovering is not implemented, and the animation is limited to the initial layout transition. The data is from the Flare toolkit and Jeff Heer’s dataset, adapted by andrewwitherspoon.

Aandrewwitherspoon

87% match

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

76% match

Loading thumbnail…

Canadian Exports to US Treemap

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.

CCurran Kelleher

75% match

Loading thumbnail…

Zoomable Treemap Bar Chart

This zoomable treemap bar chart visualizes U.S. trade balances with countries worldwide, using nested rectangles sized by trade value and colored by continent. Clicking a country zooms the view to focus on that nation's trading partners, smoothly animating the treemap's layout via D3 transitions. The visualization is built with D3 v4 and SVG, leveraging a hierarchical dataset from Census trade data to show import/export relationships across years, continents, and countries. Interaction enables users to drill into specific countries, with the treemap restructuring to highlight the selected nation while non-selected regions fade and reposition.

Aabrown004

71% 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

71% 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

70% 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

69% 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

68% match