awahl1

@awahl1·3 public vizzes

Fork of Smiley Face Part II

A yellow smiley face with black-outlined eyes is rendered to fill the entire browser window. Built with React and ReactDOM, the SVG face is drawn using circle elements, with its size and position computed from the window's dimensions. The face omits the mouth, leaving only the head and eyes defined by the code.

Jan 3, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote source using the Fetch API. The code defines an asynchronous function that fetches a text file from a GitHub gist containing CSS named colors, then logs the raw CSV response to the browser console. It illustrates the basic pattern of retrieving external data with `fetch` and handling the returned promise with `.then()`, including a commented-out alternative approach using nested promise callbacks. The page itself displays only a simple styled message, with no visual rendering of the parsed data.

Jan 3, 2023

Loading thumbnail…

Smiley Face Part I

This example renders a cartoon smiley face with a yellow circular head, black stroke outline, eyes, a curved mouth, and a beard made of small diamond-shaped polygons. The face is constructed with React components that compose SVG elements, using D3’s `arc` generator for the mouth path. The beard is generated programmatically by computing polygon points based on geometric constraints derived from the face and mouth radii. All visual elements are positioned relative to a central coordinate system, with the face centered in a 960×500 SVG viewport.

Dec 12, 2022