Skip to main content
SimilarExport ZIP
100%

D3 and React Smiley

✓ Published1🌍 Public
GGordon Yang
Last edited Apr 7, 2021
Created on Apr 7, 2021
Forked from Hello HTML

This example shows a smiley face composed of SVG shapes, with a yellow circular background, two black eyes, and an arc-shaped mouth. The face is built from reusable React components—BackgroundCircle, Eyes, and Mouth—assembled within a FaceContainer that wraps the SVG and applies a translation to center the graphic. The mouth uses the d3.arc() API to generate an SVG path with specified inner and outer radii and angular extents, while the overall layout is positioned using React props passed from the top-level App component.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Smiley Face Part + React

A D3 smiley face built as a React component renders a yellow circle with black stroke, two eye circles, and an arc-shaped mouth using the `arc()` generator from d3-shape. The SVG is sized to the browser window, with the face centered via a `<g>` transform. `ReactDOM.render` mounts the app, while the background circle, eyes, and mouth use fixed dimensions calculated from `width`, `height`, and radius constants. The mouth’s path is produced by `d3.arc()`, with start and end angles defining the open smile.

GGabe
94% match
Loading thumbnail…

Smiley Face

This example uses the React framework to construct a smiley face as an SVG graphic. The visualization is built from three modular components: a yellow background circle, two eyes, and a mouth. The mouth is generated using the `d3.arc()` API to create a path with a specified inner and outer radius. The face is centered within an 960 by 500 pixel SVG canvas using a translation transform. The code demonstrates how React components and D3's path generation can be combined for simple, declarative graphics.

KKeeran Bezuidenhout
94% match
Loading thumbnail…

Smiley Face (React & D3)

A React component renders a smiley face as scalable vector graphics (SVG), composed of a yellow background circle, two dark eyes, and a curved mouth. The face is assembled from reusable components—BackgroundCircle, Eyes, Mouth, and FaceContainer—which accept props for positioning and sizing. The mouth path is generated using D3’s `arc()` generator with specified inner and outer radii and angles, while the overall layout is centered via SVG transforms. The example demonstrates integrating D3 for geometry generation within a React component structure.

SSonja Ek
93% match
Loading thumbnail…

Smiley Face w/ SVG & D3

This example shows a smiley face composed of overlapping SVG shapes, assembled declaratively in React. The face includes a yellow background circle, two black eyes, and a mouth, all positioned relative to a center point. The code builds the mouth using d3’s `arc` generator with custom radius and angle settings, while the React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) render the SVG elements. Using d3.v6 and React 17, the visualization demonstrates reusable component composition and D3’s path generation for a simple, static graphic.

GGary Ditsch
93% match
Loading thumbnail…

Smiley Face Part III

This example renders a yellow smiley face with black-outlined circular eyes and a curved mouth using React and D3. The face is composed of reusable components—BackgroundCircle, Eyes, and Mouth—that are positioned within an SVG via a FaceContainer using a translate transform. D3’s arc generator creates the mouth path, while the face’s dimensions, eye placement, and stroke width are passed as props. The scene is static, with a fixed 960×500 SVG canvas.

Rrohame
93% match
Loading thumbnail…

Smile face

This example renders a yellow smiley face in an SVG using React and D3. The face is composed of a background circle, two eyes, and a mouth, all positioned relative to a center point. The mouth path is generated with the D3 `arc()` function, which creates a curved shape based on specified radii and angles. The React components structure the SVG elements, while D3 handles the geometric calculations for the mouth's arc. The illustration demonstrates a simple, modular approach to building shapes with reusable React components.

MMateusz Urban
93% match
Loading thumbnail…

Smiley face

This example uses React and D3 v6 to render a smiley face as an SVG. The face is composed of a yellow circle for the head, two smaller circles for eyes, and a mouth drawn with a D3 arc path generator. The code positions the head and features relative to calculated center coordinates, with the arc’s inner and outer radii defining the mouth’s thickness and its angles creating the smile. All shapes are centered within a 960×500 viewport using a translated group element.

KKibegwa
93% match
Loading thumbnail…

Smiley with React & D3

This example shows a classic smiley face rendered as an SVG graphic, centered on a 960×500 canvas. The face consists of a yellow circle with a black stroke, two eyes, and an arc-shaped mouth. The visualization is built using React to manage the SVG elements, while D3’s `arc` function generates the mouth’s path data by specifying inner and outer radii and angular start and end points. All shapes are declared declaratively within the React component and rendered via `ReactDom.render`.

Llaurence beattie
93% match