Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Basic Circle Pack 2 - working

Public visualization

Viewing a saved revision (read-only)

6cce49cbecea4839a8200654de5ee89f

Basic Circle Pack 2 - working

0 stars0🌍 Public
BBrett Cunningham
Last edited Nov 19, 2019
Created on Nov 19, 2019
Forked from Basic Circle Pack

This example shows an interactive circle packing visualization of hierarchical data. Circles represent nodes in a tree, with nested circles indicating parent-child relationships, and clicking a circle zooms to expand that branch. The visualization uses d3.pack for layout and d3.hierarchy with sum and sort for data preparation. Add and remove buttons trigger rendering, each creating a new group of circles with different data. The code uses d3.scaleLinear with interpolateHcl for color encoding, d3.interpolateZoom for animated transitions, and SVG for rendering with click, mouseover, and mouseout event handlers.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.