Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sean Thornton Circles with D3

Public visualization

Viewing a saved revision (read-only)

ea707153165b4b1290c074360abbd729

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.