dv.5-10 - Smiley Face

100%

dv.5-10 - Smiley Face

✓ Published1🌍 Public

Last edited Feb 13, 2023

Created on Apr 3, 2020

A grid of eighteen randomly generated smiley faces continuously re-renders every 400 milliseconds. Each face is composed of React components that use SVG circles for the background and eyes, and a D3 arc generator for the mouth. The code applies random values to facial features like eye radius, stroke width, and mouth dimensions, while the face background color is randomly assigned via RGB values. The example demonstrates building modular, reusable visualization components in React with D3.

AI-generated description

Result of following Curran Kelleher's "Let's Make a Face" tutorial series.

--
Datavis 2020 #6-11

MIT Licensed

Similar vizzes

Loading thumbnail…

Smiley Face

A grid of randomized smiley faces appears, each rendered as a yellow circle with black outline, two eyes, and an arc-shaped mouth. The faces are generated using React components that compose SVG elements, with D3’s `arc` function calculating the mouth path. Random values for stroke width, eye offset, eye radius, and mouth dimensions create variation across the 18-face layout. The example demonstrates reusable React components and D3 integration for declarative SVG generation.

YYibo Zhang

92% match

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces renders in React, each with randomized eye positions, eye radii, mouth widths, and stroke thicknesses. The faces are generated using D3 v7’s `arc()` generator for the mouth and SVG circles for the eyes and background. All components are React function components, with the overall layout using D3’s `range()` to create the array of faces. The SVG output is centered via a translation group.

DDrew Dudley

92% match

Loading thumbnail…

Smiley Face Part V

This example displays a grid of eighteen randomly generated smiley faces, each rendered as an independent React component. The faces vary in stroke width, eye position and radius, and mouth thickness and curvature. The visualization uses React with D3’s `arc` generator to create the mouth paths, while SVG circles compose the background and eyes. All faces share the same center point within a 160×160 viewport, and the code relies on `Math.random()` to produce each face’s unique attributes.

AAnthony Zornig

92% match

Loading thumbnail…

smiley face

A grid of randomly generated smiley faces fills the screen, each rendered as a yellow circle with black strokes, two eyes, and a curved mouth. The code creates 18 variations using React components and D3's `arc` generator for the mouth paths, with randomized dimensions for stroke width, eye position, eye radius, and mouth parameters. The SVG faces are generated in a React app from the `range` utility in D3, with each face re-rendered with different random values.

Kknpoblete

92% match

Loading thumbnail…

Smiley Face w/ React

A grid of 18 randomly generated smiley faces demonstrates how React components can be composed with D3-generated SVG paths. Each face uses reusable React components for the face, eyes, mouth, and teeth, with randomized properties like eye radius, mouth width, and teeth position. The mouth is drawn using `d3.arc()` to create a variable-width smile path, while all other shapes are plain SVG elements. The example combines React's component model with D3's arc generator to produce varied, data-driven visual output.

SSatyam Sundaram

92% match

Loading thumbnail…

Smiley Face(s)

A grid of randomly generated smiley faces fills the viewport, each face a modular composition of SVG elements built with React components. The d3 library provides the arc function for mouth shapes and a range operator to generate the face count. Each face’s features vary, including eye offsets, radii, stroke widths, and mouth dimensions, producing a playful collection. The rendering uses SVG inside React, with properties passed as props to modular components like Eyes, Pupils, and Tongue, demonstrating a reusable, data-driven approach to visual variation.

JJoe Hutchins

92% 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

92% match

Loading thumbnail…

Smiley Face

A grid of 18 smiley faces renders in React with SVG, each face generated with randomized eye offsets, eye radii, and mouth dimensions. The face components compose reusable subcomponents—BackgroundCircle, Eyes, Mouth, and FaceContainer—to build the layered SVG structure. D3's arc generator creates the curved mouth path, while the spread of faces shows how varying parameters produce distinct expressions. The rendering uses ReactDOM to mount the app and d3.range to generate the face array.

JJBayne07

92% match