100%

Smiley Face

✓ Published1🌍 Public

Last edited Apr 28, 2020

Created on Apr 28, 2020

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.

AI-generated description

Datavis 2020

Free Datavisualization online course by Curran Kelleher

Let's Make a Face Part I to VI

Let's Make a Face - Part I (HTML, CSS, SVG)

Let's Make a Face - Part II (React)

Let's Make a Face - Part III (React & D3)

Let's Make a Face - Part IV (React Components & ES6)

Let's Make a Face - Part V (multiple files with ES6 modules)

Let's Make a Face - Part VI (Compartmentalizing Complexity)

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

Ccharismooo

100% match

Loading thumbnail…

Smiley Face

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.

Ccharismooo

96% match

Loading thumbnail…

Smiley Face 1

A grid of eighteen randomly generated smiley faces fills the viewport, each face rendered through React components that assemble SVG circles for the head and eyes and a D3 arc path for the mouth. The `d3.arc()` API generates the mouth shape, while `Math.random()` varies each face’s stroke width, eye offset and radius, and mouth dimensions, resulting in a playful, diverse array of expressions. The SVG is composed in `FaceContainer`, which centers all elements via a translation group.

Kkizley

95% 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 eighteen randomly generated smiley faces, each rendered as an SVG composed of a yellow circle, two eyes, and an arc-based mouth. The code uses React components to structure the face, while D3’s `arc` generator defines the mouth path. Random parameters for stroke width, eye offset, and mouth radius make every face unique.

Ggaolinai8888

95% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces appears, each with randomized facial features and proportions. The faces are assembled from SVG primitives within a React component, using a yellow rounded rectangle for the head, black squares and circles for the eyes, and a D3 arc path for the mouth. The d3 `range` function generates the array of faces, and each face receives random values for parameters like eye offset, radius, and stroke width, producing a varied collection.

MMamveguh

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

Smiley Faces displays a grid of eighteen randomly generated cartoon faces, each with distinct eye size, eye offset, mouth thickness, and stroke width. The faces are rendered as SVG elements using React components for the face, skin, eyes, and mouth, with ReactDOM mounting the output. D3's `arc` generator creates the smile shape from a half-circle path, while `d3.range` produces the face count; all visual parameters are assigned via `Math.random()` at render time.

Ttorstenaan

94% match