Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's Make a Face

Public visualization

Viewing a saved revision (read-only)

d60c6cade8e1412192a5477f9f351776

Let's Make a Face

0 stars1🌍 Public
AAndrea Picciau
Last edited Oct 28, 2021
Created on Sep 27, 2021

This example displays a grid of 80 yellow smiley faces, each rendered as an SVG using React components. The faces are constructed from separate reusable parts—a background circle, two eyes, and a mouth created with D3’s `arc` generator for the curved smile. Each face uses randomized eye radius values to introduce slight variation, while all other dimensions like eye offset and mouth width remain fixed. The code combines React’s component composition with D3 v7’s shape utilities, embedding the SVG elements through a `FaceContainer` that centers the drawing within the viewport.

AI-generated description

Half way towards a smiley face.