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)

50382c3d9cbe4f43b6845bec27175efc

Let's make a face with D3.js!

0 stars2🌍 Public
Jjuanandressr97
Last edited May 24, 2019
Created on May 24, 2019

This example demonstrates how to create an animated smiley face with moving eyebrows using D3.js. The visualization uses SVG rendering within an HTML page, with D3’s selection methods to build and manipulate facial elements. It relies on `d3.scaleLinear` and `d3.scaleBand` to map data from a hardcoded array of telescope observations, drawing bars and axes, then repurposes the same SVG canvas for the face. The face itself is constructed from basic shapes, with eyebrows animated through D3 transitions, showing fundamental DOM manipulation and data-binding techniques.

AI-generated description

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