erin

@zyyerin·3 public vizzes

css named colors

This example demonstrates the full set of CSS named colors by fetching a CSV file from a GitHub gist and logging its contents to the console. The page uses the Fetch API’s `fetchText` function to asynchronously retrieve the raw CSV data, then calls `.then()` to output the text. While the code currently only prints the data, it sets up a foundation for visualizing the colors, though no rendering or charting library is yet applied. The example relies on standard web APIs and plain JavaScript, with no external visualization framework.

Oct 2, 2024

Loading thumbnail…

Smiley face

A grid of 50 smiley faces is rendered, each with a yellow circular head, brown stroke outlines, simple rectangular eyes, a brown arc mouth, and radial-gradient blush circles with randomized sizes for variety. The visualization is built with React and D3, using D3’s `arc` generator to create the mouth path and `range` for the array of 50 faces. The SVG output is composed of modular components for the background, blush, eyes, and mouth, all positioned via a translated group in an SVG container.

Sep 26, 2024

Loading thumbnail…

Fork of Smiley Face Part II

A responsive smiley face drawn with React and rendered as SVG, positioned at the center of the viewport. The face uses a yellow circle with a black stroke, two black eye circles offset symmetrically, and dynamically calculates the face radius from the window height. The code leverages `window.innerWidth` and `window.innerHeight` to set the SVG dimensions, with React rendering the shape via JSX and `ReactDOM.render`. All facial features are defined by constant offsets and radii, producing a static, scalable illustration.

Sep 19, 2024