Skip to main content
100%

Fork of Circles with D3

✓ Published0🌍 Public
Rratnach@outlook.com
Last edited Feb 28, 2024
Created on Feb 28, 2024
Forked from Circles with D3

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 description

Creating 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

Similar vizzes