Refactor of My Smiley Face

100%

Refactor of My Smiley Face

✓ Published0🌍 Public

Last edited Mar 7, 2021

Created on Mar 7, 2021

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.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

smiley face refactoring into react components

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.

Ddmr

92% match

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

91% match

Loading thumbnail…

Smiley Face Part I

A smiley face rendered as a yellow circle with two red eyes and a curved mouth arc, drawn with SVG shapes inside a React component. The code uses D3's arc generator to create the mouth path, while React handles the declarative SVG rendering. Fixed viewport dimensions and hardcoded coordinates define the face geometry, showcasing a static data visualization without interactive behavior.

SSherryMoon

91% match

Loading thumbnail…

Smiley face part I

A yellow smiley face rendered in SVG via React and D3 v7. The face is drawn with two black-outlined circles for eyes, positioned relative to the center using offset constants, and a mouth created with the `d3.arc` path generator, using inner and outer radii and start/end angles. The entire composition is centered on a 960x500 canvas, with all shapes grouped and transformed by a translation. Static parameters define the geometry, and the example demonstrates combining React's declarative JSX structure with D3's arc API for shape generation.

RRishabh

90% match

Loading thumbnail…

Smiley Face Part I

A yellow smiley face rendered with SVG circles for the head and eyes, plus a D3 arc path for the mouth, is drawn centered on a 960×500 canvas. The React component uses JSX to position elements via the `arc()` generator from `d3`, with the mouth’s inner radius and angles defining its half-open shape. Eye placement and stroke width are computed from offset constants, while the head circle’s radius derives from the viewport height. The code imports `arc` from `d3` and leverages React 16 and D3 v5 for declarative SVG rendering.

RRyan Cooper

90% match

Loading thumbnail…

Smiley face with React

A yellow smiley face rendered in SVG via React uses D3's `arc` generator to create the mouth path. The face, eyes, and mouth are drawn as circle and path elements within a translated group, with the arc’s inner and outer radii and angles fixed. React 17 manages the component structure, while D3 v7 provides the geometric calculations. The static composition is centered on a 980 by 500 canvas.

PPedro Edyvan Hernández García

90% match

Loading thumbnail…

Smiley face part I

A yellow smiley face is drawn in an SVG using React components and D3's `arc` generator to create the mouth. The face consists of a large yellow circle with a black stroke for the outline, two black eye circles positioned symmetrically, and a semi-circular mouth path. D3 v7 calculates the mouth arc with specified inner and outer radii and angles, while React manages the SVG element hierarchy and attribute bindings for a declarative rendering approach.

Jjbruzzo

90% match