Skip to main content
SimilarExport ZIP
100%

dv2020-ep10-viz12 - Faces

✓ Published0🌍 Public
Zzach b.
Last edited Mar 7, 2023
Created on Mar 7, 2023

A grid of eighteen yellow circular faces with black stroke outlines, eyes, and mouths, each generated with randomized proportions and positioned in a fixed layout. The face components are built using React and rendered as SVG elements, with D3 v5 utilities `d3.range` for iteration and `d3.arc` for constructing the mouth path. Each face is independently parameterized by random scaling factors applied to face radius, stroke width, eye placement, and mouth dimensions. The example demonstrates modular component composition within a React rendering pipeline, where all faces share the same `faceSize` and `mouthWidth` inputs.

AI-generated description

"Let's Make a Face"

Project 1 of Dataviz 2020
Step six: face component

array of random faces.

Episode 10

MIT Licensed

Similar vizzes

Loading thumbnail…

dv2020-ep10-viz11 - Faces

The visualization shows a grid of eighteen identical cartoon faces, each rendered with yellow circular heads, black eyes, and a simple arched mouth. Built with React components, each face is composed of separate nested SVG elements—FaceCircle, Eyes, and Mouth—that are assembled inside a FaceContainer. The mouth shape is generated using the D3 arc generator, with its width controlled by a radian value, while the face dimensions and stroke widths are derived proportionally from a fixed faceRadius.

Zzach b.
95% match
Loading thumbnail…

dv2020-ep10-viz10 - Faces

Two identical cartoon faces sit side by side on a yellow background, each with black outlined circles, two black eyes, and an open mouth formed by a thick arc. The faces are constructed from reusable React components, including `Face`, `FaceCircle`, `Eyes`, and `Mouth`, which compute their geometry from parameters like `faceSize` and `mouthWidth`. The `Mouth` component uses the `d3.arc` API to generate the mouth path, while the entire scene is drawn as an SVG rendered by React 16.9 and D3 v5.11.

Zzach b.
92% match
Loading thumbnail…

dv2020-ep9-viz07 - Face

A minimalist SVG face drawn with React components renders a yellow circle, two black eyes, and a curved mouth on a blank canvas. The face is centered at 960×500 pixels, with features sized proportionally to the face radius. The mouth uses d3.arc() to create a smile path, while the eyes and face are simple React circle elements. All geometry is computed from constant variables in index.js, demonstrating modular component composition without any external data.

Zzach b.
91% match
Loading thumbnail…

dv2020-ep10-viz09 - Face

A smiling yellow face is rendered at the center of an SVG canvas, defined by a construction of reusable React components. D3's `arc` API generates the mouth shape, with its width controlled by a radian parameter, while circles compose the eyes and face outline. The visualization demonstrates component-based composition, separating concerns like `FaceContainer`, `FaceCircle`, `Eyes`, and `Mouth` for modularity.

Zzach b.
89% match
Loading thumbnail…

dv2020-ep10-viz08 - Face

This visualization shows a simple, stylized smiley face composed of a yellow circle, two black eyes, and a smiling mouth. It is built with React and rendered as SVG, using D3’s `arc` generator to create the mouth path. The face is centered within a 960×500 viewport, with all facial features sized relative to the main circle’s radius. The code demonstrates a modular component approach, separating the face container, circle, eyes, and mouth into distinct React components.

Zzach b.
89% match
Loading thumbnail…

dv2020-ep8-viz06 - Face

A yellow circle with a black outline forms a face, with two black circular eyes and a curved smile drawn as a filled arc path. The face is centered in a 960-by-500 SVG canvas and constructed as a React component. The code uses React and ReactDOM to render the SVG, while D3’s `arc` helper generates the mouth path with specified inner and outer radii, start and end angles, and a corner radius. The face, eyes, and stroke widths are proportionally defined relative to a base `faceSize` value.

Zzach b.
88% match
Loading thumbnail…

dv2020-ep7-viz04 - Face

A minimalist yellow face with black eyes and a thick black mouth arc is drawn using D3.js v5 within a React 16.9 application, rendered as an SVG. The code uses the `d3.arc` function to compute the mouth path, while circles define the face and eyes. The static composition centers on a 960x500 canvas, with the face’s diameter matching the canvas height.

Zzach b.
88% match
Loading thumbnail…

Face II

A grid of fifteen small, abstract faces, each with a yellow circular head, black outline, two eyes, and a smile-shaped mouth, demonstrates randomized facial feature placement within fixed SVG viewports. The React application renders each face using a composite of SVG primitives, with positional and dimensional parameters like eye offset, radius, and mouth curvature generated via `Math.random()`. The mouth shape is constructed using the D3 arc generator from the `d3` library, while the overall layout is produced with D3’s `range` function to map over a 5×3 array, yielding varied expressions across the collection.

DDavid
88% match