Fork of Fork of TreeMap with Tooltips and colors correctly

100%

Fork of Fork of TreeMap with Tooltips and colors correctly

✓ Published1🌍 Public

Last edited Aug 18, 2023

Created on Aug 18, 2023

Forked from Fork of TreeMap with Tooltips and colors correctly

A treemap visualization displays steel scrap exports by partner country, with rectangles sized and colored by total export value. The view supports drill-down through country nodes to reveal commodity-level breakdowns, with tooltips showing exact values. The code uses d3.csv to load data, d3.hierarchy and d3.treemap for layout, and d3.scaleSequential for color encoding. Rendered in SVG with d3 transitions for updates, a reset button restores the initial country-level view.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

91% match

Loading thumbnail…

TreeMap with Tooltips and colors correctly

This treemap visualizes the total export values of steel scrap commodities by partner country, using a hierarchical layout where each country is a top-level branch and individual commodities become leaf cells. The diagram is initially aggregated to country level, but users can click any country cell to drill down and reveal its commodity breakdown, with a reset button to return to the overview. Cell size encodes total trade value, while color runs from light to dark blue via a sequential scale based on the maximum leaf value. The visualization is built with D3 v7, using `d3.hierarchy` for tree construction, `d3.treemap` for layout, and SVG transitions with 500-millisecond durations to animate changes between drill-down levels. Tooltips on each cell display either the country total or the commodity name and value, and text labels are wrapped to fit within each cell’s dimensions. Data is loaded from a CSV file containing partnerCountry, commodityDescription, and Value columns, representing U.S. steel scrap exports.

GGayan Priyadarshana

89% match

Loading thumbnail…

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.

GGayan Priyadarshana

89% match

Loading thumbnail…

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.

GGayan Priyadarshana

88% match

Loading thumbnail…

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.

GGayan Priyadarshana

87% match

Loading thumbnail…

Custom Color TreeMap

A custom color TreeMap visualizes US steel scrap exports, showing the hierarchy of partner countries (Canada, India, South Korea, Mexico, Pakistan, Taiwan, Thailand, Turkey) and the value of each commodity shipped. The treemap uses nested rectangles sized by the total export value per country, with a dark blue to light blue sequential color scale encoding magnitude. The visualization, built with d3.treemap and d3.hierarchy, supports drill-down by clicking a country's cell to explore its commodity breakdown. A reset button restores the root view, and transitions animate changes when drilling down or resetting.

GGayan Priyadarshana

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

84% match