Skip to main content
SimilarExport ZIP
100%

Fork of Smiley Face Part II

✓ Published0🌍 Public
YYenTingWu
Last edited Jul 7, 2021
Created on Jul 7, 2021

A React and D3 v7 composition renders a grid of yellow smiley faces, each built from reusable SVG components. The face includes a circular background, two eyes, a rectangular nose, and a smile-shaped arc generated with `arc()`. Five identical faces are rendered via `map()`, each positioned by a `FaceContainer` that translates an SVG group to the center. The example demonstrates component-based visualization, with D3 used specifically for the mouth's path calculation and React managing SVG element structure.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part II

A grid of smiling faces is rendered, each composed of a yellow circle, two eyes, and a curved mouth. The React application maps over an array created with `d3.range` to generate multiple `FullFace` components. Each face uses randomized `eyeRadius` and `mouthWidth` values to vary appearance. Rendering is done through React with SVG primitives, while the smile path is built using the `d3.arc` generator to create an SVG path element. The faces are placed within a fixed 150 by 150 pixel viewport, centered on a common origin.

Sseanmdalrymple@protonmail.com
95% match
Loading thumbnail…

Fork of Smiley Face Part IV

A grid of fifty identical yellow smiley faces renders in SVG, each face built from React components that compose a circular background, two eyes, and a curved mouth. The visualization uses D3's `arc` generator to construct the mouth path, while React manages the component hierarchy through props for positioning and sizing. D3's `range` utility generates the array of faces mapped into the React application, showing how D3 and React can work together to create repetitive generative art.

Mmumuste Mend
95% match
Loading thumbnail…

Fork of Smiley Face Part II

The visualization is a grid of 18 smiley faces, each rendered with a yellow circular background, two black eyes, and a curved mouth. Each face is a self-contained React component that composes smaller React components for the background, eyes, and mouth. The code uses the D3.js `arc` API to generate the mouth shape and React to build the SVG structure. The faces vary randomly in eye size, creating a subtle field of similar but slightly different expressions.

FFlorian Maas
95% match
Loading thumbnail…

Fork of Smiley Face Part III

Eighteen identical smiley faces, repeated in a grid, are rendered using React components and D3’s `arc` generator for the mouth. Each face draws a yellow background circle with a black stroke, two offset eyes, and an arc-based smile, all assembled via `FaceContainer` that applies a center translation. The visualization demonstrates component reuse with fixed props, using React-DOM for rendering into an SVG, while D3 v5 provides the `range` helper for the grid and trigonometrically computed arc paths.

SSreekar Reddy
94% match
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a grid of yellow smiley faces rendered in SVG, with each face composed of a circular background, two eyes, and an arc-shaped mouth. The code uses React components to modularize the face parts, including `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`, while leveraging D3's `arc` API to generate the mouth path. Each face is generated with randomized eye radius, and the faces are rendered as a collection via a React map over a D3 `range` array. The final output displays six columns and three rows of faces, each with varying eye sizes.

GGregS1290
94% match
Loading thumbnail…

Fork of Smiley Face Part II

A React and D3 v7 component renders a smiling face as an SVG graphic, composed of a yellow background circle, two black eyes, and a curved mouth. The face is drawn using reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth generated by the `d3.arc()` API. The SVG is centered within a 960×500 viewport, with all coordinates and dimensions defined as constants. The example demonstrates how to combine React’s component model with D3’s shape generators for declarative, data-driven visualization.

BBugGreen
94% match
Loading thumbnail…

Fork of Smiley Face Part III

A grid of randomly varied smiley faces is rendered, each face composed of a yellow circle, two eyes, and an arc-shaped mouth. The faces repeat across the screen, with slight randomness introduced to eye offset, eye radius, and mouth dimensions, making each face subtly unique. The visualization uses React components for structure, with D3's `arc` generator for the mouth path. SVG rendering via a shared `FaceContainer` handles the coordinate transforms, while React maps over a D3 `range` to generate the grid.

Ssz3g12
94% match
Loading thumbnail…

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
94% match