Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js!

Public visualization

Viewing a saved revision (read-only)

980f126ed49740d19cee8e459f5ad574

Let's make a face with D3.js!

0 stars1🌍 Public
Ggcappadaniel
Last edited Jun 4, 2020
Created on Jun 4, 2020

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

AI-generated description

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