Skip to main content
SimilarExport ZIP
100%

TreeMapping

✓ Published0🌍 Public
KKamalabot
Last edited Jul 8, 2022
Created on Jul 8, 2022
Forked from Annotated Bar

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.

AI-generated description

A demonstration of how to start doing datavisualisation.

Work on the tutorials from Get it Black and White from Curran's new D3 videos.

We are doing only the basic SVG to begin with

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree Map

This tree map displays hierarchical data as nested rectangles sized proportionally to their values. The example renders an SVG graphic at 960 by 500 pixels, pulling in D3 v5 from a CDN. The code imports `select` and `arc` from the D3 library, though the visualization logic itself remains minimal in the shown files. The page references a separate stylesheet and JavaScript bundle, with the SVG container set up for the treemap layout. The map is generated using D3’s standard tree-map approach, though the actual data and layout calculations are not explicitly defined in the visible code.

Eedmond gihozo
83% 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
77% match
Loading thumbnail…

HTML Starter

This example demonstrates a basic treemap visualization using D3.js within an HTML page. It displays hierarchical data from a CSV file as nested rectangles, with each leaf node rendered as a colored square with a white text label. The code uses `d3.stratify()` to convert the flat CSV data into a hierarchy, `d3.treemap()` to compute the layout positions, and SVG `rect` and `text` elements for rendering. The rectangles are filled with a teal color and outlined in black, following the structure of the provided one-level dataset.

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

Fork of TreeMap Layout

This example displays a treemap visualization of hierarchical data using D3 v5’s `d3.hierarchy` and `d3.treemap` layouts. The SVG renders nested rectangles sized proportionally to node values, with labels for named leaves and empty labels for internal branches. The code manually constructs the dataset in `index.js`, sums values via `root.sum`, and applies layout properties like `paddingOuter`. Rectangles and text are appended into grouped `<g>` elements, with styling from `styles.css` using royal blue fills and white strokes.

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

Tree Map

A Tree Map visualization displays a hierarchical dataset of names using an expandable and collapsible tree diagram. The code uses D3.js version 3.5.17 with the `d3.layout.tree` for layout and `d3.svg.diagonal` for drawing curved links between nodes. Nodes are rendered as purple circles with labels, and clicking a node toggles its children to show or hide them. The visualization animates with 750ms transitions, updating node positions and link paths smoothly as the tree structure changes.

SSamanvitha1
75% match