Quantity added to the visuals and

100%

Quantity added to the visuals and

✓ Published3🌍 Public

Last edited Aug 31, 2023

Created on Aug 21, 2023

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.

AI-generated description

https://d3-graph-gallery.com/graph/bubblemap_template.html

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

GGayan Priyadarshana

96% match

Loading thumbnail…

Quantity added to the visuals and

This visualization uses a treemap to show the value and quantity of steel scrap imports and exports between regions and partner countries. Users can filter by region and toggle between import/export data. Built with D3 v7, it uses `d3.treemap` and `d3.hierarchy` to layout hierarchical data, with cell color scaled via `d3.scaleSequential` and `d3.interpolateRgb`. Interactive drill-down reveals nested commodity details on click. Data comes from a CSV file.

GGayan Priyadarshana

96% match

Loading thumbnail…

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.

GGayan Priyadarshana

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

88% match

Loading thumbnail…

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.

GGayan Priyadarshana

87% match

Loading thumbnail…

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.

GGayan Priyadarshana

86% match

Loading thumbnail…

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.

GGayan Priyadarshana

86% match

Loading thumbnail…

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.

GGayan Priyadarshana

85% match