Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley Face Part 3

Public visualization

Smiley Face Part 3

0 stars0🌍 Public
SSibylle Engelhard
Last edited Oct 28, 2021
Created on Oct 27, 2021
Forked from Hello VizHub

This example displays a grid of 15 smiley faces, each with randomly varying eye radii for subtle individual character. Built with React components, the visualization uses D3’s `arc` API to render the mouth shape and SVG circles for the face, eyes, and background. Each face is composed of modular components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that are parameterized by props like `eyeRadius`, `mouthWidth`, and `strokeWidth`. The faces are generated using D3’s `range` function to create the array of 15 instances.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed