Skip to main content
SimilarExport ZIP
100%

D3 v5 Circle Packing from Observable

✓ Published3🌍 Public
Ttasqon
Last edited Feb 12, 2019
Created on Feb 5, 2019

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.

AI-generated description

Mike Bostock's Circle-Packing example

<br></br> Ported from this Observable notebook for this forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on blockbuilder.org

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 v5 Circle Packing from Observable

This example shows a circle packing visualization of the Flare software package hierarchy, with nested circles representing the hierarchical structure and size of each node. The visualization uses a sequential color scale with the interpolateMagma colormap to encode depth, and each leaf node displays its name text clipped to the circle boundary. The code is built with D3 v5 and uses the d3.pack, d3.hierarchy, and d3.scaleSequential APIs, loading data from the @observablehq/flare module. Circles are rendered as SVG circles, with hover states and tooltips showing the full ancestor path and value.

Kkeitheade
92% 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
89% 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
88% match
Loading thumbnail…

Import from observable (was: circle pack example)

This example visualizes a hierarchical dataset as a circle packing diagram, where each leaf node’s area encodes its value and color encodes depth. It imports the flare dataset via Observable’s `require` API, then uses D3 v5’s `d3.pack` layout and `d3.hierarchy` to compute circle positions, with `d3.scaleSequential` and `d3.interpolateMagma` coloring circles by tree depth. The SVG rendering appends circles and clipped text labels for leaves, and tooltips show the full ancestor path and value via `d3.select` and `append("title")`. The code also uses Observable’s `DOM.uid` for unique IDs and `d3.format` for number display.

PPhilippe Rivière
87% match
Loading thumbnail…

D3 v5 Circle-Packing

This circle-packing diagram visualizes the hierarchical structure of the Flare dataset, with nested circles representing categories and subcategories. Circle size encodes the summed value of each node. The visualization uses D3 v5’s `d3.stratify` and `d3.pack` to compute the layout, and `d3.scaleSequential` with `d3.interpolateMagma` to color circles by depth. Hovering highlights a node’s ancestors using the `d3.selectAll` and class toggling. SVG renders all elements, with leaf labels clipped via `clipPath`.

Ttasqon
86% match
Loading thumbnail…

D3 v5 Circle-Packing

This visualization uses a circle-packing layout to display the hierarchical structure of the Flare software project’s classes and packages, with circle size encoding the value of each node. The example is implemented with D3 v5 and renders as SVG, using `d3.stratify` to build the hierarchy from a CSV file and `d3.pack` to compute the nested circle positions. Circle colors are mapped by depth using a sequential magma scale, and interactive mouseover highlighting is applied through class toggling.

Ppuinnovative
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…

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