Skip to main content
SimilarExport ZIP
100%

Changing Faces

✓ Published0🌍 Public
JJacklyn Turner
Last edited Oct 31, 2019
Created on Sep 25, 2019

The visualization displays a grid of smiley faces whose colors and facial features change randomly every two seconds. Each face is rendered as SVG shapes built from React components, using D3’s arc generator to draw the mouth. The background fill color for each face is selected from the CSS named colors dataset loaded via d3.csv. The faces refresh automatically through an HTML meta refresh tag, producing a continuously shifting mosaic of colors and expressions.

AI-generated description

This visualization combines two examples demonstrated by Curran: The Smiley face implementation with React & D3 and the MDN CSS Colors data set. The color dataset was used as the background fill for the smiley faces. This is set to refresh on a 2 second timer so the colors and faces are changed at each refresh.

MIT Licensed

Similar vizzes

Loading thumbnail…

smiley

A grid of randomly generated smiley faces fills the screen, each face composed of a yellow circular background, two eyes, and an arc-shaped mouth, with variations in eye position, eye radius, and mouth size for each face. The visualization is built with React components that structure each face, while D3’s `arc` generates the mouth path and D3’s `range` creates the 18-face grid. Rendered as SVG, the faces use a random-number generator for their facial feature attributes, producing a playful, varied composition.

Ssophievanderhorst
88% match
Loading thumbnail…

Different color smiley faces

This example renders a grid of interactive smiley faces, each with a distinct color and face size. The faces track the user's mouse movement, with the face container re-centering and resizing in response to cursor position. The visualization is built using React for component structure and state management, while D3’s `arc` function generates the mouth shape. Each face’s eye color and radius are set with random RGB values, and the SVG is updated dynamically via mouse event handlers.

NNita
88% match
Loading thumbnail…

Smiley Face Part V

In this React-based visualization, a grid of 21 smiley faces re-renders every half second, with each face displaying randomly shifted pupils within its eyes. The faces are composed of modular ES6 components for the face circle, eyes, and mouth, using React Fragments to group SVG elements. D3’s arc generator creates the eye and mouth paths, while a `setInterval` triggers ReactDOM renders to animate the pupils, whose offsets are calculated with `Math.random()`. The SVG output uses simple shapes with black strokes and yellow fills, as defined in the accompanying CSS.

JJames Rhodes
88% 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
87% match
Loading thumbnail…

Hello Face

The visualization displays a grid of procedurally generated smiley faces, each with randomized facial features and stroke widths. It demonstrates how React and D3 can be combined to create reusable SVG components, with d3’s `arc` API generating the mouth shapes while React’s component structure handles the face, eyes, and background circle. The faces are rendered as SVG elements, with each face’s properties like eye offset and mouth radius varied randomly to produce unique expressions.

MMATTE-blz
87% 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
87% 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
87% match
Loading thumbnail…

SMILEY FACE DATA VIZ

A grid of smiley faces demonstrates randomized variation in facial features and color. Using React components for structure and D3.js for the mouth arc, the example maps random values to stroke width, eye size and placement, mouth radius and width, and HSL fill hue. Each of the 18 faces is generated with distinct parameters, showcasing modular SVG composition.

GGarrett Siegel
87% match