100%

Circle Packing

✓ Published0🌍 Public

Last edited Sep 11, 2012

Created on Sep 11, 2012

A circle packing visualization displays a hierarchy of data points as nested circles, using the D3 `d3.layout.pack` layout. The code masks a background image with the circular layout, while leaf nodes are rendered as circular-clipped silhouette images using SVG `clipPath` and `mask` elements. The visualization uses D3 v2 and reads hierarchical JSON data from a `flare.json` file. It renders as SVG, with circles styled by depth and each leaf node containing an image clipped to its circular boundary.

AI-generated description

Experiment …… <a href="http://bl.ocks.org/3696645" title="view this gist via bl.ocks.org">∆</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">∞</a>

==========================================================================

A little alternative way to use the SVG <image> object and D3:

D3 code creates a layout-based mask, where each node is a circle + circle-clipped 'silhouette' image, which is, of course, included in the generated mask.

WARNING: clip-mask applied to elements inside a SVG mask don't work in Safari/Win; Chrome works okay, so this result is best viewed in bleeding edge Chrome.

Similar vizzes

Loading thumbnail…

Circle Packing

This example visualizes the Flare class hierarchy as an enclosure diagram, using nested circles to represent the structure and size of each node. The visualization uses a circle-packing layout, where each circle’s area is proportional to the numeric value of its corresponding data item, and parent circles enclose their children to reveal the hierarchy. The implementation relies on `d3.pack()` for layout, `d3.hierarchy()` for data aggregation, and renders the result as an SVG with styled circles and labels. The color scheme distinguishes leaf nodes as orange with full opacity, while non-leaf circles are blue and semi-transparent.

Mmbostock

88% match

Loading thumbnail…

Circle-Packing II

A circle-packing visualization displays the hierarchical structure of the Flare dataset, with each node represented as a circle whose size encodes a numeric value. The code uses D3 v4's `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the CSV data. SVG elements are generated manually, with circle nodes, clip-paths for text labels that split on capital letters, and tooltips showing full paths and formatted values via `d3.format`.

663anp3ca

87% match

Loading thumbnail…

Improved Circle Packing

This visualization uses D3 4.0’s improved circle-packing layout, which computes the smallest enclosing circle for each node to fit circles more tightly than earlier versions. The example displays the hierarchical Flare JSON dataset, with circle size proportional to leaf values and color distinguishing top-level branches. It renders directly to a Canvas element via the d3 pack layout, avoiding SVG’s DOM overhead. The code also includes a bundled d3-xhr library for asynchronous data fetching.

Mmbostock

86% match

Loading thumbnail…

Circle-Packing

This example visualizes the hierarchical structure of the Flare dataset using circle packing. Each node is represented as a circle, with leaf nodes sized by their value and grouped by their parent categories. The visualization uses D3 v4’s `d3.stratify` to build a hierarchy from the CSV and `d3.pack` to compute the circular layout. SVG circles are colored with a sequential magma scale based on depth, and hovering highlights the ancestors of a node via a CSS class and the `d3.selectAll` method.

Mmbostock

85% match

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

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

84% match

Loading thumbnail…

D3 v4 Circle-Packing

This example shows a hierarchical circle-packing layout of the Flare software package’s class hierarchy, with each node’s size proportional to its value and color mapped to depth. Using D3 v4’s `d3.stratify` to build the hierarchy from CSV data and `d3.pack` for layout, circles are rendered as SVG groups. Interactivity highlights all ancestor circles on hover via the `d3.selectAll` and `classed` methods, while leaf labels are clipped to their circles.

Ttasqon

84% match

Loading thumbnail…

Trying circle packing VI

This circle packing diagram visualizes the hierarchical structure of the Flare dataset, with nested circles representing the data hierarchy and color encoding depth via d3.scaleSequential with interpolateMagma. The visualization uses d3.pack, d3.hierarchy, and d3.format to compute and display node values, while the Observable stdlib's DOM.uid generates unique identifiers for clipping paths that constrain text labels to leaf circles. The SVG rendering includes interactive tooltips showing ancestor paths and values, with the code loaded from @observablehq/flare via require().

CCelebrinu

84% match