Ernie

@erniechen30825·8 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load a remote CSV file and parse its contents using the Fetch API. It fetches a raw text file containing CSS named color data from a GitHub gist and logs the resulting string to the browser console. The JavaScript code defines an asynchronous helper function, `fetchText`, which calls `fetch` and then extracts the response body with `response.text()`. No additional libraries are used; the example relies solely on native JavaScript async/await syntax for handling the asynchronous HTTP request.

Aug 27, 2023

Loading thumbnail…

Smiley Face Part VI

A grid of smiling faces displays randomized facial features, each composed of a yellow background circle with black strokes, two eyes, and a mouth. The code builds these faces with React components and SVG, using D3’s `arc` generator to create the mouth paths and `range` to generate an array of eighteen faces. D3 v7 and React are loaded via UMD scripts, with components like `BackgroundCircle`, `Eyes`, and `Mouth` composed within a `FaceContainer`.

Aug 27, 2023

Loading thumbnail…

Smiley Face Part V

A smiling face rendered as an interactive SVG diagram fills the browser window. The visualization is built from React components that compose a yellow background circle, two black eyes, and a curved mouth. The mouth shape is generated using the D3 `arc` function with specified inner and outer radii and start and end angles. The layout is centered dynamically based on window dimensions, with all facial features positioned relative to a central translation point.

Aug 14, 2023

Loading thumbnail…

Smiley Face Part IV

A smiley face is rendered as a scalable vector graphic that fills the browser window, with a yellow circular head, black stroke, two eyes, and a curved mouth. The React component uses D3's `arc` generator to create the mouth path, while positioning all elements relative to computed window center coordinates. The SVG is drawn with React elements, and the component imports `arc` from the `d3` library.

Aug 14, 2023

Loading thumbnail…

Smiley Face Part III

A large yellow smiley face spans the browser window, rendered as an SVG with black-stroked circles for the head and eyes, and a D3 arc path for the mouth. The React component, using d3.arc, calculates the mouth’s inner and outer radii and start/end angles to form a smile, while the face is centered via a transform. The graphic is built with react-dom and d3.v7, adapting its size to the viewport dimensions.

Aug 14, 2023

Loading thumbnail…

Smiley Face Part II

A yellow smiley face fills the browser window, drawn with SVG circles inside a React component. The face scales to the viewport dimensions, with a black-outlined head, two eyes, and a hidden mouth. The code uses React via `ReactDOM.render`, computing the center position from `window.innerWidth` and `window.innerHeight`, and applies an SVG `<g>` transform to place elements relative to the viewport center.

Aug 14, 2023

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, rendered as a single large circle with two smaller eye circles inside a central group. The face adapts to the viewport size by computing its dimensions from `window.innerWidth` and `window.innerHeight`, setting the face radius to half the window height. Built with React and ReactDOM, it uses static SVG circle elements positioned via the `transform` attribute, with coordinates calculated from constants for eye offset, eye radius, stroke width, and mouth radius. The code does not include any interactive or animated behavior beyond the initial static render.

Aug 14, 2023

Loading thumbnail…

Smilely Face Pt1

This example shows a simple smiley face composed of three circles: a large yellow circle outlined in black, and two smaller black circles for eyes. The circles are drawn as SVG elements within a 960 by 500 viewport. The visualization uses React for component structure and renders directly through inline SVG markup, with styling handled by embedded CSS. The code imports React and logs it to the console, though no interactive behavior or data is included beyond the static geometric shapes.

Aug 14, 2023