Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley Face Part 1

Public visualization

Viewing a saved revision (read-only)

2705268a51a6441eb9dc78f40d0d8667

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