Format the text in the cell

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.

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

89% match

Custom Color TreeMap

This interactive treemap visualizes steel scrap exports by partner country and commodity type, using nested rectangles to emphasize trade value hierarchy. Users can click any country cell to drill down into detailed commodity breakdowns, with a reset button restoring the top-level view. Built with D3.js v7, the visualization employs the d3.treemap layout, d3.hierarchy for data structuring, and d3.scaleSequential with an interpolator for the light-to-dark blue color encoding. SVG rendering and 500ms transitions animate layout changes smoothly as the view hierarchy updates.

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.

Quantity added to the visuals and

This treemap visualization displays the value and quantity of steel scrap imports and exports between regions and partner countries. Users can filter the data by region and toggle between Import and Export modes, with the ability to reset the view. The code uses D3 v7’s `d3.treemap`, `d3.hierarchy`, and `d3.scaleSequential` to create the layout and color scale, while SVG rectangles represent each country’s aggregated trade value. Hovering reveals a tooltip with the country name, value, and quantity, and clicking drills down for more detail.

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.

TreeMap Values Breaking

This interactive treemap visualizes steel scrap export values from various countries to different destinations. The size of each rectangular cell represents the total export value for a country, colored in a uniform green. Clicking a country cell drills down to show the breakdown of export values by specific commodity types, such as "Stainless Steel Waste And Scrap" and "Shredded Steel Scrap." The visualization uses D3.js v7 with the `d3.treemap`, `d3.hierarchy`, and transition animations to smoothly update the layout when drilling down or resetting.

86% match

Add buttons

This treemap visualizes U.S. steel scrap export values by partner country and commodity, using area size and a light-to-dark blue color scale to encode magnitude. Clicking a country drilils down to show individual commodity values, while a reset button restores the top-level view. The D3 v7 implementation uses d3.hierarchy, d3.treemap, and d3.scaleSequential with interpolateRgb, rendering SVG rectangles with transitions and tooltips via title elements. Data comes from a CSV file with partner country, commodity description, and value fields.