Tree Map Example

Tree Map with Drill down working

This tree map visualizes the value of steel scrap exports from various countries, with each top-level rectangle representing a partner country and its total export value. The chart uses D3 v7’s `d3.hierarchy` and `d3.treemap` layout to render the hierarchical data as SVG rectangles. Clicking a country cell drills down to display the commodity-level breakdown for that country, using `transition` for smooth animated updates of the rectangles and labels. The data is loaded from a CSV file containing partner country, commodity description, and export values.

94% match

Tree Map Example

This interactive tree map visualizes the value of steel scrap exports from various countries, organized by destination country and then by specific commodity type. Each rectangle's area corresponds to the export value in dollars, providing a clear comparison of the trade volumes between categories. The visualization is rendered using the D3.js version 7 library, which constructs a hierarchical data structure from a CSV file and applies a treemap layout algorithm. The chart uses SVG for rendering rectangles and text labels, with the color palette consistently applying a single green tone to all nodes.

92% match

Ordered Tree Map with Drill down working

This interactive treemap visualizes steel scrap export values by partner country, with each country’s total represented as a colored rectangle. Clicking a country drills down to display its individual commodity categories as sub-rectangles, sized proportionally to their monetary values. The chart uses D3 v7’s `d3.hierarchy`, `d3.treemap`, and SVG rendering, with click-driven drill-down updates and smooth `transition()` animations on rectangle dimensions and labels. Data is loaded from a CSV file containing partnerCountry, commodityDescription, and Value fields.

90% match

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.

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 interactive tree map visualizes the hierarchy of steel scrap imports by partner country and commodity type. The hierarchical data is aggregated and rendered as nested rectangles using the D3.js treemap layout algorithm. Each country cell is color-coded and labeled, and clicking a country drills down to reveal its constituent commodity categories. Tooltips display the country, commodity, and value on hover, while a reset button restores the original view. The dynamic updates and transitions are implemented using D3's `transition` API within an SVG-based rendering.

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.

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.