Littlegreen8

@Littlegreen8·3 public vizzes

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered across the full browser window using React and SVG. It uses React 16.9 to create circle elements for the face, eyes, and a mouth, with positioning calculated from the window dimensions. The code leverages ReactDOM to render the component into the root element, and all drawing is done through SVG circle tags with fill and stroke attributes.

Jun 23, 2022

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.

Jun 23, 2022

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.

Jun 22, 2022