Skip to main content
SimilarExport ZIP
100%

Data visualization course - Fork of Let's Make a Face Part I

✓ Published0🌍 Public
AAMK04
Last edited Sep 30, 2022
Created on Sep 29, 2022

A React-based smiley face is partially constructed using layered SVG circles. The example shows a yellow circular head with black stroke and two dark eye circles, leaving the face incomplete. The code imports React and ReactDOM from unpkg, renders a static SVG directly in the HTML, and uses JSX to display a “Hello JSX” heading via `ReactDOM.render`. The visualization runs in a browser with SVG rendering.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” plots a static smiley face using React and SVG primitives. The visualization shows a yellow circle head with two black eye circles, rendered directly in the HTML with hardcoded coordinates. React 17 and ReactDOM manage the page structure, while the facial elements are drawn as SVG `<circle>` elements with explicit fill, stroke, and stroke-width attributes. No interactive behavior or data binding is present; the example serves as a minimal, self-contained illustration of SVG drawing within a React shell.

LLejla Kafedzic
90% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face built from SVG shapes, with a yellow circular head and two black eyes positioned on a white background. The visualization uses React 17 to render the SVG elements directly in the HTML, relying on the React UMD build loaded from unpkg. The face is constructed with three `<circle>` elements: one large yellow circle for the head and two smaller circles for the eyes, with the head’s stroke and fill defined inline. The code does not implement any interactive behavior or data-driven features, purely displaying static SVGs.

Eeliya1th
90% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a simple smiley face using SVG primitives within a React application. The visualization displays a yellow circle with a black stroke for the head, alongside two smaller circles representing eyes, all positioned using explicit coordinates. The code uses React and ReactDOM to manage the rendering, while the SVG elements are defined directly in the HTML file. It also includes a JavaScript file that logs ReactDOM and renders a separate "Hello JSX" message, though the face itself is static and does not respond to interaction.

MManjot Pal Singh
90% match
Loading thumbnail…

Fork of Let's Make a Face Part 2

This interactive React visualization draws a simple smiley face using SVG primitives. A yellow circle with a black stroke represents the face, while two smaller circles serve as eyes at fixed positions. The code computes layout values such as center coordinates and stroke width, then renders the shapes via ReactDOM. It uses React 17 and relies on SVG circle elements for rendering.

AAleksandarNe11
90% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This interactive example displays a cartoon smiley face rendered as a yellow circle with black outline and two smaller circles for eyes. The visualization uses React and SVG primitives, with fixed coordinates for each circle element directly in the markup. The React code, using `ReactDOM.render`, injects only the face’s main circle into the DOM, while the static HTML includes the eye circles. The overall scene is a simple part one of a face-building exercise, showcasing basic SVG circle placement within a 960 by 500 viewport.

TTestDataGuy
90% match
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face built from three SVG circles—a large filled face and two smaller eyes—on a 960 by 500 canvas. The face is rendered directly in HTML using React 16.9.0, with both React and ReactDOM loaded from unpkg CDN. Instead of a data source, the visualization relies on hard-coded coordinates for positioning, while SVG’s native circle elements handle the drawing, with a black stroke outlining the face. It does not display any interactive or dynamic behavior, remaining a static composition.

TThais Scheneider
89% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A simple React application renders a yellow smiley face as an SVG graphic. It uses hard-coded coordinates and constants to draw three circles: a large face outline with a black stroke, and two smaller black circles for eyes. The code defines variables for the SVG canvas dimensions, face center, stroke width, and eye offsets, then renders the elements using JSX. The visualization demonstrates basic SVG shape composition within a React component, with no interactive or data-driven behavior.

DDawn
89% match
Loading thumbnail…

Fork of Let's Make a Face Part I

A React application renders a smiley face as a static SVG graphic, showing two black eyes on a yellow circular head with a black outline. The components are built using React’s `createElement` syntax within JSX, and rendered into the DOM via `ReactDOM.render`. The layout is computed from fixed constants for canvas width, height, center coordinates, and eye offsets, with SVG circle elements specifying positions and radii. The project uses React 17 and ReactDOM, with the visualization serving as an introductory exercise in declarative SVG drawing.

AAliKhanShujat
89% match