Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 v5 Circle-Packing

Public visualization

Viewing a saved revision (read-only)

50001cc99e23471686a1e7b5f43f7544

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