Properly working radio button

100%

Properly working radio button

✓ Published1🌍 Public

Last edited Aug 18, 2023

Created on Aug 18, 2023

This visualization displays the total value of steel scrap imports or exports for various countries, using a treemap where each rectangle represents a country and its area corresponds to the monetary value. Users toggle between Import and Export data via radio buttons, which filters the dataset and re-renders the treemap with a light-to-dark blue color scale. The visualization uses D3.js version 7 with the `d3.treemap`, `d3.hierarchy`, and `d3.scaleSequential` APIs to build the interactive SVG graphic, reading data from a CSV file. The code also includes a reset button to restore the initial view, though the drill-down behavior on rectangle click is only partially implemented.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

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

80% match