Fork of D3_Fork of Let's Make a Face Part II

100%

Fork of D3_Fork of Let's Make a Face Part II

✓ Published0🌍 Public

Last edited Nov 7, 2024

Created on Nov 3, 2024

Forked from D3_Fork of Let's Make a Face Part I

A grid of eighteen randomized smiley faces renders in SVG via React functional components. Each face uses `d3.arc` for its mouth, with `startAngle` and `endAngle` fixed to create a downward curve, while eye and mouth dimensions vary per instance through `Math.random()`. The `FaceContainer` applies an SVG group transform for centering, and `BackgroundCircle` draws the yellow head with a black stroke.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of eighteen yellow smiley faces, each with black outlines, eyes, and a curved mouth, is rendered as SVG. The faces are generated in React and D3 v7, using `arc()` from D3 to create the mouth shapes and `range()` to produce the array of components. Random eye radii vary the faces.

LLai Yi Ohlsen

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of twenty small, static smiley faces renders in an SVG canvas. Each face consists of a yellow background circle with a black stroke, two circular eyes, and a mouth drawn with d3’s `arc` generator, creating a half-circle from inner and outer radii. The React application maps over a `d3.range(20)` array to produce these faces, with randomized eye radii for slight variation. The SVG is structured through reusable React components, including `FaceContainer` for the coordinate transform and `BackgroundCircle` for the base shape.

Ppornpat234

94% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

Ten randomly generated smiley faces are rendered in a grid using React and SVG. Each face uses a yellow background circle, two eyes, and a mouth arc drawn with the d3.arc() API. The `Face` component composes smaller components for the background, eyes, and mouth, with all geometry positioned relative to a central transform. Randomized values for stroke width, eye offset, eye radius, and mouth dimensions are set inline via `Math.random()` during each render.

Uubik-valis

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

A grid of eighteen randomly generated smiley faces demonstrates the reusability of React components for data-driven SVG composition. Each face uses `d3.arc` to construct a smiling mouth, while circle elements form the eyes and face outline, with randomized parameters for eye offset, radius, stroke width, and mouth dimensions. The code builds reusable `Face`, `BackgroundCircle`, `Eye`, and `Mouth` components within an SVG container, iterating over values from `d3.range` to render multiple variations simultaneously.

JJacob Potvin

94% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a grid of eighteen randomly generated smiley faces rendered with React and D3 v7. Each face is composed of reusable React components for the background circle, eyes, and mouth, with randomized eye offsets, radii, and mouth dimensions. The face components are positioned within an SVG using a `<g>` transform, and the mouth is drawn with d3.arc, creating varied expressions across the grid.

AArin R. Greenwood

94% match

Loading thumbnail…

Fork of Smiley Face Part II

A grid of 18 randomly generated smiley faces is rendered with React and D3. Each face is composed of SVG circles and an arc-based mouth, with varying eye positions, radii, and mouth widths/curvatures per face. The D3 `arc` generator creates the mouth paths, while React components like `BackgroundCircle`, `Eyes`, and `Mouth` assemble each face within a translated SVG group.

Ggragors123@gmail.com

94% match

Loading thumbnail…

Fork of Fork of Smiley Face Part 3 (React + D3)

A grid of 18 randomly generated smiley faces demonstrates reusable React components combined with D3 shape generation. Each face uses `d3.arc` to draw a mouth, while eyes and a yellow background circle are built from SVG primitives inside a React component tree. The `FaceContainer` wraps children in an SVG `<g>` element with a translated coordinate system. Randomized props for stroke width, eye offset, eye radius, mouth width, and mouth radius make every face unique, showcasing how D3 utilities integrate with React’s declarative rendering.

DDmitry Bondar

94% match

Loading thumbnail…

Fork of Smiley Face Part V

A grid of eighteen randomized cartoon faces renders in SVG via React components, each face assembled from reusable parts like a yellow background circle, eyes, and an arc-based mouth. The code splits the Face, Eyes, Mouth, and FaceContainer into separate ES6 modules, using React Fragments to group the eye circles. D3’s `arc` generator creates the mouth path, while `d3.range` produces the arrangement of faces. Each face’s proportions—stroke width, eye offset, eye radius, and mouth dimensions—are assigned random values for variety.

CCaparino

94% match