Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face with D3.js

Public visualization

Let's make a face with D3.js

0 stars1🌍 Public
AAkash
Last edited Mar 21, 2022
Created on Mar 21, 2022

This example builds a simple cartoon face using D3.js v7 and SVG primitives. A yellow circle forms the head, with smaller circles for eyes, rectangles for eyebrows, and a semicircular arc for the mouth, all positioned relative to the center of the SVG canvas. The code uses `d3.select` to target the SVG, `append` with `attr` to create shapes, and `transition().duration()` to animate the eyebrow group’s vertical position in a two-step bounce. The layout is handled manually with computed offsets rather than a data-driven scale or simulation.

AI-generated description

An example including some commonly used features of SVG.

Comments

Sign in to join the discussion.

MIT Licensed