Skip to main content
SimilarExport ZIP
100%

Data | Make a Face Part 2 - React

✓ Published1🌍 Public
AAndreRGunawan
Last edited Sep 9, 2021
Created on Sep 8, 2021

This example visualizes a face using geometric shapes—a yellow circle for the head and two smaller black circles for eyes—composed with React and rendered as SVG. It positions each element relative to fixed center coordinates and offset constants, using a stroke to outline the head. The code relies on React 16.9 and ReactDOM to mount the App component into the DOM, drawing all shapes declaratively with SVG circle elements.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Make a Face Part II with React

Yellow-and-black SVG facial features are drawn on a 960 by 500 canvas, with a large circular face, two eyes, and an implied smile, all positioned using fixed pixel coordinates. The React component `App` renders nested `<circle>` elements for the face and eyes, computing their centers from `centerX`, `centerY`, and offset constants. React 16.13.1 and ReactDOM manage the mounting into the `#root` element, while the SVG output is structured with inline JSX attributes like `stroke-width`. The visualization demonstrates declarative, component-based geometry without external charting libraries.

Ooliver488
91% match
Loading thumbnail…

Dataviz 2020_Ep6 - 2. Face Part 2 (React Basic Setup)

A stylized face is drawn using two SVG circles for eyes and one larger circle for the head, all rendered in yellow with a black outline. The visualization uses React with ReactDOM to render the SVG elements, and the code defines constants for positioning attributes like center coordinates, offset distances, and radii. The face is centered on a 960 by 500 canvas, with the head's radius calculated from the canvas height and stroke width. This example demonstrates a basic React setup for creating simple geometric data visualizations.

MMinwoo Pak
90% match
Loading thumbnail…

Make a Face Part I

This example shows a yellow circle centered in an SVG canvas, with two smaller black-outlined circles positioned symmetrically to suggest eyes, leaving the face incomplete. The visualization is built using React 17 and renders directly to SVG elements. The main face is defined with a `circle` element using `cx`, `cy`, and `r` properties, while the eye shapes are hardcoded with fixed coordinates. The code sets the canvas dimensions to 960 by 500 pixels and imports React and ReactDOM from UMD builds to mount the app into the root div.

Jjohn19696
89% match
Loading thumbnail…

Face Part II

This example displays a simple face constructed from three SVG circles: a large yellow head with black stroke and two smaller eyes. The static visualization uses React and ReactDOM for structure, with the circles defined directly in the HTML. The code demonstrates JSX rendering through the App component, while the SVG elements are present in the DOM alongside the React-managed content.

RRichard Premvaree
88% match
Loading thumbnail…

Face Part II

A simple SVG face graphic displays a yellow circle with black outline for the head and two smaller circles for eyes. The React component in index.js uses JSX to render the SVG elements, calculating dimensions and positions from constants like `centerX`, `centerY`, `radius`, and `eyeOffsetX`/`eyeOffsetY`. ReactDOM renders this component into the page, with dependencies loaded via unpkg for React 17. The code demonstrates basic composition of SVG shapes within a React application, producing a static visual without interactivity or data.

Kkripton-it
88% match
Loading thumbnail…

Lets Make A Face Part II

This example uses React and ReactDOM to render a static SVG face. The visualization shows a yellow circle with black stroke as the head, and two smaller black circles as eyes, positioned on a 960 by 500 canvas. The code directly embeds SVG elements, including circles with specific coordinates and styles, within the HTML page, while React manages the page structure. The rendering approach relies on raw SVG markup rather than a charting library.

AAyamSrivastava
88% match
Loading thumbnail…

Let's Make a Face Part II

A face is drawn as a yellow circle with a black outline, accompanied by two smaller black circles serving as eyes, positioned symmetrically around the center. The visualization is built with React, using inline SVG elements to render the shapes, with all coordinates and dimensions defined as constants. The React `render` method places the composed SVG into a root `<div>` element, and the page imports React and ReactDOM from unpkg CDN links.

Eeladabramovich
88% match
Loading thumbnail…

Part 1 of making face

This visualization builds a simple face from basic SVG primitives, placing a yellow circle with a black stroke as the head and two smaller filled circles as eyes. The face is drawn directly in the HTML markup rather than through React components, despite the page loading both React 18 and ReactDOM for the bundled application. The SVG canvas is 960 by 500 pixels, with eye positions calculated from the center point at 480,250, offset to the left and right. The code includes a commented-out formula for centering elements based on dimensions and stroke width.

RRaghuram Lekkala
88% match