Justin Olson

@jsolson4·4 public vizzes

Fork of Smiley Face Part V

This example shows a smiling face composed of modular React components: a yellow background circle, two eyes, and an arc-shaped mouth, all rendered as SVG. The face is centered within a 960×500 viewport, with positioning controlled by properties such as `centerX`, `centerY`, `eyeOffsetX`, and `eyeOffsetY`. The code imports React, ReactDOM, and D3’s `arc` generator to define the mouth path. Components are split across separate ES6 module files, and React Fragments group the eyes without extra DOM elements. The rendering uses SVG elements inside a `<g>` transform for translation.

Jan 2, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and D3.js version 7. The visualization is composed of three separate components: a yellow background circle with a black stroke, two black eye circles, and a mouth drawn with a D3 arc path. The code uses D3’s `arc()` API to generate the mouth’s curved shape, while the face elements are positioned relative to the center of the viewport. The SVG output is sized to match the browser window’s inner dimensions.

Jan 2, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

A static SVG face with a yellow circular head and two black eye circles is drawn directly in the HTML body, while a React app renders a separate "Hello JSX" heading into a root div. The face uses fixed coordinates for the circles, with the head centered at (480, 250) and eyes offset horizontally. The code loads React and ReactDOM from CDN and relies on the bundle.js script for the React component, though no interactive behavior is demonstrated.

Dec 31, 2021

Loading thumbnail…

I am the captian now!

This example displays a giant, centered message reading “Hello HTML asdfasdfa captain!” using the CSS `font-size` property at 13em, which scales based on the root font size. The page is a minimal HTML document with a single styled `div` element, and it does not use any JavaScript libraries or data sources. The rendering approach relies entirely on static HTML and inline CSS, with no interactive or dynamic visualization behavior present.

Dec 30, 2021