Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-4 Making a face using Vizhub

Public visualization

Viewing a saved revision (read-only)

8a606795b2eb4364b4d42246e8967598

ICE-4 Making a face using Vizhub

0 stars0🌍 Public
Ttejasviprasad06@gmail.com
Last edited Feb 20, 2023
Created on Feb 20, 2023

This example assembles a cartoon face from SVG primitives, including hair, ears, a neck, head, eyes, eyebrows, nose, mouth, and animated hat ellipses, with dark sunglasses and a cigarette added. The code uses D3.js v5 API’s `select` and `arc` to construct paths and attach shapes, while `transition().duration(2000)` animates the hat’s vertical position in a looping up-and-down motion. The face is drawn entirely with hard-coded coordinates and no external data, rendering in SVG within a 960-by-500 viewport.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose shades and hat are moved along with a wishing text coming out of the mouth.