Skip to main content
SimilarExport ZIP
100%

04-react components & es6

✓ Published1🌍 Public
Mmygynt679
Last edited Apr 8, 2023
Created on Apr 7, 2023
Forked from 03-react & d3

This example renders a smiley face in SVG using React components and ES6 destructuring. It imports the `arc` function from d3.v7 to generate the mouth path via `mouthArc()`. The `BackgroundCircle` component receives a radius prop, while the main `App` component composes circles, a rectangle, and the arc path inside a translated group. React 18 renders the visualization into the `#root` element using `ReactDOM.render`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example renders a smiley face using React components that generate SVG circles and a D3 arc path. The `BackgroundCircle`, `Eyes`, and `Mouth` components receive numeric parameters for radius, offsets, and stroke width, which are assembled within an SVG group translated to the canvas center. The mouth is created with the `d3.arc` API, producing a half-circle path. The final graphic demonstrates layered SVG primitives and D3 geometry within a React rendering pipeline.

Ccarlospereiraf
89% match
Loading thumbnail…

Hello HTML

This example shows a simple smiley face rendered as an SVG graphic using React components. The face consists of a yellow circle, two eyes, and a mouth arc, all composed through reusable React components like `BackgroundCircle` and `Eyes`. The code imports `arc` from D3 v7 to generate the mouth path, while React 18 handles component structure and rendering. Static values for geometry, such as eye offset and mouth radius, are defined in the main `App` component, which transforms the group to center the face in a 960×500 SVG viewport.

Jjsilvermanh
89% match
Loading thumbnail…

react components & es6

This example shows a simple smiley face rendered as an SVG, built with React components and ES6 syntax. The face consists of a yellow circle, two dark eye circles, and a mouth arc, all sized and positioned relative to the window dimensions. React 16.9 manages the component structure, while d3.v7 provides the `arc` generator to create the mouth’s path. The SVG is drawn with fixed pixel width and height, centered on the page, and uses stroke and fill attributes for styling.

JJane
89% match
Loading thumbnail…

React + D3 II , using components

This example shows a smiley face rendered as an SVG using React components for each shape, with D3 generating the mouth path. The face consists of a yellow circle with a black stroke, two eye circles, and an arc created by `d3.arc()`. React manages the SVG elements declaratively, while D3 provides the arc generator with specified inner and outer radii and start/end angles. The code uses React 16 and D3 v5, rendering directly into the DOM via `ReactDOM.render` with static positioning based on fixed dimensions.

NNicolás Troncoso
88% match
Loading thumbnail…

123

This example shows a simple smiley face rendered as an SVG using React components for structure and D3’s `arc` function to generate the mouth path. The face is centered with a yellow circle, two black eye circles, and a crescent-shaped mouth created via `d3.arc` with defined inner and outer radii and angular extents. Positioned offsets for the eyes and stroke width for the face outline are computed dynamically. The code integrates React 16.9 and D3 v5, rendering directly into the DOM via `ReactDOM.render`.

CChase Hall
88% match
Loading thumbnail…

Face Part IV

A React component renders a smiley face as SVG, composed of a yellow circular background, two black eyes, and a curved mouth path. The code imports the `arc` function from D3 v5 to generate the mouth’s arc shape with specified inner and outer radii and angles. Static dimensions and positions are defined as constants, and the component structure uses JSX within ReactDOM’s render call. The example demonstrates integrating D3 geometry utilities with React’s declarative component model, with no interactive behavior or data binding present.

Kkripton-it
88% match
Loading thumbnail…

Smiley Face Part 4

A smiley face rendered as an SVG using React components and D3’s arc generator for the mouth. The face is built from a yellow background circle, two dark eyes, and a thick black mouth arc, all centered via a translate transform. React 16 manages the SVG elements, while D3 v5 calculates the mouth’s path from angular start and end points. The code defines reusable components like BackgroundCircle and imports only the arc function from D3, demonstrating a minimal integration of both libraries.

Llshinton
88% match
Loading thumbnail…

React Starter

This example demonstrates a simple React component rendering an SVG smiley face using D3’s `arc` generator for the mouth and basic SVG shapes for the eyes and face. The code creates a circular gradient mask, applies it to the face, and positions two black circles for eyes relative to a translated center. Rendering uses React 16 and ReactDOM to mount the component, while D3 v5 provides the `arc` path calculation. The visualization is entirely static, with no interaction or data binding.

LLai Yen Ju
88% match