Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Let's Make a Face Part I

Public visualization

Viewing a saved revision (read-only)

e6f6288bf1c8453ab3e7879e8eb4e02c

Fork of Let's Make a Face Part I

0 stars0🌍 Public
JJulia
Last edited Sep 2, 2021
Created on Aug 29, 2021

This example shows a grid of fifteen smiley faces, each with randomized eye and mouth sizes, rendered as yellow SVG circles with black outlines. Built with React and D3 v7, the visualization uses reusable components like `FaceCircle`, `Eyes`, and `Mouth` to compose each face. The `Mouth` component leverages D3's `arc` generator to create a curved smile path, while the `FaceContainer` wraps the SVG elements and centers them via a translation transform.

AI-generated description

Half way towards a smiley face.