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)

430c1391bacd42ecaff55898396f9a2f

Let's make a face with D3.js!

0 stars0🌍 Public
NNikkor
Last edited Sep 10, 2018
Created on Sep 10, 2018

This example creates a smiley face using D3.js v5, showing fundamental DOM manipulation with SVG shapes like circles, rectangles, and paths. The face's eyebrows animate by moving vertically and returning, using D3's `transition().duration()` to tween the `transform` attribute over two seconds. A yellow rectangle serves as the face, while the arc-based mouth uses D3's `arc()` generator for its path. The code directly selects and appends SVG elements, demonstrating basic D3 selection and attribute setting.

AI-generated description

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