ACS264

@ACS264·5 public vizzes

Fork of Smiley Face Part V

This example shows a simple cartoon smiley face composed of SVG shapes, rendered through a React component hierarchy. The face features a pink circular background with a blue stroke, two black eyes, and a mouth drawn as a curved arc. The code splits the visualization into separate ES6 modules for each facial part, using React fragments to group the eyes without extra DOM nodes. The mouth is generated with the d3.arc API, while the overall layout is positioned using SVG coordinate transforms with fixed pixel dimensions.

May 14, 2022

Loading thumbnail…

Heloo

This example displays a simple yellow smiley face drawn as a circle with two smaller black circles for eyes on a 960-by-500 SVG canvas. Rendered using React and ReactDOM within a single component, the visualization demonstrates the SVG `circle` element with props such as `cx`, `cy`, `r`, `fill`, and `stroke` for styling. The code draws only the face’s outline and eyes, leaving the mouth unfinished, as the README notes. The source uses static hardcoded coordinates rather than any data processing or animation library.

Apr 5, 2022

Loading thumbnail…

Hello HTML

A minimalist smiley face rendered as yellow SVG circles with black outlines, displayed inside a React component. The visualization uses React and ReactDOM to construct three circle elements—a large face and two smaller eyes—with hardcoded dimensions for width, height, and offsets. The page loads React from a CDN and includes a commented-out static SVG version, while the active code derives positions from center coordinates and stroke width.

Apr 5, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a simple yellow smiley face drawn with SVG circles, rendered through React. It uses React 17 and D3 v7 loaded via UMD builds from unpkg, with ReactDOM rendering the SVG elements directly. The code defines constants for layout dimensions and styles, demonstrating how to mix JSX with JavaScript expressions using curly braces to position the face’s eyes and outer circle. The visualization serves as a minimal starter template for integrating React and D3 in a web page.

Apr 5, 2022

Loading thumbnail…

Welcome to HTML

This example displays a simple SVG composition featuring two overlapping circles, creating a distinct target-like visual on a blank canvas. The larger yellow circle is outlined with a thick black stroke, while a smaller unfilled circle sits at its center, both positioned at the midpoint of the 960x500 viewport. The code demonstrates fundamental HTML structure with embedded CSS for page styling and inline SVG elements, using the circle tag with attributes for positioning, radius, fill, and stroke. It serves as a minimal introduction to web-based graphics rendering.

Mar 22, 2022