Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Circle-Packing

Public visualization

Viewing a saved revision (read-only)

1d60728fd83e446590e4efba76dd7c12

D3 v5 Circle-Packing

2 stars7🌍 Public
Ttasqon
Last edited Feb 5, 2019
Created on Feb 4, 2019

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`.

AI-generated description

Mike Bostock's Circle-Packing example