Fork of Smiley

Fork of Smiley face part 1

This gallery example shows a grid of fifteen randomly generated smiley faces rendered as SVG elements. Each face is composed of a yellow background circle, two eyes, and an arc-shaped mouth, with all facial features positioned relative to a central coordinate system. The code uses React components to encapsulate each part of the face, while the D3.js `arc()` API generates the mouth's path geometry. Random values for stroke width, eye offset, eye radius, and mouth dimensions create visual variety across the grid, demonstrating how parameterized React components can work with D3 for generative data visualization.

SSabbir

Fork of Smiley Faces

The gallery displays a grid of eighteen smiley faces, each constructed from a yellow circle with black eyes and a mouth. Faces are randomly varied in stroke width, eye radius, mouth width, and mouth radius, creating a playful ensemble. The visualization uses React components to assemble each face, with D3’s `arc` API generating the mouth path and `range` producing the layout. Rendered as SVG, the code sets explicit width, height, center coordinates, and random parameters per face.

AAchilleasTyrnenopoulos

Fork of Smiley Face Part 6

This gallery example renders a grid of procedurally generated smiley faces using React and SVG. Each face is composed of modular components—a background circle, eyes, and an arc-based mouth—that receive randomized dimensions for stroke width, eye offset, eye radius, mouth width, and mouth radius. The `arc` generator from d3 creates the curved mouth path, while React’s component composition and the `range` utility from d3 produce an array of 18 unique faces with varying features.

Hhukbk

Fork of Smiley Face Part III

This gallery example shows a grid of eighteen smiley faces, each rendered with randomized facial features such as eye position, eye radius, mouth width, and stroke thickness. The visualization is built using React components for modular structure, while D3 v5’s `arc` API generates the mouth paths. The faces are drawn as SVG elements, with a yellow background circle, black outline, and simple circular eyes, all positioned relative to a central coordinate system. The data is generated programmatically using D3’s `range` function to create a repeated array of faces.

PPinzhi

Fork of Smiley Face Part VI

This example displays a grid of eighteen randomly generated smiley faces, each composed of a yellow circle, two eyes, and a mouth. The faces are rendered as SVG components using React, with D3.js’s `arc` function calculating the path for the mouth’s curved shape. Each face’s dimensions, such as eye offset, eye radius, and mouth width, are randomized, producing a varied collection of expressions. The code leverages the `range` utility from D3 to generate the array of faces and ReactDOM to render the final composition into the DOM.

SSlodgar

Fork of Smiley Face Part 5

A grid of 18 randomly generated smiley faces, each composed of a yellow circular background, two black eyes, and a black arc-shaped mouth. The faces vary in stroke width, eye offset, eye radius, mouth radius, and mouth width due to randomized parameters. Rendered with React 18 and d3.v7, the code uses the D3 `arc` generator to create the mouth path and the `range` function to produce the grid layout. All faces are drawn as SVG elements within a shared container component.

Jjoneftali

Fork of Smiley Face Part VI

The gallery displays a grid of eighteen procedurally generated smiley faces, each with randomized facial features. Built with React components and D3’s arc generator, the code renders SVG circles for the face background and eyes, while the mouth uses `d3.arc` to create a curved path. Each face receives random values for stroke width, eye offset, eye radius, and mouth dimensions, producing varied expressions across the grid.

TTushar Dangayach

Fork of Smiley Face

A grid of React-rendered smiley faces fills the viewport, each face randomly varied in stroke width, eye placement, eye radius, and mouth curvature. The code composes reusable SVG components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) and uses `d3.arc` to define the mouth path. Each face is independently generated using `Math.random` within `d3.range`, yielding a playful, non-identical set of expressions.

Ttotallynormalpeep