React Starter PAck backup 3

100%

React Starter PAck backup 3

✓ Published2🌍 Public

Last edited Aug 27, 2020

Created on Aug 27, 2020

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

React Starter PAck backup 3

KKrishu

100% match

Loading thumbnail…

React Starter PAck backup 3

This visualization shows a celebrity dataset using a packed circle layout, with each circle representing a sample size and displaying a photo of the celebrity. The circle packing layout is generated using the D3.js `pack` API, and the data is processed through `csv` and `nest` functions. The interactive SVG is rendered in React with an animation, using D3's `scaleOrdinal` for assigning photo clip paths and `scaleSequential` with the `interpolateMagma` color scale for the circle fills.

KKrishu

93% 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

92% 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

92% match

Loading thumbnail…

React Starter

This example demonstrates a React-based data visualization that loads a CSV file of celebrities and organizes the entries into a hierarchical structure by category and gender. The code uses `d3.csv` to parse the data and `d3.nest` to group records hierarchically, transforming the result into a tree-like JSON object. React components render the visualization, with an SVG container displaying a placeholder text message. The visualization currently shows a static "Hello Pack" text rather than a chart, highlighting the integration setup between React and D3 utilities.

0007ebey

83% match

Loading thumbnail…

Zoomable packing celeb

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.

0007ebey

82% match

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

82% match

Loading thumbnail…

React Starter

This example shows a circular bubble chart where hierarchical data is displayed as packed circles, with labels split across multiple lines and colored by group. The visualization uses d3.pack to compute the layout and D3’s selection API to join data to SVG circles, clip paths, and text elements. It incorporates React for the user interface and DOM.uid for unique identifiers, while datasets are loaded from a JSON file. Tooltips reveal each leaf’s title and formatted value.

SStefan Gerrits

81% match