Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of D3-1: Making a face

Public visualization

Viewing a saved revision (read-only)

15a540950f8148638510ec2d05bd74eb

Fork of D3-1: Making a face

0 stars0🌍 Public
DDineshanth123
Last edited Sep 21, 2023
Created on Sep 21, 2023

This visualization assembles a cartoon face from basic SVG shapes, showing a yellow circle head, blue eyes, and an arc-based mouth against a white background. The eyebrows animate by moving upward over two seconds, then returning to their original position, cycling through this motion once. Built with D3 v7, the code uses `d3.select` to target the SVG element, `d3.arc` for the mouth path, and chained `transition().duration()` calls to animate the rectangles. Dimensions are extracted from the SVG attributes, and all shapes are positioned relative to the center of the 960×500 canvas.

AI-generated description