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)

83c7e8881ac4475fba0909b779d248a8

Let's make a face with D3.js!

0 stars0🌍 Public
Aalicenie
Last edited Jun 15, 2020
Created on Jun 15, 2020

This example displays a smiling face with animated eyebrows built entirely through D3.js v5 DOM manipulation. The SVG face consists of circles for the eyes and head, a path for the mouth, and rectangles for the eyebrows, all positioned relative to a centered group element. Using D3's selection API (`d3.select`, `d3.append`) and the `transition` method, the eyebrows animate vertically over two seconds, moving up and then returning to their original position. The drawing relies on hardcoded numeric coordinates rather than external data.

AI-generated description

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