Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley Face Part 1

Public visualization

Viewing a saved revision (read-only)

5336a0da2c414fb3be538a9ee59c8fce

Smiley Face Part 1

0 stars0🌍 Public
BBrian Musisi
Last edited Sep 12, 2020
Created on Sep 12, 2020
Forked from Hello VizHub

A grid of six-by-three smiley faces renders as React components, each face composed of SVG circles and an arc path. The code reassembles a face from reusable components—BackgroundCircle, Eye, Mouth, and Glisten—inside a FaceContainer that translates the SVG group. Each instance receives randomized eye radius, mouth width, and mouth radius via d3.range and Math.random, while d3.arc generates the mouth path. The example demonstrates composable SVG primitives within React, using d3.v6 for arc generation without any external data source.

AI-generated description

Half way towards a smiley face