Treemap Visualization

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.

91% match

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.

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

90% match

Format the text in the cell

This interactive treemap visualizes steel scrap import and export values across partner countries, with each cell representing a country sized by total trade value and colored by magnitude. Users can filter between import and export data via radio buttons or reset the view. Built with d3.v7, it uses d3.treemap for hierarchy layout, d3.scaleSequential for color interpolation, and d3.hierarchy for data processing. The visualization supports click-to-drill-down navigation into commodity details, with cells rendered as SVG groups containing rectangles and text labels.

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.

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.

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.