Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Smiley Face Part II

Public visualization

Viewing a saved revision (read-only)

1f3e585fd31249be9678fc7f7f6a6bfb

Fork of Smiley Face Part II

0 stars0🌍 Public
MMohammed Jumail Shibily
Last edited Jun 19, 2021
Created on Jun 19, 2021

This example renders a full-window smiley face using React and D3 v7. It shows a yellow face with black outline, two eyes, and a smiling arc, all positioned dynamically based on the browser viewport size. The code defines reusable React components like `FaceCircle`, `LeftEye`, `RightEye`, and `SmileArc`, with the latter using D3’s `arc()` generator to create the mouth path. SVG elements are drawn inside a `<g>` transform, and ReactDOM renders the composite face component into the page.

AI-generated description

Smiley face implementation with React.