dynamic pack

100%

✓ Published0🌍 Public

Last edited Sep 30, 2019

Created on Sep 30, 2019

This interactive pack layout uses a circle-packing algorithm from D3 v4 to represent a hierarchical tree. Users can drag nodes to merge them, right-click on the canvas to add new nodes, or right-click on a node to delete it along with its descendants. The underlying `rData` tree object updates dynamically, and all changes are rendered as animated SVG elements. The implementation relies on custom `d3.drag` behaviors and the `d3.pack` layout.

AI-generated description

Drgging a node and move it to another one will merge those two nodes.
Right click on blank canvas will generate a new node.
Right click on a node will remove this node and it's descendents nodes if it contains children.
rData is hierarchy tree object and it will changed accrodingly with this pack tree.
拖拽一个节点并靠近另一个将会使得这两个节点融合；
右键单击空白区域产生新的节点；
右键单击节点将删除该节点及其包含的子节点；
rData 是一个树对象，其会随着节点的增加和减少而变化。

mit Licensed

Similar vizzes

Loading thumbnail…

Basic Circle Pack - Add or Remove Trees from the DOM

A circle-packing visualization displays a hierarchical dataset as nested circles, with buttons to add or remove data nodes from the DOM. Using D3 v5’s `d3.pack` layout and `d3.hierarchy`, the SVG renders each node’s size proportional to its value. Clicking a circle zooms via a tween that interpolates the view, while mouseover and mouseout events add or remove stroke outlines. The code uses D3 selections, transitions, and the `transition.tween` API for smooth animation.

BBrett Cunningham

80% match

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

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

79% match

Loading thumbnail…

Basic Circle Pack 2 - working

This example shows an interactive circle packing visualization of hierarchical data. Circles represent nodes in a tree, with nested circles indicating parent-child relationships, and clicking a circle zooms to expand that branch. The visualization uses d3.pack for layout and d3.hierarchy with sum and sort for data preparation. Add and remove buttons trigger rendering, each creating a new group of circles with different data. The code uses d3.scaleLinear with interpolateHcl for color encoding, d3.interpolateZoom for animated transitions, and SVG for rendering with click, mouseover, and mouseout event handlers.

BBrett Cunningham

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

Loading thumbnail…

Fork of Pack Layout

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.

DDing

78% match

Loading thumbnail…

Untitled

This interactive visualization displays a hierarchical tree as a circular packing layout, where nodes are sized proportionally to their values. The code uses the D3.js library (v6.7.0) with its `pack` and `hierarchy` APIs to compute node positions, and transitions to animate changes. Clicking a parent node collapses or expands its children, triggering a re-layout. The SVG renders nodes as circles with labels, and blue directed links with arrowheads connect specific nodes across the hierarchy, based on a `links` array in the data.

Mmiloparra

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

78% match