Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's Make a Face Part I

Public visualization

Viewing a saved revision (read-only)

5c8b729884d246d0ad3cc9b3529d68dc

Let's Make a Face Part I

0 stars0🌍 Public
GGoh Ngee Juay
Last edited Dec 13, 2023
Created on Dec 8, 2023

A grid of smiling faces, each with randomized eye size and placement, eyebrow position, and mouth curvature, demonstrates the modular construction of SVG graphics in React with D3. The code breaks the face into reusable components—`BackgroundCircle`, `Eyes`, `Eyebrows`, `Mouth`, and `Nose`—which are composed within a `Face` component using a `FaceContainer` that translates the SVG coordinate system to a shared center. Rendering relies on React’s `ReactDOM.render`, while D3’s `arc` generator creates the mouth path and the `range` function produces the layout of six columns by three rows.

AI-generated description

Half way towards a smiley face.