Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Let's make a face with D3.js!

1 star0🌍 Public
MMEHMETHAN YAGCI
Last edited Jul 9, 2020
Created on Jul 9, 2020

This example uses D3.js to construct a smiley face from basic SVG shapes, including circles for the eyes, rectangles for the eyebrows, and arc-generated paths for the mouth and nose. The code demonstrates fundamental DOM manipulation by selecting an SVG element and appending grouped elements with explicit coordinate transforms. Animated behavior is implemented through chained `transition` calls, moving the eyebrow group upward and back down over two one-second intervals. The visualization relies on D3’s `select`, `arc`, and transition APIs to show how static shape creation and simple attribute animation work together.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

Comments

Sign in to join the discussion.

MIT Licensed