Skip to main content
SimilarExport ZIP
100%

Region Filter

✓ Published1🌍 Public
GGayan Priyadarshana
Last edited Aug 21, 2023
Created on Aug 18, 2023

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.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working Region Filter

This interactive treemap visualizes US steel scrap trade data, showing the relative monetary value of imports and exports by partner country within a selected region. Users can filter the view by region and toggle between import and export flows. The visualization uses a hierarchical treemap layout, rendered as SVG, with color intensity reflecting magnitude. Built with D3 v7, the code leverages `d3.hierarchy` and `d3.treemap` to structure and compute rectangle positions, while `d3.scaleSequential` drives the color mapping. Clicking a country cell initiates a drill-down, suggesting further exploration of commodity-level details.

GGayan Priyadarshana
90% 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…

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
87% match
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
86% 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
86% match
Loading thumbnail…

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.

GGayan Priyadarshana
86% 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
85% match
Loading thumbnail…

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.

GGayan Priyadarshana
84% match