Exercise 2.1 (b)

100%

Exercise 2.1 (b)

✓ Published0🌍 Public

Last edited Jan 31, 2021

Created on Jan 31, 2021

Forked from Treemap layout (with labels)

This example compares five treemap layout algorithms by rendering the same hierarchical dataset with each one side by side. The page displays five separate SVG charts, one for each D3 layout mode: treemapBinary, treemapDice, treemapSlice, treemapSliceDice, and treemapSquarify. Each SVG uses d3.hierarchy and d3.treemap to compute node positions, with rectangles styled in dark blue and semi-transparent. The layout names appear above each chart, while leaf nodes show their data labels inside the colored rectangles.

AI-generated description

MIT Licensed

Similar vizzes

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

79% match

Loading thumbnail…

Treemap rect placing

Six panels display the same hierarchical dataset tiled with five different treemap layout algorithms—binary, dice, slice, slice-dice, and squarify—using the `d3.treemap` API. Each panel renders translucent steel-blue rectangles with white labels for node names. The code computes node sizes via `rootNode.sum((d) => d.size)` and positions descendants by `d.x0`/`d.y0` coordinates from the layout pass.

SSubhendu Karmakar

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…

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

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

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

76% match

Loading thumbnail…

Layout Test

This example demonstrates a hierarchical tree layout rendered as an SVG visualization, with data representing a page structure of components and partials. The tree uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal draws curved paths between parent and child nodes. The visualization supports pan and zoom through d3.zoom, with the zoom transform applied to a group element containing the rendered tree. A data store module supplies the hierarchical data, and the code includes a typo where circles are appended using the incorrect tag name instead of “circle.”

MMatt Morris

74% match

Loading thumbnail…

Treemap 4.0

This treemap visualization displays the hierarchical structure of the Flare dataset, with nested rectangles representing categories and leaf nodes sized by their numeric values. A dropdown menu lets users switch between five different treemap layout algorithms—Squarify, Slice, Dice, SliceDice, and Binary—which are implemented in the `d3_hierarchy` library. The code uses the `d3_hierarchy.treemap()` function from the D3 v4 alpha build, renders the result as SVG, and color-codes each top-level category using `d3.scaleCategory10()`.

663anp3ca

74% match