Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Hi vizhub Smiley Face Part V

✓ Published1🌍 Public
RRuanzhenglin
Last edited Apr 9, 2021
Created on Apr 8, 2021

This example builds a smiley face from modular React components, rendered as SVG shapes. A yellow circle with a blue stroke forms the head, while two black circles serve as eyes and an arc generated with d3.arc creates the mouth. The code imports React and ReactDOM to mount the app and relies on D3 v6 for the mouth’s arc path geometry. All proportions, such as radius and offsets, are defined as constants in index.js, and the components receive them as props.

AI-generated description

Half way towards a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Hi vizhub Smiley Face Part VI

This example shows a modular, React-based smiley face composed of reusable SVG components for the background circle, eyes, and mouth. The face is drawn using D3’s `arc` generator to create the mouth path, with all geometry parameterized by props for position, size, and stroke width. A `FaceContainer` wraps the SVG and applies a translation transform to center the drawing. The code demonstrates a component-driven approach to D3 visualization within a React framework, rendering static SVG without data binding.

RRuanzhenglin
96% match
Loading thumbnail…

Fork of Hi vizhub Smiley Face Part II

This example displays a simple smiley face composed of a yellow circle with a blue stroke, two eyes, and a curved mouth, all rendered using React and D3.js within an SVG. The visualization centers the face using a translated `<g>` group, while the mouth is generated with the `d3.arc()` function using specified start and end angles. The code imports `arc` directly from D3 v6 and uses React components to define each facial feature, demonstrating a functional approach to combining React's declarative UI with D3's geometric utilities.

RRuanzhenglin
94% match
Loading thumbnail…

Fork of new smiley face part III

This example builds a smiley face from modular React components rendered as SVG. A yellow background circle with a black stroke is combined with two eyes, positioned using offsets, and a mouth drawn with a D3 arc. The mouth’s shape is generated using the `d3.arc` API, specifying inner and outer radii and start/end angles. The React application uses ReactDOM to render the SVG structure, with all elements grouped and transformed to the canvas center.

Nnexus1058
92% match
Loading thumbnail…

Fork of Smiley Face Part V

A React application renders a yellow smiley face as an SVG graphic, composed of a background circle, two eyes, and an arc-shaped mouth. The code demonstrates modular component structure using ES6 modules and React Fragments, with each facial feature defined in its own file. D3’s `arc` generator creates the mouth path, while React and ReactDOM manage the SVG rendering, and D3 v5 is loaded for utility functions. The face is centered within a 960×500 viewport using SVG transform translations.

LLan Li
92% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face constructed from a yellow circle, two eyes, and an arc-shaped mouth, all rendered as SVG elements in a React application. The face’s components are split into separate ES6 modules, demonstrating component reuse and React fragments for grouping. The mouth uses d3’s `arc()` API to define an annular sector, while the circle and eye positions are controlled by constant offsets and radii. D3 v5 and React 16.9 are used, with ReactDOM handling the SVG rendering.

TTushar Dangayach
92% match
Loading thumbnail…

Fork of Smiley Face Part V

This example renders a yellow smiley face composed of modular React components: a circular background, two eyes, and a curved mouth. The components are split into separate ES6 module files and composed within a face container that centers the drawing. The mouth uses a d3 arc path with specified inner and outer radii and start/end angles. The React app passes width, height, and positioning props, while ReactDOM renders the final SVG with a fixed 960×500 viewport.

PPhilip Kaminski
92% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face built from modular React components, with a yellow circular face, two black radial-gradient eyes, and a curved mouth arc. It demonstrates splitting D3-based SVG rendering into separate ES6 module files, using React fragments in the eyes component and a shared face container for positioning. The code uses React 16.9, D3 v5’s `arc()` API for the mouth path, and renders everything into an SVG via `ReactDOM.render`. All geometry values are defined as constants in the main `index.js` file.

AAbin
92% match
Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face with black outlined eyes and a curved mouth is rendered as an SVG inside a React application. The code splits the face into separate ES6 module components, including `BackgroundCircle`, `Eyes`, and `Mouth`, using React fragments. The `Mouth` component uses the `arc` function from `d3` to define its path, while fixed numeric constants set the face dimensions. This example demonstrates modular component reuse with React and D3.

GGordon Yang
92% match