dv2020-ep7-viz04 - Face

100%

dv2020-ep7-viz04 - Face

✓ Published2🌍 Public

Last edited Mar 7, 2023

Created on Mar 7, 2023

Forked from dv2020-ep6-viz03 - 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.

AI-generated description

"Let's Make a Face"

Project 1 of Dataviz 2020
Step three: d3.js

Episode 7

MIT Licensed

Similar vizzes

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.

96% match

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-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.

94% 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.

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.

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

91% 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…

dv2020-ep5-viz02 - Face

A hand-drawn face appears as a yellow circle with black eyes on a blank SVG canvas. The code manually positions three circle elements—one for the head and two for the eyes—using hardcoded coordinates, with the head outlined in black. This example uses no external data or libraries, relying solely on raw SVG markup within an HTML document. The rendering approach is direct manual SVG code, illustrating the foundational step of creating shapes without any JavaScript or visualization framework. The fixed dimensions of 960 by 500 pixels frame the static, non-interactive composition.

Zzach b.

89% match