luisforonda

@luisforonda·3 public vizzes

Fork of Let's Make a Face Part I

This example builds a simple smiley face entirely with SVG shapes rendered through React. It uses D3’s `arc` generator to create the mouth path, while the face, eyes, and stroke are drawn as basic `circle` elements. The face is centered via a `g` transform, with eye positions placed symmetrically around the center. The code defines all geometric constants, including radii, offsets, and stroke width, to produce a static yellow head with black outline and two empty eyes.

Feb 28, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered with a black outline, two eyes, and an implied mouth, centered on the screen. The face’s size adapts to the browser window. Built with React and ReactDOM, it creates SVG circle elements using JSX, calculating dimensions from `window.innerWidth` and `window.innerHeight`. The code positions the face with an SVG `<g>` transform and uses stroke width and radii to define the facial features.

Feb 27, 2021

Loading thumbnail…

Smiley part 1

This example displays a static smiley face drawn with SVG circles: a yellow face with black outline and two smaller circles for eyes, rendered at 960 by 500 pixels. The HTML page loads React and ReactDOM from unpkg, while the SVG markup sits directly in the body rather than inside the React component tree. The accompanying index.js imports React and ReactDOM, logs ReactDOM to the console, and defines a simple “Hello JSX” component rendered into the root div. The visual itself does not use React rendering for the smiley shape.

Feb 27, 2021