Treemap

100%

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This interactive treemap visualizes the hierarchical structure of a JSON dataset with nested values. It uses D3.js to render nested rectangles, with each cell colored by category via `d3.scale.category20c`. Clicking a cell triggers a smooth animated transition that expands the selected branch, revealing its children with adjusted positions and sizes. The visualization employs `d3.layout.treemap` for layout calculations and uses JSON data loaded via `d3.json`.

AI-generated description

forked from <a href='http://bl.ocks.org/mundhradevang/'>mundhradevang</a>'s block: <a href='http://bl.ocks.org/mundhradevang/948964'>treemap with mouse interactivity</a>

forked from <a href='http://bl.ocks.org/linnnes/'>linnnes</a>'s block: <a href='http://bl.ocks.org/linnnes/37db5abfe98757f14e182343e1dc5cdc'>treemap with mouse interactivity</a>

mit Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes hierarchical data, such as the flare.json dataset, using nested rectangles to represent size values, with an option to re-sort by count. It shows an interactive animation that smoothly transitions between these two aggregation modes. Built with D3.js v4, the code uses `d3.treemap`, `d3.treemapResquarify`, and `d3.hierarchy` to process data, while SVG rendering and `d3.transition()` handle the animated updates. The example also includes a color scale from `d3.schemeCategory20` for visual distinction.

MManoukK

80% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualization displays the hierarchical structure of the flare.json dataset, with nested rectangles sized by either node size or leaf count. The interactive chart allows toggling between these two aggregation modes via radio buttons, triggering a smooth animated transition. Built with D3 v4, the visualization uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` for coloring, rendering SVG cells with clipped text labels and tooltips.

Bbootshine2

80% match

Loading thumbnail…

Treemap navigator II (dbpedia)

An interactive treemap navigator visualizes the DBpedia ontology, showing hierarchical categories as colored rectangles. Users can drag subtrees to reposition them, click nodes to explode open subtrees, and click again to collapse them, with links connecting parent and child subtrees. The visualization uses D3 v3 layout, drag, zoom, and transition APIs, rendering SVG paths and rectangles with section-specific colors. Data loads from a remote JSON file describing the ontology structure, and the coordinate-based treemap layout is recalculated on each interaction.

TThanaporn-sk

80% match

Loading thumbnail…

TreeMap

This example visualizes a hierarchical dataset as a treemap, using rectangles sized by each node’s `degree` value and colored by its `domain` attribute to reveal the relative prominence of categories. Built with D3 v3, the code loads hierarchical JSON data and applies the `d3.layout.treemap` layout with custom padding. Node labels and background colors are assigned via D3 selections, with positions and dimensions computed by the layout and applied through inline styling. The visualization provides a compact overview of the dataset’s nested structure and degree distribution.

LLauraCortes

80% match

Loading thumbnail…

Treemap2

A hierarchical treemap displays plant nutrient data, using colored rectangles to represent crop categories and individual species. Clicking a cell zooms into that branch, while the orange top label navigates back. The visualization uses the d3.v3 treemap layout with a custom recursive layout and accumulation function for zooming. Data is loaded from a CSV file via d3.csv, and transitions animate the zooming interaction.

MMariamArabi

79% match

Loading thumbnail…

Treemap Example

This treemap visualizes the hierarchical flare dataset, showing relative leaf-node values as nested rectangles colored by their top-level parent category. Built with D3 v6 and rendered as SVG, the example implements a custom treemap layout algorithm via recursive space partitioning that alternates between horizontal and vertical splits. The code uses d3.scaleLinear for proportional sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and calculates text visibility based on rectangle dimensions. Data is loaded from a JSON file and displayed with interactive hover effects absent, focusing purely on static hierarchical encoding.

HhelloHailey-sketch

79% match

Loading thumbnail…

visualization9d3

A D3.js treemap displays hierarchical data as nested rectangular nodes, sized proportionally to each value. The visualization shows five course categories with descending values, using a spectral color scale for differentiation. The code embeds a static dataset directly and builds the hierarchy using `d3.hierarchy` with a sum accessor, then applies `d3.treemap` to compute the layout. Each leaf node renders as a positioned `div` element, with dimensions derived from the treemap’s computed coordinates and colors assigned via `d3.interpolateSpectral`.

GGanesh Gundekarla

78% match