Zoomable treemap template

100%

Zoomable treemap template

✓ Published0🌍 Public

Last edited Aug 11, 2022

Created on Aug 10, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

86% match

Loading thumbnail…

Zoomable treemap template

This zoomable treemap template visualizes hierarchical agricultural data, organizing crops by category such as Plants, Vegetable, and Forage, with leaf size reflecting the numeric value for each plant. Users can click any cell to drill down into a sub-hierarchy, with animated transitions and a breadcrumb-style grandparent bar enabling navigation back up. Built with D3 v3, it uses the `d3.layout.treemap` for layout, `d3.scale.category20c` for color, and linear scales for positioning, rendering with SVG and CSS transitions. The data comes from a JSON file containing crop names, scientific names, and measured attributes.

MMariamArabi

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

80% match

Loading thumbnail…

Untitled

This zoomable treemap visualizes hierarchical data with interactive drill-down navigation. The chart renders rectangles sized by a primary measure, with a grandparent breadcrumb bar at the top for navigating back through levels. Hovering highlights child rects and displays a custom light-blue tooltip with additional metrics. The implementation uses `d3.hierarchy`, `d3.treemap`, and SVG animations, while the data is preprocessed through `d3.nest` to build the nested structure from flat records.

GGuillamon

80% match

Loading thumbnail…

Untitled

GGuillamon

80% match

Loading thumbnail…

Zoomable Treemap

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.

BBenHeubl

79% match

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

79% match