Skip to main content
SimilarExport ZIP
100%

Circle-Packing

✓ Published0🌍 Public
Mmbostock
Last edited Mar 7, 2019
Created on Mar 22, 2016

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.

AI-generated description
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
93% 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
93% 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
92% 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
91% match
Loading thumbnail…

pack layout

This visualization uses a packed circle layout to display the hierarchical structure of the Flare codebase. Each circle represents a node in the tree, with circle size encoding the node's numeric value and color mapping to depth in the hierarchy. The visualization is built using D3 v4, leveraging the `d3.stratify` and `d3.pack` APIs. The data comes from a CSV file containing file IDs and values, and interactive hover highlighting is implemented via SVG elements and mouse events.

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

Fork of D3 v5 Circle-Packing Testing

This visualization shows a circle-packing layout of the Flare software package’s class hierarchy, using nested circles to represent the data’s hierarchical structure. The code loads data from `flare.csv` with `d3.csv`, processes it with `d3.stratify`, and computes the layout using `d3.pack`. Circles are colored by depth using `d3.scaleSequential` with the magma interpolator, and the visualization is rendered as SVG. Hovering highlights a node’s ancestors by toggling a `node--hover` class.

EEric Zimmerman
89% match