Skip to main content
SimilarExport ZIP
100%

Data Vis

✓ Published0🌍 Public
Oosh1rules
Last edited Oct 14, 2021
Created on Oct 14, 2021
Forked from HTML Starter

This example shows a static SVG representation of a smiley face, composed of three circles: a large yellow head with a black outline and two smaller black eyes. The visualization is rendered using raw SVG markup within an HTML page, though the page includes a script tag for React, the circles themselves are not generated or controlled by React code. The HTML and SVG are written directly, with the rendering approach being straightforward declarative SVG rather than data-driven visualization.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization with D3, JS, React

This example presents a static SVG drawing of a smiley face as a data visualization, using basic geometric shapes rendered through inline SVG markup. The visualization shows a yellow circle with two smaller black circles for eyes and a partial yellow arc for the mouth, all positioned within a defined viewport. The code relies on React 18.2.0 loaded via a UMD script and logs the React object to the console, while the SVG elements are defined directly in the HTML file rather than generated programmatically. The rendering approach is purely SVG-based, with no D3 or JavaScript animation logic present.

GGanesh Aguru
91% match
Loading thumbnail…

Data Visualization

A yellow circle with two black eye dots forms a simple smiley face, missing only the mouth to complete the expression. The visualization is rendered as static SVG shapes inside a fixed 960-by-500 viewport. It uses React 18, loaded via a UMD script tag, though the drawing itself is plain SVG markup rather than React-generated elements. The composition relies only on three circle elements, with no animation or interaction.

LLittlegreen8
90% match
Loading thumbnail…

DataVisCourse

A starter example shows a static smiley face built from three SVG circles on a yellow background, with two dark eye circles positioned inside a larger yellow face outlined in black. The visualization is constructed declaratively using React 18 and rendered directly through SVG elements in the DOM. The code demonstrates basic SVG circle positioning and styling attributes within a fixed 960 by 500 viewport, serving as an introductory template for further interactive or animated extensions. No data or dynamic behavior is present in the current implementation.

Ddzokesayi.s@gmail.com
89% match
Loading thumbnail…

Hello HTML

This example shows a static SVG smiley face composed of three circles: a yellow head with a black outline and two black eyes. The chart does not visualize any dataset or interactive behavior; it exists purely as a minimal demonstration. The code renders the circles directly in an SVG element within an HTML page, using React and ReactDOM production builds loaded from a CDN. The rendering approach relies on declarative SVG circle elements with explicit coordinates and radius values rather than any data-driven computation or charting library.

TTran Thanh Thi
89% match
Loading thumbnail…

DataViz

This example shows a single yellow smiley face rendered in SVG, with randomized facial features such as eye position, eye radius, mouth width, and mouth radius. The face is composed of reusable React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`) assembled within an SVG container. The code uses React 17 and D3 v7, specifically the `arc` generator from `d3` to draw the mouth path, while `range` from D3 creates an array of one face. Each render produces a uniquely generated face due to random values assigned to its proportions.

JJayesh Yadav
89% match
Loading thumbnail…

Dataviz Tutorial

This example displays a static smiley face rendered as an SVG, using a yellow circle with black stroke and two smaller black circles for eyes. The code imports React and ReactDOM, and renders an App component into the root div, though the visible graphic is placed directly in the HTML. The project uses React 17.0.2 from the unpkg CDN, with the SVG elements defined inline in the index.html file, while a separate style.css and bundle.js handle presentation and logic. The visualization is a simple, non-interactive illustration of basic SVG shapes within a React setup.

JJosh-B-Creative
89% match
Loading thumbnail…

Smiley Face

This example displays a static smiley face rendered as a yellow circle with two oval eyes, each containing a black pupil, and a curved mouth implied by the SVG shapes. Constructed with React 17 and plain SVG elements, the visualization uses hard-coded circle coordinates for the face and eyes, with yellow fill, black strokes, and thick stroke widths. The SVG canvas is set to 960 by 500 pixels, and the drawing is embedded directly in HTML without any interactive behavior or data-driven updates.

Rreshali35
88% match
Loading thumbnail…

Smiley

This example renders a simple smiley face using React and SVG. The visualization draws three circles: a large yellow head with a black stroke, and two smaller black circles positioned as eyes. The code leverages the React and ReactDOM libraries to mount the SVG graphic into an HTML page, with the circle elements defined using SVG properties for fill, stroke, position, and radius. No data is loaded or processed; the graphic is purely static.

SShreyansh shrey
88% match