Skip to main content
SimilarExport ZIP
100%

dv2020-ep8-viz06 - Face

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

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.

AI-generated description

"Let's Make a Face"

Project 1 of Dataviz 2020
Step four: react components

Episode 8

MIT Licensed

Similar vizzes

Loading thumbnail…

dv2020-ep7-viz05 - Face

A simple smiling face is drawn in SVG using React and D3. The face consists of a yellow circle with a black stroke, two black eyes, and an arc-based mouth. The mouth is created with a d3.arc generator, which uses radius, stroke width, and angle calculations to position and shape it. The code renders the entire composition as a single SVG group translated to the center of a 960 by 500 canvas.

Zzach b.
95% 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.
95% 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.
95% 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.
94% 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.
94% match
Loading thumbnail…

dv2020-ep6-viz03 - Face

A stylized face is drawn with two black circles for eyes centered on a larger yellow circle, all rendered as SVG elements. The face uses computed positions and radii from constants such as `eyeRadius`, `eyeOffsetX`, and `eyeOffsetY`, with a black stroke for the head outline. The React application imports `React` and `ReactDOM` to render the `<svg>` directly into the DOM, using inline JSX and attributes like `stroke-width` to define visual properties.

Zzach b.
93% match
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.
90% match
Loading thumbnail…

The Face - Part V

A smiling face composed of a yellow circle, two eyes, and an arc-shaped mouth is rendered in SVG, centered within a 960 by 500 viewport. React 16.12 components structure the drawing, while D3 v5’s `arc` function generates the mouth path. The background circle uses a thick black stroke, and all elements are positioned via a single SVG translation.

RRubens
90% match