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)

cae4db951b3e45ca8d106e1b85fbc03d

Let's make a face with D3.js!

0 stars0🌍 Public
Wwoznicak
Last edited Aug 6, 2020
Created on Aug 6, 2020

This example shows a simple, animated smiley face built entirely with D3.js, where the eyebrows move up and down. It demonstrates fundamental DOM manipulation by selecting an SVG element and using D3’s data join and transition methods to update attributes over time. The code uses `d3.select` and `d3.transition` to animate the eyebrows, while the face itself is drawn with basic SVG shapes. The rendering is SVG-based within a 960×500 viewport, with styles defined in a separate CSS file. No external data source is used; the entire visual is generated programmatically.

AI-generated description

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