Ben

@orobor0s·4 public vizzes

Mouse Follower (orobor0s)

A circle tracks the mouse cursor across a 960 by 500 SVG canvas, demonstrating real-time interaction with React state. The example uses React hooks (`useState`, `useCallback`) to update the circle’s `cx` and `cy` coordinates from the `clientX` and `clientY` values of the `onMouseMove` event. Rendered as an SVG circle with a fixed radius of 30, the visualization directly mirrors pointer movement without animation or data transformations.

Aug 17, 2023

Loading thumbnail…

Loading and Parsing CSV Data (orobor0s)

This example demonstrates the result of loading and parsing a CSV file of CSS color names. The visualization displays three key statistics about the parsed dataset: its size in kilobytes, the number of data rows, and the number of columns. The program retrieves the remote CSV using the `fetch` API and then parses it with D3’s `d3.csv` method. The resulting data object is formatted back into text with `d3.csvFormat`, and the summary metrics are computed and rendered directly into an HTML `<pre>` element.

Jul 31, 2023

Loading thumbnail…

Smiley Face (orobor0s)

A grid of randomly generated smiley faces fills the view, each rendered as a yellow SVG circle with black outlines. The faces vary in eye placement and size, mouth thickness, and stroke width, created by mapping an array from `d3.range` through the React component `Face`. The code uses D3’s `arc` API to draw the mouth path, while React components like `BackgroundCircle`, `Eyes`, and `FaceContainer` compose the SVG structure within a fixed 160×160 canvas.

Jul 21, 2023

Loading thumbnail…

Frowny Face (orobor0s)

A frowny face rendered as a single SVG graphic, built with React and D3’s `arc` generator. The code defines the yellow circle face, two black eye circles, and a downward-curving mouth path created from a D3 arc with specified inner and outer radii, angles, and a vertical translation. The SVG canvas is fixed at 960 by 500 pixels, with all elements centered via a transform group. React 18 manages the component rendering, while D3 v7 supplies the geometric arc calculation. No data is loaded; the visualization is purely code-driven.

Jul 21, 2023