Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley Face Part 1

Public visualization

Viewing a saved revision (read-only)

2e6381d8c8f84010b2b108c09ab4d950

Smiley Face Part 1

0 stars1🌍 Public
BbeauMarko
Last edited Oct 7, 2021
Created on Oct 4, 2021
Forked from HTML Starter

The visualization shows a grid of 18 randomly generated smiley faces, each drawn with a yellow circular background, two eyes, and a mouth using an SVG arc. Faces vary slightly in eye offset and radius due to `Math.random()` values applied per face, while the mouth is rendered with a fixed radius and width. Built with React and D3 v7, the code uses the `arc()` generator from d3-shape to create the mouth path, and reusable React components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` to compose each face within an SVG group translated to the center.

AI-generated description

Half way towards a smiley face.