Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Circle-Packing

Public visualization

D3 v5 Circle-Packing

0 stars1🌍 Public
JJaloYang
Last edited Mar 7, 2020
Created on Mar 7, 2020

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.

AI-generated description

Mike Bostock's Circle-Packing example

Comments

Sign in to join the discussion.

MIT Licensed