Fork of Pack Layout

100%

Fork of Pack Layout

✓ Published0🌍 Public

Last edited Dec 31, 2022

Created on Dec 31, 2022

This example visualizes a hierarchical dataset using D3’s pack layout, rendering circles for nodes and text labels for leaf values. The code builds a tree from an inline JavaScript object, sums leaf values with `root.sum()`, and applies a `d3.pack()` layout with a 300×300 size and 10-pixel padding. Each descendant is drawn as an `indianred` circle with white strokes and centered text, positioned via `transform` attributes. The SVG canvas is 960×500 units, and styling comes from an external CSS file.

AI-generated description

d3indepth.com/layouts/ Pack Layout

MIT Licensed

Similar vizzes

Loading thumbnail…

Pack Layout

This example demonstrates a circular pack layout for hierarchical data using d3.pack, showing nested circles that represent parent and child nodes with sizes proportional to their values. A small dataset with three levels of hierarchy is rendered as SVG circles with semi-transparent indianred fills, white strokes, and text labels only on leaf nodes. The code uses d3.hierarchy and the pack layout to compute positions and radii, then appends transformed groups for each descendant.

Ffloresh

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

88% match

Loading thumbnail…

D3 Pack Layouts

This example demonstrates a D3 pack layout, which visualizes hierarchical data as nested circles. The dataset defines a tree with a root node, two levels of children, and leaf nodes that carry numeric values. Using `d3.hierarchy` and `d3.pack`, the code computes circle positions and radii so that parent circles encompass their children proportionally to summed values. The visualization renders each node as a semi-transparent circle with a white stroke, and labels only the leaf nodes. The SVG is dynamically sized to fit the container, and nodes are positioned via CSS transform translations.

SSubhendu Karmakar

87% match

Loading thumbnail…

Fork of Basic Circle Pack

A fork of the basic circle pack example demonstrates hierarchical data visualization using d3.pack, where circles represent nested nodes and are colored by depth using a linear scale. The view animates between zoom levels via d3.interpolateZoom, triggered by clicking circles or the background. Buttons allow adding and removing data, though the specific data mutation logic is not shown. The visualization renders in SVG with smooth transitions, and labels appear only for the current focus node's children.

554x1

84% match

Loading thumbnail…

Exercise 4(c)

This example shows a circle-packing visualization of a hierarchical dataset, where the size of each circle represents the summed value of its leaf nodes. The code uses `d3.pack()` with a padding of 20 to create non-overlapping circles within a 300x300 area, rendering them as red, semi-transparent SVG circles with white strokes. Leaf nodes display their names as centered white text, while parent nodes remain unlabeled. The data is a hardcoded JSON object with nested children, and the layout is computed by calling `rootNode.sum()` and `packLayout(rootNode)`.

Yyuva24

83% match

Loading thumbnail…

Circle-Packing

This example visualizes a hierarchical dataset as a circle-packing layout, where each leaf node is a circle sized by its value and nested groups are represented by larger containing circles. It shows the structure of a module tree from a CSV file, with color indicating depth and text labels clipped to leaf circles. The code uses `d3.stratify` to build the hierarchy from flat data, `d3.pack` for layout, and `d3.scaleSequential` with the `interpolateMagma` color scheme. Hovering highlights a node and all its ancestors via `d3.selectAll` with the `node--hover` class, rendered as SVG elements in a `<g>` container.

HHugoberry

80% match

Loading thumbnail…

Fork of Tree

This example visualizes a hierarchical dataset as a tree diagram, with nodes represented as red-stroked circles and connecting links drawn as paths. The tree layout is computed using `d3.stratify` and `d3.tree`, and the SVG rendering animates the paths and circles on load. Node labels fade in with delays based on depth, using D3 transitions. The data is hardcoded as an array of parent-child pairs, and the visualization is built with D3 v6 in a plain HTML page.

AArv1228

80% match

Loading thumbnail…

Layout

This example shows an interactive circular packing diagram where each circle represents a node in a hierarchical dataset, with leaf nodes as white circles and parent nodes colored by depth. Clicking a circle zooms to focus on that subtree, smoothly transitioning the view. Built with D3 v4, it uses the `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the data from a local `flare.json` file. The visualization is rendered as SVG, with hover highlighting on nodes and a zoom transition that repositions and rescales circles and labels via the `transition` API.

AAkriti97

79% match