Skip to main content
SimilarExport ZIP
100%

React Tut for Dataviz from FCC

✓ Published0🌍 Public
DDICKO Alhassane
Last edited May 29, 2021
Created on May 24, 2021
Forked from HTML Starter

A minimal static SVG drawing of a yellow circle with two smaller black circles, resembling a face, is rendered on a black background. The code uses plain SVG elements within an HTML file, with inline styles and a broken script tag. The visualization demonstrates simple geometric shapes and positioning, relying on React’s `react.production.min.js` from a CDN, though no React components or dynamic behaviors are implemented.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz_Tutorial

This example shows a simple static SVG scene of a yellow circle with a black outline, overlaid with two smaller black circles representing eyes, resembling a smiley face. The visualization renders entirely through inline SVG markup within an HTML page, using a fixed coordinate system and hard-coded dimensions. It loads React, though no components are instantiated, and the page also includes an inline script logging React to the console. The SVG elements are drawn directly with basic shapes, without any data binding or interaction.

7767576232@qq.com
85% match
Loading thumbnail…

Dataviz 1 - Face (React)

A simple face composed of three SVG circles rendered with React. The yellow head and two black eyes are drawn using React's JSX syntax within an SVG element, with dimensions defined as constants. It uses React 17 and ReactDOM to mount the component into the DOM, demonstrating basic React rendering of static SVG shapes without external data or interactivity.

RRyAlpha
85% match
Loading thumbnail…

Data Visualization

A solitary yellow circle with a black outline sits centered on a blank SVG canvas, rendered at 960 by 500 pixels. The example demonstrates the minimal setup for a React-based visualization, using `ReactDOM.render` to mount a single SVG `<circle>` element. The code imports React and ReactDOM, defines a functional component returning the SVG markup, and loads the production builds of React 16.9.0 from a CDN. This static shape serves as a starting point, with a commented-out section hinting at a future smiley face with two additional eye circles.

LLittlegreen8
84% 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
83% match
Loading thumbnail…

DV

This example presents a static SVG visualization of a simple face, constructed with three circles: a large yellow circle for the head and two smaller black circles for the eyes. The drawing is rendered directly in an HTML page using inline SVG elements, with CSS applied to remove page margins and hide overflow. The code loads the React 18.3.1 UMD production build from a CDN, though the visualization itself does not utilize any React components or JavaScript logic, relying purely on static SVG markup.

MM SRIKARA CHARYA
82% match
Loading thumbnail…

Untitled

This example renders a static yellow circle with two black circular eyes on an SVG canvas, mimicking a simple face. The visualization is built using React 17, with the outer shape and facial features defined directly as SVG circle elements. The page loads React from a CDN and logs the imported React object to the console, though no dynamic state or interactivity is implemented. The drawing is purely declarative, using fixed coordinates and radii for each shape.

EEUHaq
82% match
Loading thumbnail…

Dataviz 1 - Face Practice (React + D3)

This example builds a stylized face using React and D3 v7, rendered as SVG. It shows a static composition of a yellow circle for the head, two black circles for eyes, and arcs for a mouth and moustache, all positioned with SVG transforms. The code uses `d3.arc()` to define the mouth and moustache paths with specific inner/outer radii and angle ranges. React 17 renders the SVG elements, while D3 provides the arc generator, with all dimensions and offsets hard-coded.

RRyAlpha
82% match
Loading thumbnail…

Hello Visualization

A minimal, hand-coded SVG visualization renders a yellow circle labeled as a "Hello Visualization" example, with two smaller unfilled circles positioned as eyes to create a simple face. The static composition is drawn directly in the page markup using SVG circle elements, with CSS applied to the body to remove margins and hide overflow. The title and HTML structure indicate a basic React-based setup, though the visible implementation relies on raw SVG rather than React components or JavaScript logic. The example serves as a plain demonstration of fundamental vector graphics within an HTML document.

HHongan Zhang
82% match