Skip to main content
SimilarExport ZIP
100%

treemap

✓ Published0🌍 Public
Vvaynexie
Last edited Jan 6, 2020
Created on Jan 6, 2020

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Untitled

This example displays a treemap visualization of hierarchical data, with the current view showing video game sales grouped by platform, or movie and Kickstarter data sets selectable via links at the top. It uses the d3 v4 API, specifically `d3.treemap()`, `d3.hierarchy()`, and `d3.scaleOrdinal` with the `schemeCategory20` color palette, to render the nested rectangles. The SVG output includes tooltips on mouseover, which display the name, category, and value of each tile using data attributes.

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
84% 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
84% match
Loading thumbnail…

TreeMap Layout

This example demonstrates a treemap layout using D3 v5, displaying hierarchical data as nested rectangles sized proportionally to their values. The visualization shows four labeled nodes—three leaf nodes (C1, C2, C3) with varying values beneath a parent node (B1), alongside a sibling node (B2)—all enclosed within root A1, with padding and gaps between groups. It uses `d3.hierarchy` to structure the data and `d3.treemap` to compute the layout, rendering rectangles and text as SVG elements. The treemap applies an outer padding of 16 pixels and scales to a 400×200 pixel area, with a static dataset defined in the code.

Ffloresh
83% match
Loading thumbnail…

Treemap in d3

This example demonstrates a treemap visualization of hierarchical data, with nested rectangles representing the A1, B1/B2, and C1/C2/C3 nodes. It uses d3.treemap to compute the layout based on summed values, with padding and a fixed size of 800 by 400 pixels. The d3.hierarchy API organizes the data structure, while descendants are rendered as SVG groups, rects, and text elements using d3.select and join. The visualization clearly shows proportional area encoding, with rectangles colored in semitransparent cadetblue and labeled for each node.

SSubhendu Karmakar
82% match
Loading thumbnail…

HW2 Treemap

This example shows a hierarchical treemap visualization where nested rectangles represent data values, with each rectangle’s area proportional to its value and text labels displaying the numeric data. The layout is generated using D3 v5’s `treemap` and `hierarchy` functions, which compute rectangle positions and sizes from a nested data structure. The SVG rendering applies a semi-transparent royal blue fill with white strokes to the rectangles, while white Helvetica text labels each node. The treemap layout is configured with a 900 by 400 pixel size and a 16-pixel outer padding, and the root’s values are summed using the `sum` method.

Mmryvin
82% match
Loading thumbnail…

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Hhanulik.ondrej@gmail.com
82% match