Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a funny face with D3.js!

Public visualization

Viewing a saved revision (read-only)

6cf1eb36d237477f908c71cf8f2d4417

Let's make a funny face with D3.js!

0 stars0🌍 Public
BBrian Behnke
Last edited Jul 16, 2019
Created on Jul 16, 2019

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face from SVG shapes, then animating its eyebrows. The face is built using D3 selections to append a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The code uses `d3.select`, `d3.arc`, and D3’s `transition` API to move the eyebrow group vertically over two seconds, creating a funny winking-like motion. All elements are rendered as SVG inside a 960×500 viewport.

AI-generated description

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