Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

Half way towards a smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Hi vizhub Smiley Face Part V

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.

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 Fork of Fork of Fork of Hi vizhub Smiley Face Part VII

A small grid of 18 smiley faces, each randomly varied in stroke width, eye position, eye radius, and mouth dimensions, is drawn as overlapping SVG circles and paths. The faces use a yellow circle with a blue stroke, two black eyes, and an arc mouth. The React components `Face`, `BackgroudCircle`, `Eyes`, and `Mouth` compose the shape, while `d3.arc` computes the mouth path. The `d3.range` utility generates the fixed 18-item array, and each face renders independently with randomized parameters.

RRuanzhenglin
93% match
Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example renders a smiling face as a reusable React component, composed of separate SVG elements for the background circle, eyes, and mouth. The mouth uses d3’s `arc` generator to create a curved path based on configured radius and width values. All shapes are drawn in SVG within a single `<g>` container that translates the drawing to the center of a 960-by-500 viewport. The code explicitly defines constants for dimensions and positions, demonstrating a modular, parameter-driven approach to building simple visualizations with d3.v7 and React 17.

AAmir
92% match
Loading thumbnail…

Fork of Smiley Face Part V

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.

HHuchenhaoArvin
91% match
Loading thumbnail…

Fork of Smiley Face Part V

This example shows a smiley face built with reusable React components, rendered as SVG with D3’s arc generator for the mouth. The code splits the face into separate ES6 modules for the background circle, eyes, and mouth, using React fragments to return multiple elements. The face is centered via an SVG group transform, with fixed dimensions and styling defined in a plain HTML wrapper. The React and D3 libraries are loaded from CDNs, and the final composition is mounted into the DOM with ReactDOM.

Rredeath96
91% 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
91% 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
91% match