Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Face with D3.js

Public visualization

Viewing a saved revision (read-only)

c1d24f0100944a0e828de7c3cc630363

Face with D3.js

4 stars2🌍 Public
TTebid Quinsy
Last edited Jan 2, 2021
Created on Dec 21, 2020

A stylized face drawn with D3.js animates its features on a dark background. The SVG canvas shows a yellow circle for the face, two black ellipses for eyes that transition between positions, and a rectangular mouth that widens and moves downward via D3 transitions. Using `d3.select` to fetch the SVG element and the `transition().duration()` API, the code orchestrates sequential transformations on the ellipse and rect attributes. All shapes are appended directly to the SVG, with eye motion repeating through chained transitions, while the face remains static.

AI-generated description

Working with D3.js

  • Make a face :D
  • Animate the face