Skip to main content
SimilarExport ZIP
100%

D3 (Smiley Face)

✓ Published0🌍 Public
EEunSeon Ahn
Last edited Jan 9, 2022
Created on Jan 8, 2022
Forked from Hello HTML

This example builds a reusable smiley face from modular React components, using SVG circles for the face, eyes, and irises, and a D3 arc generator for the mouth. The face is defined by props like `centerX`, `centerY`, `eyeOffsetX`, and `mouthRadius`, allowing the composition to be parameterized and rearranged. The iris is drawn as a smaller green circle positioned over each eye, while the mouth uses `d3.arc` with specified start and end angles. The entire graphic is rendered inside an SVG container with a centered `<g>` transform, using React’s `ReactDOM.render` to mount the app.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 and React Smiley

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.

GGordon Yang
93% match
Loading thumbnail…

D3/React: Smiley Face

Built with React and D3 v7, this example renders a smiley face as an SVG. The code defines a React component that uses D3's `arc()` function to generate a mouth path with specified inner and outer radii, and defines circles for the face and eyes. The face and features are positioned using shared constants for width, height, and offsets. The component renders directly into the DOM via ReactDOM. The visualization demonstrates a hybrid approach, combining React's declarative markup with D3's geometry utilities for generating SVG paths.

SSujit Iwale
91% match
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
91% match
Loading thumbnail…

Smiley face

This example shows a smiley face built from an SVG in a React application, using D3’s arc generator to create the mouth, eyes, and ears. The face features a red circle with a green stroke, black eye circles, yellow ellipses, and purple ear arcs, all positioned relative to the center of the canvas. The code leverages `d3.arc` to define the curved shapes and React’s `ReactDOM.render` to insert the graphic into the page, demonstrating coordination between D3 geometries and React’s declarative SVG output.

MMalempatiSaranya
91% 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
91% match
Loading thumbnail…

Smiley Face Part III

This example shows a smiley face built with React and D3, rendered as an SVG graphic. The face consists of a gray circle head, two black eye circles, and a mouth drawn using a D3 arc path generator. React components structure the SVG elements, while D3’s `arc()` function defines the mouth shape with specific inner and outer radii and start and end angles. The code uses ReactDOM to render the component into the DOM, and SVG attributes control the positioning and styling of each shape.

MMainOlma
91% match
Loading thumbnail…

Smiley React Components & ES6

This example shows a modular smiley face built entirely from reusable React components, with separate Eye, Face, and Mouth elements composed into an SVG scene. It demonstrates how D3’s `arc()` generator creates the mouth’s curved path, while React’s props pass geometric values like eye offsets, radius, and stroke width. The code relies on React 18 and ReactDOM for rendering, D3 v7 for the arc, and SVG for all visual output. The face is centered at the viewport midpoint, with the mouth angle fixed between 120 and 240 degrees.

ZZoe Ferencova
90% 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
90% match