ShreaShyam

@ShreaShyam·4 public vizzes

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG. The face consists of a yellow circle for the head, two black circles for eyes, and a d3 arc-shaped mouth, all positioned relative to the window dimensions. The code leverages React 16.9 for component rendering, ReactDOM to mount the app, and the d3 `arc` generator to define the mouth’s path. The SVG canvas fills the entire viewport, centering the graphic via a transformation.

Jan 10, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A smiley face is drawn as a yellow circle with black outline, two dark eyes, and a curved mouth. The code builds the face using React components for the SVG structure and D3’s `arc` generator to compute the mouth path. The face is centered within a 960 by 500 viewport, with the face circle, eyes, and mouth positioned relative to the center using SVG transforms and coordinate offsets. All shapes are rendered as SVG elements, with the mouth defined by an arc between 90 and 270 degrees.

Jan 4, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face appears as a single, static circle on a blank SVG canvas. The piece is a minimal fork of a tutorial, showing only the head’s outline with no facial features. The React application uses the `ReactDOM.render` method to inject an SVG element with a `circle` shape into the DOM. The circle’s position and dimensions are computed from the fixed `width` and `height` constants (960 by 500), with hardcoded attributes for fill, stroke, and radius. The code relies on React 17 and react-dom’s production UMD builds, rendering via standard SVG primitives.

Jan 4, 2022

Loading thumbnail…

Smiley face part 1

A yellow circle with a black outline forms the base of a smiley face. Two smaller, unfilled circles are positioned as the eyes. The visualization is rendered as static Scalable Vector Graphics (SVG) using HTML and CSS within a single `index.html` file. The code directly constructs the shapes using SVG `<circle>` elements, setting explicit coordinates

Jan 3, 2022