Skip to main content
SimilarExport ZIP
100%

Circle Packing

✓ Published0🌍 Public
CCalvin Gomez
Last edited May 18, 2020
Created on May 18, 2020
Forked from Blank Canvas

This example visualizes hierarchical data as nested circles using a circle packing layout. The circles, sized by each node’s `value` and sorted by descending value, are filled with colors from the magma sequential scale. The chart uses the `d3.pack` and `d3.hierarchy` APIs to compute the layout, while `d3.scaleSequential` and `d3.interpolateMagma` handle color mapping. Rendered as SVG in a full-screen viewport, the code imports all required functions from the d3 library and applies a fixed 3-pixel padding between circles.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Circle Packing

This visualization displays a hierarchical dataset as nested circles, using area to represent the number of descendants in each node. Color distinguishes between constrained and unconstrained nodes, with constrained items shown in gray and unconstrained ones in blue. The layout is computed using D3’s `pack` algorithm, which positions circles within a viewport sized to the browser window. Data is loaded from `data.json` via D3’s `json` function, then processed with `hierarchy` and rendered as SVG `<circle>` elements, with white strokes providing visual separation between adjacent circles.

CCalvin Gomez
87% 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
87% match
Loading thumbnail…

D3 v5 Circle-Packing

This example implements a circle-packing visualization using D3 v5, displaying a hierarchical dataset from the Flare library. The diagram shows a nested arrangement of circles, where each circle represents a data node, with its size proportional to a value and color indicating depth in the hierarchy. Built with D3’s `d3.stratify` and `d3.pack` APIs, it renders to SVG, applying a sequential magma color scale. Interactive mouseover highlights ancestor nodes, while leaf labels are clipped via `clipPath`, and tooltips show the node ID and value.

JJaloYang
85% match
Loading thumbnail…

D3 v5 Circle-Packing

This visualization shows a hierarchical dataset as nested circles, with each circle’s size encoding a numeric value and its color representing depth in the tree. Built with D3 v5 and rendered as SVG, it uses `d3.stratify` to convert the tabular flare.csv data into a hierarchy, `d3.pack` for layout, and `d3.scaleSequential` with `d3.interpolateMagma` for coloring. Hovering highlights a node and its ancestors via the `mouseover` and `mouseout` events.

DDylan
84% match
Loading thumbnail…

Hierarchical Circles

This example shows a hierarchical circle packing layout for a small dataset with two leaf nodes, "a" and "b", rendered as nested circles. The visualization colors leaf circles using a categorical color scale and provides customizable legends for both color and size. The code uses the D3 `hierarchy` and `pack` layout functions to compute circle positions, while custom legend components (colorLegend and sizeLegend) display the ordinal color mapping and a square-root size scale. The rendering is an SVG generated by D3 v5.

Aantoniojl-kemaro
83% match
Loading thumbnail…

D3 v5 Circle Packing from Observable

This example visualizes a hierarchical dataset from the Observable `@observablehq/flare` library using circle packing. It displays the data as nested circles, where each circle's area encodes a value and color encodes the depth in the hierarchy. The visualization is rendered as an SVG, using D3 v5's `d3.hierarchy` and `d3.pack` layout, with a sequential magma color scale via `d3.scaleSequential`. Hovering reveals a tooltip with the full path and value, generated through SVG `title` elements.

Ttasqon
83% 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
82% 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
82% match