Pseudo Treemap

100%

Pseudo Treemap

✓ Published1🌍 Public

Last edited Jun 27, 2026

Created on Jun 27, 2026

A pseudo treemap uses nested rectangles to represent a flat list of values, dividing the rectangular canvas into proportional areas. The static SVG visualization groups data into three color-coded segments, with all rectangles sharing either a vertical or horizontal split. The visualization uses plain SVG `rect` elements positioned and sized by hardcoded coordinates, without JavaScript or a layout library, to approximate a treemap's visual hierarchy.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Tree Map

A pseudo-tree map arranges nested rectangles in a grid-like hierarchy, using shades of blue to suggest depth and grouping. The largest blue square anchors the top-left, with progressively smaller squares and rectangles branching to the right and downward, mimicking a treemap’s structure without explicit parent-child edges. The example renders as static SVG rectangles with hardcoded positions and dimensions, styled with the Share Tech font for any text. It demonstrates a manual layout approach rather than an algorithmic one, relying on SVG’s rect elements to construct the visual metaphor.

Mmaciekawsq@gmail.com

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

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

75% match

Loading thumbnail…

TreeMapping

A static SVG treemap built with plain HTML and CSS, styled with large text and a red color palette. The visualization uses nested rectangles to represent hierarchical data, with layered `<rect>` elements manually positioned via absolute coordinates. Rendered entirely through declarative SVG markup rather than D3 data joins, it serves as a basic exercise in geometric composition and color coding. The code includes D3 v7 via CDN but does not invoke any D3 APIs.

KKamalabot

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

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

73% match

Loading thumbnail…

treemap

This example shows a treemap visualization of population data, with three vertical columns of stacked rectangles representing different data groupings. The chart uses React to render SVG rectangles, with D3’s `scaleBand` and `scaleLinear` computing x and y positions and heights. Data comes from the United Nations World Population Prospects 2019. Mouse interactions highlight individual rectangles by adding a pink stroke via DOM event listeners. The visualization also includes a manually placed gray rectangle spanning multiple columns.

RRenato Magalhães

73% match

Loading thumbnail…

Treemap layout (with labels)

A treemap layout visualizes a small hierarchical dataset, with nested rectangles representing the root node A1, its children B1 and B2, and the grandchildren C1, C2, and C3. Each rectangle is colored cadetblue, and labels show the node names. The example uses the `d3.treemap` layout with `d3.hierarchy` and `rootNode.sum` to compute sizes, then renders the result as SVG rectangles and text elements via data joins on `g` nodes.

Yyuva24

72% match