Fork of Circles with D3
✓ Published0🌍 Public
This fork of the D3 circles example generates a festive, animated scatterplot of nodes arranged in a circular cluster. It shows how simple SVG circles can be transformed into a themed visual using data-driven styling and physics-based layout. The code relies on D3’s `forceSimulation` to position the nodes, with a `forceCollide` to prevent overlap, while a custom `forceX` and `forceY` pull them toward a central ring. Each circle’s fill color and size are mapped from random data, and a `transition` with `delay` and `duration` animates the initial placement. The result is a playful, holiday-ready composition built entirely with Svelte and D3.
AI-generated descriptionCreating circles with D3.
Challenge
- Fork this example
- Modify it
- Maybe make it Halloween themed
- Maybe make it Christmas themed
- Be creative
Svelte
Here's a video on how to get started with Svelte as well!
MIT Licensed