Circle-Packing

100%

Circle-Packing

✓ Published0🌍 Public

Last edited May 16, 2017

Created on May 16, 2017

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.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/ca5b03a33affa4160321'>Circle-Packing</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

87% match

Loading thumbnail…

Circle Packing

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.

CCalvin Gomez

87% match

Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This example demonstrates a circle packing visualization that encodes hierarchical data as nested circles, where the area of each circle represents a numeric size value. The visualization shows a dataset of car acquisition and trading history, with parent-child relationships defined by the CSV structure. The implementation uses d3.v4's `d3.stratify` to process the tabular data, `d3.hierarchy` with a size summation function to compute the tree structure, and `d3.pack` to generate the circle layout. Circles are rendered as SVG elements with white strokes and semi-transparent blue fills.

Oocean1225

86% match

Loading thumbnail…

Circle-Packing II

This example visualizes a flat dataset of names and values using a circle-packing layout, where each person’s name appears as a separate circle. The visualization shows the hierarchical structure of the data through nested circles, with each circle’s size proportional to its value, though all values are equal here. The code uses the d3.pack layout to compute circle positions and radii, then appends SVG circles and text labels with clip paths to keep text within the circles. Data is loaded from a CSV file via d3.csv, and the hierarchy is built with d3.hierarchy and .sum().

CCBasis

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

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

86% match