Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Let's make a face: part 5

Public visualization

Post on XLinkedIn
Open

Let's make a face: part 5

0 stars1🌍 Public
Rrvdv
Last edited Dec 20, 2021
Created on Dec 20, 2021

A modular smiley face built with React renders gold background circles, black eyes, and a curved mouth in SVG. The component structure separates BackgroundCircle, Eyes, and Mouth into individual ES6 modules, with the mouth path generated using d3.arc. Fixed dimensions position elements via a translated group, while ReactDOM mounts the app to the DOM.

AI-generated description

Refactoring the smiley face with React and D3 into multiple files with ES6 modules.

File structure:

  • index.js
    • BackGroundCircle.js
    • Eyes.js
    • Mouth.js
      • d3.arc

Comments

Sign in to join the discussion.

MIT Licensed

Similar vizzes

Let's make a face: part 4

90% match
Rrvdv

Let's Make a Face Part I

90% match
Sseanware

Smiley Face Part I

90% match
GGabriel Starosky

Smiley Face Part 1

90% match
Eeskizie

Let's Make a Face Part V multiple files with ES6 modules

90% match
Ccoobeet

Let's Make a Face Part V multiple files with ES6 modules

90% match
RRiccardo De Lucia

Let's make a Smiley Face - Part 5

90% match
OOlowogoke Seun

Smiley Face Part V - ES6 Modules

89% match
Ddev-ignacio-h