Skip to main content
SimilarExport ZIP
100%

Improved Circle Packing

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Sep 15, 2015

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.

AI-generated description

D3 4.0’s pack layout has been improved by computing the smallest enclosing circle for each node. Compare to D3 3.x’s implementation.

gpl-3.0 Licensed

Similar vizzes

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…

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
86% match
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
86% match
Loading thumbnail…

Circle Packing

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.

GGerHobbelt
86% match
Loading thumbnail…

Circle-Packing II

This visualization displays a hierarchical bubble chart of the Flare dataset, where each circle’s area encodes a numeric value and its color reflects the data’s grouping structure. Built with D3 v4, the chart uses `d3.pack` to compute non-overlapping circle positions within a fixed canvas, with each node labeled by its class name and tooltip showing the raw value. The SVG rendering applies a clip-path to each node so text remains contained within its circle, and hovering highlights the selected bubble.

Mmbostock
85% match
Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays the hierarchical structure of the Flare class library using nested circles, where each circle’s area encodes the size metric from the underlying flare.json dataset. Clicking any circle triggers a smooth zoom transition, bringing that node and its descendants into focus, while clicking again zooms back out. The visualization is built with D3 v4 and rendered as SVG, with hover effects highlighting nodes and labels that adjust dynamically as the hierarchy expands and collapses.

663anp3ca
85% 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…

Zoomable Circle Packing

Nested circles represent the hierarchical structure of the Flare visualization toolkit, with each circle’s area proportional to the underlying data value. Clicking a circle smoothly zooms the view to focus on that subtree, while the background color shifts and labels fade in and out during the animated transition. The visualization uses D3 v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to calculate circle positions and drive the zoom animation, rendering the hierarchy as SVG circles and text elements. Data comes from the bundled `flare.json` file.

Mmbostock
84% match