clapunzel

@clapunzel·3 public vizzes

Interactive Mouse

A circle follows the mouse cursor across a full-window SVG canvas, updating its position in real time. The visualization is built with React and renders an SVG circle whose center coordinates are bound to the current mouse position, tracked via the `onMouseMove` event handler. The example demonstrates how React state and event handling can drive dynamic, interactive graphics.

Jul 4, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of fetching and parsing a CSV file containing CSS named colors from a remote URL using JavaScript's `fetch` API. The code shows both the Promise returned by `fetch` and the subsequent Response handling, illustrating how asynchronous operations work. It defines an `async` function that retrieves the CSV text and logs the parsed content to the console. The example uses the `fetch` API with `.then()` chaining on the final result, highlighting the difference between pending promises and resolved responses.

Jul 4, 2021

Loading thumbnail…

Claudia's first FORK

A grid of 100 procedurally generated cartoon faces, each composed of SVG shapes, demonstrates how modular React components can be reused with randomized parameters. Built using `d3.range` to generate the array of 100 elements, the code renders each face via a `Face` component that composes `Head`, `Eye`, `Pupil`, and `Mouth` sub-components, with the mouth drawn using the `d3.arc` path generator.

Jul 3, 2021