smiley face refactoring into react components

100%

smiley face refactoring into react components

✓ Published2🌍 Public

Last edited Nov 13, 2021

Created on Nov 13, 2021

This example displays a smiley face built from a yellow circle, two eyes, and a curved mouth, rendered as SVG. The code refactors drawing primitives into named React components like `BackgroundCircle`, `Eyes`, and `Mouth`, with `Face` orchestrating their layout and `FaceContainer` providing the SVG canvas. It uses React for component composition and d3’s `arc` function to generate the mouth’s path. Properties such as eye offset and mouth radius are passed as parameters, enabling flexible geometry without hard-coded coordinates.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

extra notes

Smiley face part 1 uses svg to create the face and two eyes but we need to be able to use some math to set items out without hard coding all the x and y offsets

so it's time for REACT

In this fork:

refactor the drawing elements like circle into React components with meaningful names

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Refactored

This example displays a yellow smiley face with black-outlined circular eyes and a curved mouth, centered on a blank canvas. It demonstrates component-based visualization with React, breaking the face into separate modules like `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. The code uses d3’s `arc` API to generate the mouth path, while React components pass numeric props for positioning and sizing. The face is rendered as SVG elements within a translated `<g>` group, with fixed dimensions of 960 by 500 pixels.

Oo-n-e

93% match

Loading thumbnail…

refactoringReactComponents

A React-based smiley face is drawn five times using reusable SVG components. The code refactors a D3 visualization into modular React components, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, which positions children via a SVG `<g>` transform. Each face uses fixed properties for eye offset, mouth radius, and stroke width. D3's `arc` API generates the mouth path, while ReactDOM renders the composition into the DOM.

SShane Carey

92% match

Loading thumbnail…

smiley new React

This example builds a yellow smiley face using React components and SVG. It defines a reusable `Face` component from smaller parts: a background circle, eyes, and a mouth, each rendered as separate React modules. The face is positioned and scaled with props, and the mouth uses D3's `arc` API to generate an SVG path. The code imports React, ReactDOM, and D3 from CDNs, and the entire drawing is rendered inside a single SVG element, showcasing a component-based approach to data visualization.

MMuhammad Ahmad

92% match

Loading thumbnail…

Refactor of My Smiley Face

A yellow smiley face rendered with SVG components in React, featuring two eyes, red cheeks, and a mouth drawn as an arc. The face is centered using a translated group element, with all shapes positioned relative to that center. The code imports `arc` and `line` from d3, using `arc` to generate the mouth path with specified inner and outer radii and angles. Static circle elements define the eyes and cheeks, while React functional components structure the SVG markup. The visualization demonstrates a refactored approach to assembling a simple figure with reusable, declarative components.

MMarina Shemesh

92% match

Loading thumbnail…

smiley face

This example renders a yellow smiley face from modular React components, combining a background circle, two eyes, and a mouth arc. The face is assembled using SVG circles and a path generated by the `d3.arc()` API, with the mouth’s shape determined by inner and outer radii and start/end angles. The `Face` component composes separate `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, all positioned via a centered `<g>` transform within an SVG container. D3 v7 provides the arc generator, while React manages the component hierarchy and props for sizing, offsets, and stroke widths.

VVIBHANSHU RAI

91% match

Loading thumbnail…

Refactor React - Smiley Face

A React component renders a yellow smiley face as a scalable vector graphic, composed of a circular background, two eyes, and a smiling mouth. The face is built from separate functional components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—that accept numeric props for dimensions and positioning. The mouth uses the `d3.arc` generator from d3.v6 to create a semicircular path, while all elements are centered within an SVG container via a translation transform. The example demonstrates how to structure reusable, data-driven visual components with React and D3.

SSiddhesh Palande

91% match

Loading thumbnail…

Fork of smiley face refactoring into react components

This example demonstrates a modular React approach to rendering a smiley face using SVG. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` components, each receiving explicit props for positioning and sizing. The `FaceContainer` renders the SVG wrapper and a translated `<g>` group, while `Mouth` uses `d3.arc` to generate a path for a smile. Hardcoded offsets from earlier versions are replaced with configurable numeric props passed from a top-level `App` component, which renders the face into the DOM via `ReactDOM.render`.

Ddmr

91% match

Loading thumbnail…

smiley face

A yellow smiley face rendered as SVG via React components shows geometric shapes: a circle background, two eyes, and an arc-based mouth. Each facial feature is a separate React component—BackgroundCircle, Eyes, and Mouth—composed within a FaceContainer that applies a centered translate transform. The Mouth uses d3.arc with specified inner and outer radii and start/end angles to draw the smile. Hardcoded dimensions for the face, eyes, and stroke width define the static visualization.

Jjonrynn

91% match