Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with d3.js!

Public visualization

Let's make a face with d3.js!

0 stars8🌍 Public
BBhavyatulasi
Last edited Mar 24, 2020
Created on Mar 23, 2020

A simple animated face is drawn with SVG inside a React component. D3 v5 selections create a yellow circle for the head, black circles for eyes and eyebrows, and an arc path for the smile. Transitions animate the eyebrows upward and the smile downward over two seconds each, then return them to their original positions. The example demonstrates layering groups with `svg.append('g')`, applying translation transforms, and using `transition().duration()` for sequential movement.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed