Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Circles with D3 - Thunderstorm

Public visualization

Viewing a saved revision (read-only)

bd4f6385e08b494982b04a2275a7d87c

Circles with D3 - Thunderstorm

1 star0🌍 Public
Llingjizhu@gmail.com
Last edited Jan 30, 2024
Created on Jan 12, 2024
Forked from Circles with D3

This example builds a stylized thunderstorm scene using D3’s selection and data-join methods (`select`, `selectAll`, `data`, `join`) to render two groups of shapes. A cloud is composed of ten overlapping circles, each positioned with explicit `cx`, `cy`, and `r` attributes and given a semi-transparent fill color from a hardcoded array. The lightning bolt is a single SVG path element with a yellow fill and stroke, defined by a static `d` string. The visualization uses D3 v7 in an SVG container with a fixed beige background.

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