Fork of Smiley Face Part V

100%

Fork of Smiley Face Part V

✓ Published0🌍 Public

Last edited Aug 20, 2021

Created on Aug 20, 2021

Built with React and D3 v5, this example renders a static smiley face composed of three modular components: a yellow background circle, two black eyes, and a mouth drawn with the `d3.arc()` path generator. Each component receives its positioning and sizing values as props, demonstrating how to structure a React visualization into separate ES6 modules and fragments. The SVG output is centered within a 960×500 viewport, with all shapes positioned relative to a central translated group.

AI-generated description

Splitting React components into multiple files using ES6 modules. Bonus: React Fragments!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part V

Built with React and D3 v5, this example renders a yellow smiley face as modular SVG components in separate ES6 modules. The code defines `BackgroundCircle`, `Eyes`, and `Mouth` components, with the latter using the `arc` generator from D3 to create a curved path. A `FaceContainer` wraps the SVG and positions all elements via a translated group. The face’s geometry—eye offsets, radii, and mouth width—is passed as props, and the final composition is mounted with `ReactDOM.render`.

KKonJoDot

95% match

Loading thumbnail…

Fork of Smiley Face Part V

A smiley face is rendered as a set of reusable React components, each defined in its own file: a yellow background circle, two eyes, and a mouth. The face is drawn using SVG shapes within a React application, with the mouth created using D3's `arc` generator. The example demonstrates modular component composition and uses React fragments to group the eyes. The visualization is static, with all dimensions and positions defined as constants and applied via SVG transforms.

SSophia Chiao

95% match

Loading thumbnail…

Fork of Smiley Face Part V

SSophia Chiao

95% match

Loading thumbnail…

Fork of Smiley Face Part V

A React and D3 component splits a yellow smiley face into separate ES6 modules for the background circle, eyes, and mouth. The SVG renders with fixed dimensions, using a transformed group to center the face, while D3’s `arc` generator creates the mouth path with specified start and end angles. React fragments group the two eye circles without extra DOM elements. All styling comes from inline SVG attributes, and the code demonstrates modular component composition with imported React and D3 libraries.

Bbillmccabeusa@hotmail.com

95% match

Loading thumbnail…

Fork of Smiley Face Part III

Built with React and D3 v5, this example renders a smiley face as an SVG composed of layered geometric shapes. A yellow circle forms the head, with two smaller circles for eyes and an arc-generated path for the mouth, all positioned using D3's `arc()` generator and SVG transforms. The code uses React components to structure the markup, while D3 handles the mouth's curved path calculations. The face is centered within a 960 by 500 viewport, with all coordinates and radii defined as constants.

SSrinivasan KR

95% match

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiling face composed of modular React components: a yellow background circle, two eyes, and an arc-shaped mouth, all rendered as SVG. The face is centered within a 960×500 viewport, with positioning controlled by properties such as `centerX`, `centerY`, `eyeOffsetX`, and `eyeOffsetY`. The code imports React, ReactDOM, and D3’s `arc` generator to define the mouth path. Components are split across separate ES6 module files, and React Fragments group the eyes without extra DOM elements. The rendering uses SVG elements inside a `<g>` transform for translation.

JJustin Olson

94% match

Loading thumbnail…

Fork of Smiley Face Part V

A React-based smiley face is composed from modular SVG components for the background circle, eyes, and mouth. The mouth is generated using d3's `arc` generator to create a curved path. The visualization demonstrates component splitting across files with ES6 modules and React Fragments, rendering a static decorative graphic in SVG format with ReactDOM.

Sspace-captain96

94% match

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiling face constructed from modular React components, with a yellow circular background, two eyes, and an arched mouth drawn using d3’s `arc` generator. The SVG is rendered through React, with each part—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—defined in separate ES6 modules and composed in `index.js`. Coordinates and sizes like eye offset and mouth radius are passed as props, while the `FaceContainer` wraps children in a translated group. The code uses React fragments to group the eyes without extra DOM elements.

DdbarU

94% match