Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Trying circle packing VI

Public visualization

Viewing a saved revision (read-only)

8c770ed3ea7e4cd6baa163de76861e45

Trying circle packing VI

0 stars0🌍 Public
CCelebrinu
Last edited Aug 9, 2022
Created on Aug 9, 2022

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().

AI-generated description

Mike Bostock's Circle-Packing example

  • with D3 v5 (based on the changes in v5) <br></br> Ported from this Observable notebook for this forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on blockbuilder.org