Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Circles with D3 for Fritz Bari

Public visualization

Viewing a saved revision (read-only)

ac4a4f7707d34320a8a17f01d3258758

Fork of Circles with D3 for Fritz Bari

0 stars0🌍 Public
Ffritz.green.bari@gmail.com
Last edited Feb 27, 2024
Created on Feb 27, 2024
Forked from Circles with D3

This gallery example renders six semi-transparent circles in a pastel green canvas using D3’s selection and data-join pattern. The code creates an SVG container sized to its parent element and binds an array of objects, each specifying x, y, radius, and fill color, to circle elements. The `selectAll('circle').data(data).join('circle')` chain sets position, size, color, and a fixed opacity of 0.708. The example demonstrates basic D3 shape generation with static, hardcoded data, suitable for exploring theme variations like Halloween or Christmas color palettes.

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!