Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Zoomable packing celeb

Public visualization

Viewing a saved revision (read-only)

c5404d227c094448b300d8bb60b6a423

Zoomable packing celeb

0 stars1🌍 Public
0007ebey
Last edited Sep 2, 2020
Created on Aug 27, 2020
Forked from Zoomable test 2

This zoomable circle-packing visualization displays celebrity samples grouped by industry (Hollywood or Bollywood) and gender, with circle size reflecting sample count. The React-based app loads `celeb.csv`, nests data using `d3.nest`, and renders an SVG hierarchy with `d3.pack` and `d3.hierarchy`. Clicking any circle smoothly zooms via `d3.interpolateZoom` and `transition.attrTween`, scaling radii and repositioning nodes. Leaf nodes display celebrity photos as clipped images with offsets, while parent labels shift dynamically. Colors use `scaleSequential` with `interpolateMagma`, and the layout updates through `componentDidUpdate` in the React class component.

AI-generated description

React Starter code.