Fork of Smiley Face Part III

KKonstantinos Kotsiaridis

Fork of Smiley Face Part III

This example shows a modular, reusable smiley face built as a React component hierarchy, composed of separate circle and arc elements for the background, eyes, and mouth. It demonstrates how to combine React’s declarative component model with D3’s `arc` generator to produce SVG shapes. The `Face` component assembles the `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with all geometry controlled via props such as `eyeOffsetX`, `eyeRadius`, and `mouthRadius`. The resulting SVG is rendered to the DOM using `ReactDOM.render` with fixed pixel dimensions.

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

Fork of Smiley Face Part III

This example shows a smiling face built with React and D3, rendered as SVG shapes. The code combines React’s component model with D3’s `arc` generator to draw the mouth as a path, while circles define the face, eyes, and stroke. It uses fixed numeric constants for dimensions and positioning, and renders the entire composition inside a single SVG element. The example demonstrates an idiomatic hybrid approach where D3 handles geometry generation and React manages the DOM updates.

BBurak Senel

Fork of Smiley Face Part I

A React and D3 v5 example renders multiple smiley faces in an SVG grid. Each face uses reusable components for the background circle, eyes, and mouth, with the mouth’s arc generated by D3’s `arc()` generator. Random eye radii and a fixed mouth shape vary each face. The `FaceContainer` applies a centered translation, and React’s `map()` over a `range(4*3)` array creates a 12-face layout.

MMaher Ali Rusho

Fork of Smiley Face Part III

This example shows a modular, component-based smiley face built with React and rendered as SVG. The face’s features are separated into reusable components—FaceBackground, Eyes, and Mouth—each accepting props for size, position, and styling. The mouth uses D3’s `arc` generator to create a curved path, while the face background is a simple circle with a yellow fill and black stroke. The app assembles these components in `index.js`, passing fixed dimensions and coordinates to create a single centered face on a 960×500 canvas.

MMateus Marodim

Fork of Smiley Face Part III

This example shows a smiley face composed of SVG shapes, built with React components and D3’s arc generator. The background circle and eyes are rendered as JSX elements, while the mouth uses the `d3.arc()` API from `mouthArc.js` to define a path with inner and outer radii and angled endpoints. All shapes are centered via a translated `<g>` group inside a fixed-width SVG. The code separates reusable pieces like `BackgroundCircle` into distinct modules, combining React’s declarative structure with D3’s geometry helpers.

Rredeath96

Fork of Smiley Face Part V

This example renders a smiley face as a reusable set of React components, splitting the drawing across separate files for the background circle, eyes, and mouth. Each component receives its geometry through props, and the main SVG is assembled in `index.js` using React DOM. The mouth is generated with the `d3.arc()` generator, while the eyes and background are plain SVG circles. The code uses React 16.9.0 and d3 v5, with the face centered on a 960×500 viewport.

Yyungchiau

Fork of Smiley Face Part V

Yyungchiau