Skip to main content
SimilarExport ZIP
100%

Partition layout

✓ Published0🌍 Public
XXin Li
Last edited Apr 26, 2021
Created on Mar 25, 2021
Forked from Untitled

This example demonstrates a partition layout using D3.js, displaying hierarchical data as nested rectangles that encode data values through their areas. The visualization uses a static hierarchical dataset with named nodes (A1, B1, C1, etc.) and numeric sizes. The code creates the layout with `d3.partition()`, sizes it to 400×200 pixels, and applies hierarchy through `d3.hierarchy` with a `sum` accessor. Rectangles are rendered as SVG elements with opacity and white strokes, and their positions and dimensions are computed from the layout’s `x0`, `y0`, `x1`, and `y1` values.

AI-generated description

Simple example using d3 flame graph plugin: https://github.com/spiermar/d3-flame-graph

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Partition Layouts

This example demonstrates a hierarchical partition layout, representing the tree data with nested rectangles that are sized according to the sum of their descendant values. The visualization uses the `d3.partition` layout on a `d3.hierarchy` computed from a static JavaScript object, drawing the resulting rectangles and text labels as SVG elements. The code relies on D3 v3’s `d3.select` and the `.join` operator to efficiently update the SVG canvas, with the root node’s sum calculated via `rootNode.sum`.

SSubhendu Karmakar
87% match
Loading thumbnail…

Partition Layout

This visualization shows a hierarchical dataset as a radial partition layout, or sunburst diagram, where each arc segment represents a node’s proportional value. Using D3 v5, the code constructs the layout with `d3.hierarchy`, `d3.partition`, and `d3.arc`, rendering SVG paths. The data is embedded directly in `index.js` rather than read from `data.csv`, with arcs styled via the `styles.css` file.

Ffloresh
83% match
Loading thumbnail…

D3 Sunbrust graph

This example displays a hierarchical dataset as a static partition layout, using rectangles to represent nodes and their cumulative values. The visualization shows a root node 'A1' branching into 'B1' with children 'C1', 'C2', and 'C3', alongside a leaf 'B2'. It employs the d3.partition layout and d3.hierarchy API to compute rectangular coordinates, then renders the result as SVG rectangles and text labels. Each rectangle is filled with a dark, semi-transparent color and outlined in white, with node names positioned inside each cell.

SSubhendu Karmakar
80% 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
76% match
Loading thumbnail…

Partition - Icicle

This icicle diagram visualizes a hierarchical dataset as nested rectangles, where each node’s area is proportional to its numeric value, revealing the distribution of categories and subcategories. Built with D3.js v3, it uses `d3.layout.partition` to compute the layout from a JSON file (`flare.json`) and renders the result as SVG rectangles and rotated text labels. The root node is colored by category using `d3.scale.category20()`. The view is static, with no interaction or zooming.

Mmbostock
76% match
Loading thumbnail…

Fork of D3 Pack Layouts

This example shows a hierarchical dataset with nested nodes (A1, B1, C1–C3, B2) displayed as a circle-packing layout, where each node’s bubble size reflects its numeric value. The code uses D3’s `d3.pack()` and `d3.hierarchy()` to compute the layout, with `rootNode.sum()` summing child values for sizing. An SVG canvas is created and sized to the container, and descendant nodes are selected for rendering. The visualization relies on D3 7.8.5 and the `index.js` module exports a `main` function that drives the layout generation and SVG setup.

RRustamova Malakkhanim
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
74% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a treemap visualization that recursively partitions a rectangular canvas into nested rectangles, with each leaf node sized proportionally to its value. The code builds the layout manually using D3’s `scaleLinear` for area allocation and `scaleOrdinal` with the `schemeCategory10` color palette. It also computes text dimensions with a custom `visualWidth` helper and uses CSS-based font-family detection for cross-system compatibility. The data is loaded from a local JSON file and rendered as SVG rectangles and text labels.

HhelloHailey-sketch
74% match