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)

d08dfeb108aa4b689869f5c3bc5754ca

Let's make a Face with D3.js!!!

0 stars0🌍 Public
Ddevdutta
Last edited Jun 5, 2019
Created on Jun 5, 2019

This example uses D3.js v5 to draw a smiling face in an SVG, composed of a yellow circle, two eyes, animated eyebrows, and a mouth path. The face is centered in a 960x500 canvas, with the mouth created using the `arc` function to generate a curved path. Eyebrows are rectangles that animate up and down via chained `.transition()` calls, each lasting 2000 milliseconds. The code relies on D3’s selection and shape-generation APIs, with the SVG created in the HTML file and styling handled by an external stylesheet.

AI-generated description

An example showing the capabilities of VizHub.