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)

7253670d5c734c72ba9459d09e2f67fc

Let's make a face with D3.js!

0 stars1🌍 Public
Iiascchwen
Last edited Nov 26, 2019
Created on Nov 26, 2019

This example demonstrates basic D3.js DOM manipulation by constructing a smiling face from SVG elements, with animated eyebrows that move independently. The code uses D3 v5 selection methods such as `select`, `append`, and `attr` to create a yellow circle for the face, while additional elements are styled via external CSS. The visualization renders in an SVG container with fixed dimensions, and the interaction is shown through a linked video tutorial. The approach highlights how D3 binds data to visual primitives without requiring a dataset, focusing instead on programmatic element creation and attribute updates.

AI-generated description

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