stackedchips

@jeremybacani·3 public vizzes

Interaction

A React application renders an SVG circle at the center of a 960×500 canvas. Moving the mouse over the SVG logs the pointer’s client coordinates to the browser console via the `onMouseMove` event handler. The visualization demonstrates basic interaction handling, using React 17 and ReactDOM to manage the SVG element, with no external data visualization libraries.

Mar 1, 2021

Loading thumbnail…

Loading and Parsing CSV dat

This example demonstrates how to fetch and parse CSV data in a React-friendly environment using the native Fetch API. The code defines an asynchronous function, `fetchText`, to retrieve a CSV file containing CSS named colors from a GitHub gist and log its raw text to the console. It showcases a minimal approach to loading external tabular data without any visualization library, relying solely on JavaScript promises and template literals for URL handling.

Mar 1, 2021

Loading thumbnail…

Smiley Face

A grid of fifteen yellow smiley faces, rendered with React and SVG, uses the D3 arc API to draw each mouth. The faces are generated from a single `Face` component, which composes separate `BackgroundCircle`, `Eyes`, and `Mouth` components. Each face is identically parameterized with fixed offsets and radii, and the array from D3's `range` function replicates the component across the canvas. The SVG output is translated to center each face, using D3's `arc` for the mouth path.

Mar 1, 2021