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)

d710a26b31c341dea7c6f0be91b74b90

Let's make a face with D3.js!

0 stars0🌍 Public
Wwen787
Last edited Jun 25, 2019
Created on Jun 25, 2019

A D3.js tutorial demonstrates fundamental DOM manipulation by building a smiley face with animated eyebrows. The example shows an SVG face whose eyebrows move dynamically, illustrating how D3 selects and modifies elements. The code uses `d3.select`, `append`, and `attr` to construct the face from SVG circles and paths, then applies transitions to adjust eyebrow positions. It relies on D3 v5, rendering everything as SVG within a 960x500 viewport, with accompanying CSS for styling and layout. The dataset is implicit—the face geometry is hardcoded rather than loaded from external data.

AI-generated description

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