Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React Components

Public visualization

Viewing a saved revision (read-only)

140d5017b8574fbdaf524123a53be6fa

React Components

0 stars0🌍 Public
NNicolás Troncoso
Last edited Mar 31, 2021
Created on Mar 31, 2021

A React component renders a yellow smiley face as an SVG, with the face centered on a 960 by 500 canvas. The example demonstrates composing D3's `arc` generator inside JSX to draw the mouth, while circles for the eyes and a reusable `BackgroundCircle` component handle the other shapes. React 16.9 and D3 v5 are loaded via UMD scripts, and `ReactDOM.render` mounts the component to the page. The code shows styling through SVG attributes like `stroke-width` and uses D3's `arc` for the path geometry.

AI-generated description

Smiley face implementation with React & D3, using a React component.