Skip to main content
SimilarExport ZIP
100%

Zoomable packing celeb

✓ Published1🌍 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Zoomable packing celeb

This interactive zoomable packing visualization displays celebrity samples grouped by category and gender, with each circle sized proportionally to the sample count. Users can click circles to zoom between hierarchy levels through smooth transition animations. The visualization is built with React and D3 v5, using the `d3.pack` layout on hierarchically nested CSV data, while `d3.scaleOrdinal` and `d3.scaleSequential` with the magma interpolator handle color encoding. Celebrity images are placed within clipped circles, positioned using each record's offset value, with zoom transitions driven by `d3.interpolateZoom` and `transition.attrTween`.

MManies Raj
93% match
Loading thumbnail…

Zoomable test 2

This interactive visualization displays a zoomable circular treemap of celebrities, organized by industry category (Hollywood, Bollywood) and gender. The hierarchy is constructed from a CSV file using `d3.csv` and `d3.nest`, with circles sized according to the `sample` metric. Rendered as SVG with React, the pack layout uses `d3.pack` and `d3.hierarchy` to position the circles. Users click circles to zoom, which triggers a smooth animated transition using `transition.tween` with `d3.interpolateZoom`. Leaf nodes include celebrity profile images clipped within their circles, with offsets applied to center faces.

0007ebey
90% match
Loading thumbnail…

Zoomable test 1

This interactive visualization displays a hierarchically organized bubble chart of celebrities grouped by category and gender. Clicking any circle zooms into that node's subtree with a smooth animated transition. Built with React and D3 v5, it uses the `d3.pack` layout to position circles and `hierarchy().sum()` to encode the `sample` data value as bubble area. Celebrity portraits are clipped into circular frames using SVG `clipPath` elements, with zoom animations driven by `d3.interpolateZoom` and `transition.attrTween`.

0007ebey
87% match
Loading thumbnail…

Circles pack

A circle packing diagram displays a hierarchical dataset of celebrities, grouped first by category (Bollywood or TV) and then by gender, with each celebrity represented as a circle sized by their sample value. The visualization uses a `d3.pack` layout on a React component, computing a hierarchy via `d3.hierarchy` and `d3.nest` from a CSV file. Leaf nodes render celebrity photos clipped by their circle boundaries, while branch circles scale with the aggregate values and respond to mouseover events with a stroke highlight. The color scale uses `d3.scaleSequential` with the `interpolateMagma` scheme.

0007ebey
84% match
Loading thumbnail…

React Starter PAck backup 3

This interactive treemap visualizes celebrity data using bubble packing, where each circle represents a celebrity with size proportional to their sample value. The visualization, built with React and D3 v5, uses a hierarchical layout that groups celebrities by category and gender, with color encoding based on hierarchy depth. Users can click circles to zoom into sub-hierarchies through animated transitions, and hover effects highlight individual circles. The SVG-based rendering includes circular clip paths displaying celebrity images from external URLs, and the implementation uses D3's pack, hierarchy, nest, scaleOrdinal, and interpolateMagma APIs.

0007ebey
83% match
Loading thumbnail…

React Starter PAck backup 3

This interactive bubble chart visualizes celebrity data by category and gender, using circular packing to show sample sizes through circle area. It displays celebrity portrait images clipped within each circle, with offsets adjusting image positioning. The visualization is built with React components that wrap D3 v5 functions including `d3.pack`, `d3.hierarchy`, `d3.nest`, and `d3.scaleOrdinal`, rendering to SVG with animated updates. Data comes from a local CSV file containing celebrity names, categories, sample counts, portrait URLs, and offset values.

KKrishu
82% match
Loading thumbnail…

React Starter PAck backup 3

This interactive bubble chart visualizes celebrity data by category and gender, using circular packing to show sample sizes through circle area. It displays celebrity portrait images clipped within each circle, with offsets adjusting image positioning. The visualization is built with React components that wrap D3 v5 functions including `d3.pack`, `d3.hierarchy`, `d3.nest`, and `d3.scaleOrdinal`, rendering to SVG with animated updates. Data comes from a local CSV file containing celebrity names, categories, sample counts, portrait URLs, and offset values.

KKrishu
82% match
Loading thumbnail…

React Starter PAck backup 3

This example renders a circular packed chart of celebrity data, with bubbles colored by hierarchy depth using `d3.scaleSequential` and `interpolateMagma`. It reads from a local CSV via `d3.csv` and nests the data by category and gender before applying `d3.pack` and `d3.hierarchy`. Each leaf node displays a celebrity photo clipped to its circle using SVG `clipPath`, with images positioned via an offset field. The visualization is built as a React component that calls D3 inside `componentDidUpdate` to update the SVG layout.

NNita
82% match