but-whythough

@but-whythough·3 public vizzes

Fork of Let's Make a Face Part I

A yellow smiley face is drawn as a circle with black stroke, featuring two offset circular eyes. The React application uses hardcoded SVG dimensions and variables for positioning, rendering through ReactDOM. It demonstrates basic SVG circle elements with React components, using unexported constants for layout calculations.

Mar 30, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example displays a static smiley face drawn with overlapping SVG circles: a large yellow head, two smaller black eye circles, and a curved mouth implied by a dashed path. The face is centered on an 960×500 canvas, with stroke styling on the head for emphasis. The code uses React and ReactDOM to render a placeholder "Hello JSX" heading, while the actual face markup is hardcoded in the HTML alongside the bundled React libraries. The visualization does not include interactive behavior or data-driven updates.

Mar 10, 2021

Loading thumbnail…

Untitled

A smiley face drawn in yellow with black outlines animates by raising its rectangular eyebrows upward, holding, and then lowering them back. The face uses D3.js to construct SVG shapes, including circles for the eyes and an arc path for the mouth. The animation sequences through chained transitions, each lasting two seconds, to move the eyebrow group along the y-axis. The code relies on D3's `select` and `arc` functions, with a React-based HTML file providing the page scaffold.

Mar 10, 2021