Smiley Face Part 6

100%

Smiley Face Part 6

✓ Published2🌍 Public

Last edited Mar 17, 2020

Created on Mar 15, 2020

A grid of twenty-five smiling faces fills the screen, each face randomly varying in rotation, stroke thickness, gradient colors, eye size and color, eyebrow position, and mouth dimensions. The faces are generated with React, rendered as SVG, and animated so eyebrows wiggle with random timing. Built from modular components, the visualization leverages the D3 arc API for mouth and tongue shapes and CSS variables for interactive hover effects that turn eyebrows blue.

AI-generated description

Smiley Face Tutorial with React. Following Curran's tutorial below but also including:

Basic hover effects on the eyebrows (turns them blue on-hover)
Animation to raise and lower the eyebrows (random number of times and speed)
Single parameter to select how many faces should appear on the x and y aspects of the svg (e.g. a rangeBasic of 5 gives 25 (5 * 5) faces)
Random variation on most parts of the face(s)

Source: Datavis 2020 Episode 10 - Let's Make a Face Part VI (React & D3) - Compartmentalizing Complexity

Looking forward to learning how to apply this logic to data visualizations!!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part 6(React.js Practice)

A grid of twenty-five randomly generated smiley faces fills the viewport, each face varying in eye color, facial proportions, and orientation. The faces are constructed from modular React components that compose SVG circles, rectangles, and D3 arc paths for the mouth and tongue. Animated eyebrows raise and lower at random intervals, and gradient fill backgrounds rotate per face. React’s component model, combined with D3’s arc generator, structures the visualization, while inline SVG animations and CSS hover effects drive the dynamic behavior.

Mmartin

92% match

Loading thumbnail…

Smiley Face Part VI

A grid of eighteen randomly generated smiley faces fills the screen, each with unique eye positions, radii, mouth sizes, and stroke widths. Built with React components, the visualization renders faces as SVG circles and paths. The code imports D3’s `arc` generator to create the mouth shapes and `range` function to produce the face array, while React manages the component hierarchy from `FaceContainer` down to individual facial features.

Jjwlam83

92% match

Loading thumbnail…

Smiley Part 1

A grid of twenty-four smiley faces fills the screen, each face generated with random variations in stroke width, eye position, and eye radius. The visualization uses React components to compose each face from separate background, eyes, and mouth elements, with the mouth drawn via a d3 arc path. Rendering occurs as an SVG, with faces positioned using a translated group element from the FaceContainer, and randomization applied through JavaScript’s Math.random on each render.

Aamiteshwarr

92% match

Loading thumbnail…

Smiley Face Part VI

A grid of eighteen randomly generated smiley faces displays the core components of a face—background, eyes, and mouth—each with randomized dimensions and stroke widths. Built with React and D3 v5, the visualization renders SVG elements through reusable components. The mouth uses a D3 `arc` generator to create an arc path, while the faces are positioned with SVG transforms.

Sstellnew

92% match

Loading thumbnail…

Smiley face part 5

A grid of 32 randomized smiley faces is rendered, each with a yellow circular background, two eyes, and a wavy mouth composed of alternating up-and-down arc segments. The faces vary in stroke width, eye position, and eye radius due to random values passed as props. Built with React and D3 v7, the visualization uses D3’s `arc` generator to create the mouth paths, while React components structure the SVG output. All faces are generated from a single `range(32)` array and rendered side by side, with the `SwiggleFace` component composing the head, eyes, and mouth layers.

VVBarn

92% match

Loading thumbnail…

Smiley Face Part VI

This example displays a grid of eighteen cartoon smiley faces, each with randomized facial features such as eye offset, eye radius, mouth width, and stroke thickness. Built with React and D3 v5, the visualization uses reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth generated via the `d3.arc()` API. Each face renders as an SVG element, and the random variation in parameters creates a playful, slightly irregular family of faces that remain centered within fixed 160 by 160 pixel viewports.

MMinh Luong

92% match

Loading thumbnail…

Smiley Face Part #1

A grid of randomly generated smiley faces is displayed, each with animated variations in eye size, mouth width, and stroke thickness, rendered as SVG. The visualization uses React components to compose each face, while D3’s `arc` generator creates the curved mouth shape. Random values from D3’s `range` and `Math.random` drive the per-face parameters, producing playful diversity across the 18 faces.

GGul Jamal Zim

92% match

Loading thumbnail…

Smiley Face Part 6

A grid of eighteen smiley faces, each rendered as an SVG, displays randomized facial features created through React components. The faces vary in stroke width, eye offset and radius, and mouth dimensions, producing a playful assortment of expressions. The code uses React 18 with functional components like `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, incorporating d3.v7’s `arc` generator for the mouth shape and `range` to generate the array of faces.

KKazSoftwareEngineer

92% match