Zoomable Treemap

100%

Zoomable Treemap

✓ Published0🌍 Public

Last edited Jun 1, 2015

Created on Jun 1, 2015

This zoomable treemap visualizes global mortality data by cause, using nested rectangles whose areas encode death tolls. Users can click any rectangle to drill into subcategories—from broad causes like famine or natural disasters down to individual events. Built with D3 v2, the visualization reads a CSV, nests it hierarchically, and animates smooth zoom transitions between levels. The color and size of each tile encode the hierarchical data structure and relative magnitude of deaths.

AI-generated description

Similar vizzes

Loading thumbnail…

Zoomable Treemap

This zoomable treemap visualizes global cause-of-death data, using a CSV dataset that records death counts across four nested levels: broad cause, subcause, and specific disease. Built with D3 v2 and rendered as SVG, the treemap encodes hierarchy and quantity through rectangular area and color. Users can click to zoom between levels, and the visualization animates smoothly during transitions. The root node aggregates over 800 million deaths, with branches for Disease, Non-communicable, health complications, and Cancer, allowing exploration from global causes down to individual conditions. The example uses a custom data-reshaping function to transform the CSV into the nested structure the treemap layout requires, and includes CSS styling for interactive hover states and text labels.

BBenHeubl

94% match

Loading thumbnail…

Zoomable Treemap

A zoomable treemap displays a hierarchical dataset as nested rectangles, with area encoding each node’s value. Users click a cell to zoom in and explore its children, or click the top to zoom back out. Built with d3.treemap, a custom tiling function, and d3.scaleLinear for positioning. Zoom transitions animate both SVG groups and their coordinates. Data comes from the flare-2.json file, rendered as animated SVG with click-driven navigation.

VVickoh

80% match

Loading thumbnail…

Zoomable treemap template

Built with D3.js v3 and jQuery, this interactive visualization presents education resource data as a zoomable treemap. The code uses `d3.layout.treemap` to hierarchically arrange rectangles by value, colored via `d3.scale.category20c`, with click-to-transition zooming between parent and child nodes. Data is loaded from a JSON array of entries containing subject, region, subregion, and count values, which the treemap aggregates and lays out recursively. The SVG renders responsive rectangles and a grandparent breadcrumb header, demonstrating a reusable template for hierarchical exploration.

Aabhineetsingh10

79% match

Loading thumbnail…

1900-2000: Infographic with the Century's Deaths

This interactive treemap infographic visualizes global deaths across the 20th century, using nested hierarchical groupings by cause, subcause, and specific event. Built with D3 v2 and rendered as SVG, the visualization animates the proportional scale of mortality from famines, natural disasters, and extreme weather events, with each rectangle sized by reported death toll. The treemap layout encodes the data hierarchically—starting with broad causes, then subcauses, and finally individual recorded events—allowing viewers to compare the relative magnitude of different tragedies, from the 30 million deaths in China’s 1958-62 famine to smaller disasters. The animation and interactive structure support exploration of how these catastrophic events accumulate across the century.

BBenHeubl

78% match

Loading thumbnail…

Zoomable treemap template

This zoomable treemap displays hierarchical data through nested rectangles sized by value, allowing drill-down navigation to explore subregions. It visualizes Indian education statistics from a JSON file, grouping entries by region and subregion. The example uses d3.v3 with the d3.layout.treemap API and SVG rendering, implementing custom recursive layout and accumulate functions. Click transitions animate zooming between hierarchy levels, with an orange breadcrumb bar showing the current path and enabling navigation back to parent nodes.

Aabhineetsingh10

78% match

Loading thumbnail…

Zoomable Treemap

This zoomable treemap visualizes UK Home Office flight data from 2011, showing hierarchical relationships between destinations, suppliers, and ticket classes. Built with D3 v2 and rendered as an SVG with smooth zoom animations, the treemap uses nested rectangles sized by paid fare amounts, with color encoding categories. Users can click to zoom between hierarchy levels. The data is loaded from a CSV and transformed using d3.nest, while the custom layout function optimizes the treemap for the current zoom state, enabling fluid transitions as users navigate the data.

CCBasis

77% match

Loading thumbnail…

1900-2000: Infographic with the Century's Deaths

This interactive treemap visualizes mortality data from the 20th century, sourced from David McCandless’s public data collection. Built with D3.js and rendered as an SVG with animations, the visualization encodes death tolls through rectangular area, allowing viewers to compare the scale of deaths across causes such as famines, natural disasters, and extreme weather events. The data is hierarchically organized by cause and subcause, and hovering or interacting with the rectangles reveals specific events and estimated casualties. The treemap provides a stark, at-a-glance perspective on the century’s human cost, highlighting the enormous impact of famine—particularly in China, the Soviet Union, and India—while contextualizing these figures against deaths from earthquakes and extreme weather. The animation helps guide the viewer through the hierarchy, making the comparative scale of each disaster immediately visible.

BBenHeubl

76% match

Loading thumbnail…

Untitled

This visualization displays the global distribution of COVID-19 deaths by country, using a Mercator-projected world map with a threshold color scale to differentiate mortality levels. A tooltip reveals the country name and total death count on hover. The map is rendered with D3 v4, using `d3.geoPath` and `d3.geoMercator` for geographic projection, while loading country geometries from a TopoJSON file and death data from a TSV file. Zooming is enabled via `d3.zoom`.

MMizanur55

76% match