Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a smiley face with D3.js

Public visualization

Viewing a saved revision (read-only)

8570bd7f2ae942f2aca00f530866449e

Let's make a smiley face with D3.js

0 stars2🌍 Public
VVeena Muralidharan
Last edited Aug 14, 2019
Created on Aug 14, 2019

A yellow smiley face is drawn in SVG using D3.js v5, with a circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth generated with the `arc` helper. The eyebrows animate vertically via chained `transition().attr()` calls, moving down then returning over four seconds. The SVG dimensions are read directly from the markup, and the face is centered using a translated `<g>` group. The example demonstrates basic SVG shape creation and D3 transitions.

AI-generated description

An example including some commonly used features of SVG.