Skip to main content
100%

Circles with D3 and React

✓ Published1🌍 Public
223100098@lums.edu.pk
Last edited Oct 8, 2025
Created on Oct 8, 2025

This example shows a collection of pastel-colored circles positioned across a white SVG canvas. It demonstrates how to integrate D3's data-join pattern with a React component. The code uses a `useRef` hook to access the SVG element, then calls a D3 `viz` function in a `useEffect` to bind data from a static array via `selection.data()` and `.join('circle')`, setting each circle's `cx`, `cy`, `r`, and `fill` attributes directly. The data is hardcoded in a separate `data.js` module, and rendering is done through React's `createRoot` with plain `React.createElement`.

AI-generated description
MIT Licensed

Similar vizzes