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)

c5e96d7be68c4732a3266ee98f110008

Let's make a face with D3.js!

0 stars0🌍 Public
Hhhhheeee
Last edited Aug 21, 2019
Created on Aug 21, 2019

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move in response to a data-driven simulation. It renders the face as SVG elements using `d3.select` and chained attribute setters, while the eyebrow motion relies on D3’s `transition.attrTween` to interpolate positions. The code loads D3 v5 from a CDN and integrates a JSON dataset containing vertices and edges, though the visible visualization focuses solely on the SVG face rather than the network data. The page uses a full-screen SVG canvas with a stylesheet that hides overflow.

AI-generated description

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