Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's Make a Face Part I

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed