stpvizzy

@stpvizzy·2 public vizzes

Fork of Let's Make a Face Part I

A stylized smiley face built with React and D3 renders as a yellow circle with black stroke, two eyes, and a mouth. The face is constructed from reusable React components, with D3’s `arc` generator creating the mouth’s curved path. All shapes are drawn as SVG elements inside a centered `<g>` transform, using fixed numeric values for positioning and radii. The code organizes components for the background, eyes, mouth, and face container, with no external data—only hardcoded geometry. This example demonstrates modular component composition and D3’s shape API within a React rendering pipeline.

Mar 16, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-window smiley face using React and SVG. The face consists of three circles—a yellow head, and two eyes—drawn with SVG `<circle>` elements inside a `<g>` transform, with dimensions and positions computed from `window.innerWidth` and `window.innerHeight`. The code uses React 16.9.0 and ReactDOM directly from UMD builds to mount the component onto a `<div id="root">` element. The face is centered dynamically, but no mouth is drawn despite the title referencing a smiley face.

Mar 16, 2021