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)

89ca9afa71464db4a6ea2c11153a2b9c

Let's make a face with D3.js!

0 stars1🌍 Public
Jjons288
Last edited Oct 29, 2018
Created on Aug 29, 2018

This example demonstrates fundamental DOM manipulation and animation with D3.js by building a smiley face from SVG shapes. A red circle forms the head, with appended circles for eyes and rectangles for eyebrows, while a mouth is drawn using the `arc` generator. The code uses `selection.append` and `transition.attr` to move the eyebrow group up and down over two seconds. All elements are positioned relative to a centered `g` container, using D3 v5’s modular `select` and `arc` imports, with the SVG defined statically in HTML.

AI-generated description

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