Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sean Thornton Circles with D3

Public visualization

Sean Thornton Circles with D3

0 stars0🌍 Public
SSean Thornton
Last edited Aug 25, 2025
Created on Aug 25, 2025
Forked from Circles with D3

This example shows a responsive smiley face built entirely from circles positioned to form the eyes, nose, mouth, and face outline. It uses D3’s `select` and data joins (`join('circle')`) to render seven SVG circles, with coordinates and radii computed relative to the container’s `clientWidth` and `clientHeight`. The code sets each circle’s fill color and opacity directly from a static data array, and the SVG background uses a pale green tone.

AI-generated description

Smiley Face Visualization

This project creates a smiley face using D3.js circles. The circles are positioned and colored to form facial features:

  • Yellow circle for the face
  • Black circles for the eyes, nose, and mouth

The visualization is responsive and will adapt to the size of the browser window.

Comments

Sign in to join the discussion.

MIT Licensed