Fork of Basic Circle Pack

100%

Fork of Basic Circle Pack

✓ Published3🌍 Public

Last edited Jun 14, 2021

Created on Jun 14, 2021

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

Basic Circle Pack

A hierarchical circle-packing visualization displays nested data as clustered bubbles, with zooming and panning via mouse clicks. The demo uses D3.js v5 to construct the SVG layout, apply an HSL color scale by depth, and animate transitions between hierarchy levels using `transition` and `interpolateZoom`. Buttons add or remove data nodes, while the pack layout is generated with `d3.pack` and `d3.hierarchy`. The dataset is hardcoded from a “flare” file structure.

BBrett Cunningham

87% match

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

85% match

Loading thumbnail…

Fork of Project circularPacking

This example visualizes a hierarchical dataset of CERFACS researchers using a zoomable circular packing layout in D3. Clicking a non-root circle zooms into that node’s subtree, while clicking the background returns to the full view, with smooth animated transitions. It renders circles and text labels in SVG, using `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom`. The code also demonstrates ES6 module imports and loads data from a local JSON file.

YYiorgos Bagakis

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

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

83% match

Loading thumbnail…

Store constraining + zoomable pack circle

This zoomable circle packing visualization displays hierarchical data from altData.json using nested circles sized by leaf node values. The chart starts centered on the root node and animates through zoom transitions when clicking child circles, revealing deeper levels of the hierarchy. Built with D3 v5, the code uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to calculate layouts and smooth zooming, while transitions update circle radii and label visibility. The SVG rendering uses a color scale to distinguish depths, with click handlers enabling interactive navigation through the tree structure.

CCalvin Gomez

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

82% match