Fork of Working Region Filter

100%

Fork of Working Region Filter

✓ Published0🌍 Public

Last edited Aug 21, 2023

Created on Aug 21, 2023

Forked from Quantity added to the visuals and

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Fork of Custom Color TreeMap

This interactive treemap visualizes steel scrap exports from the United States to various partner countries, with each colored rectangle representing a country and its total export value. The visualization uses d3.hierarchy and d3.treemap to compute the layout, with a sequential color scale interpolating from lightblue to darkblue based on value magnitude. Users can click any country cell to drill down into its commodity-level breakdown, while a reset button restores the original country-level view. The code employs D3 v7's data joins and transition methods to smoothly animate between hierarchy levels, with SVG rendering for all elements.

GGayan Priyadarshana

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

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

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

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

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

84% match

Loading thumbnail…

Fork of TreeMap with Tooltips and colors correctly

This interactive treemap visualizes steel scrap exports from various countries, showing total export values per country and their breakdown by commodity type. Users can click on a country cell to drill down into its specific commodity details, with a reset button to return to the top-level view. The visualization uses d3.hierarchy, d3.treemap, and d3.scaleSequential with an interpolateRgb color scale, rendering SVG elements with smooth transitions and tooltips for additional information. Data comes from a CSV file containing partner country, commodity description, and value columns.

GGayan Priyadarshana

84% match