Smiley Face

100%

✓ Published1🌍 Public

Last edited Apr 28, 2020

Created on Apr 28, 2020

Eighteen randomly generated smiley faces fill the screen, each a variation of the classic icon. The faces differ in color, stroke width, eye position and tilt, and mouth shape, showcasing the output of modular components built with React and D3 v5. The visualization is rendered as SVG, with the `Face`, `EmptyFace`, `Eyes`, and `Mouth` components taking numeric parameters to compute geometry. The code uses D3’s `arc` for the mouth path and `range` for generating the array of faces, all composed within a React app.

AI-generated description

Datavis 2020 (free online course)

Practise Part: Let's Make a Face Part I to VI

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

Eighteen randomly generated smiley faces fill the viewport, each composed of a colored circle, elliptical eyes, and an arc-based mouth. The faces vary in face color, stroke thickness, eye position and tilt, and smile curvature, creating a playful grid of distinct expressions. Built with React components and D3 v5, the code uses D3’s `arc` generator for the mouth and `range` to produce the array of faces. All geometry is rendered as SVG, with random parameters scaled relative to a base size.

Ccharismooo

96% match

Loading thumbnail…

Smiley Face

Ccharismooo

96% match

Loading thumbnail…

Smiley Face

The visualization displays a grid of eighteen randomly generated smiley faces, each rendered as an SVG. Built with React and D3 v7, the code composes faces from separate components for the background circle, eyes, and mouth. The mouth uses D3's `arc()` to create a smile shape. Each face is generated with randomized values for stroke width, eye position and radius, and mouth dimensions, producing a playful variety of expressions.

IIverefiner

95% match

Loading thumbnail…

Smiley Face

A grid of 18 randomly generated smiley faces fills the screen, each with a yellow circular background, black outline, two blue eyes, and a curved mouth. The faces vary slightly in eye radius due to the use of `Math.random()`. The visualization is built with React components, rendering SVG elements, and leverages the D3 `arc` function to generate the mouth path. The `Face` component composes smaller reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, all coordinated through a `FaceContainer` that sets up the SVG coordinate system.

Aahora

94% match

Loading thumbnail…

Smiley Face Part I

Eighteen randomly generated smiley faces populate a grid, each rendered as a yellow SVG circle with black outlines, two eyes, and an arched mouth. The React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) compose the visualization, while D3’s `arc` API constructs the mouth path and the `range` function generates the face count. Randomized props for eye offset, eye radius, mouth radius, and mouth width vary each face’s expression.

BbeauMarko

94% match

Loading thumbnail…

Smiley Faces

The visualization displays a grid of 18 randomly generated smiley faces rendered as SVG elements. Each face features a yellow circular head, black stroke outline, two eyes, and a mouth drawn using a d3 arc path. The code uses React components, d3 v7, and the `arc()` API to construct each facial feature. Slight random variations in stroke width, eye offset, eye radius, and mouth dimensions make every face subtly unique.

NNaoto Nishimura

93% match

Loading thumbnail…

My Smiley Faces

The visualization shows a grid of eighteen smiley faces, each generated with randomized facial proportions derived from a shared base width and stroke width. A React app maps over a range of indices, rendering each face as an SVG composed of a yellow background circle, two black eyes, and a mouth arc. The code uses D3's `arc` API to define the mouth path, while React components structure the reusable face parts. Each face’s eye offset, eye height, eye radius, mouth radius, and mouth width vary randomly, producing a playful collection of distinct expressions.

Aalexislanz

93% match

Loading thumbnail…

Smiley Face Part I

Eighteen smiley faces form a grid, each with randomized facial features. A yellow circle with a black stroke serves as the head, while two eyes and an arc-shaped mouth vary in size and position. Built with React components, the visualization uses D3’s `arc` generator to construct each mouth path. The faces render as SVG elements within a container, with random values assigned to stroke width, eye offset, eye radius, and mouth dimensions via `Math.random()`.

Ttharuta

93% match