Andy Curtis

@acurtis166·6 public vizzes

Fork of Mouse Follower

This example displays the file size, row count, and column count of a CSV dataset, dynamically updating the summary once the data finishes loading. It uses React hooks like `useState` and `useEffect` to fetch the data via `d3.csv`, and a helper function in `message.js` that leverages `d3.csvFormat` to calculate the size in kilobytes. The visualization is minimal, rendering a plain text message to the screen rather than any graphical chart, with the circle-following behavior absent from the provided code.

Aug 30, 2023

Loading thumbnail…

Fork of Mouse Follower

A yellow circle follows the mouse cursor across the full browser viewport. The visualization demonstrates unidirectional data flow in a React-like pattern: mouse movement triggers a `setState` callback that updates position coordinates, which are then rendered as circle attributes. Using D3 v7, the `viz` function binds an SVG element and updates `cx` and `cy` properties based on the current state. The initial position defaults to the viewport center before the first mouse interaction.

Aug 30, 2023

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across a full-screen SVG canvas. Clicking anywhere increases the circle's radius by one pixel. The example uses React's `useState` and `useCallback` hooks to manage the cursor position and radius state, with event handlers on the SVG element updating the component. It renders a single SVG circle, updating its `cx`, `cy`, and `r` attributes in response to mouse events.

Aug 28, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, printing the raw text to the browser console. Using the Fetch API with async and await, it retrieves a CSS Named Colors dataset from a GitHub gist. The code relies on D3 v5 for its distribution but does not yet perform any visualization or processing of the parsed values, serving as a foundational step for data ingestion in a React-based workflow.

Aug 28, 2023

Loading thumbnail…

Fork of Smiley Face Part III

Two versions of a cartoon smiley face are rendered as vector SVG graphics, one small and one large, with randomized eye and mouth sizes. Each face combines React components for its structure—such as `BackgroundCircle`, `Eyes`, and `Mouth`—with D3’s `arc` API to generate the mouth path. The SVG is drawn within a `FaceContainer` that translates a central coordinate group, while the dark stroke and yellow fill come from a basic circle element.

Aug 28, 2023

Loading thumbnail…

Smiley Face Part 1

This example displays a stylized smiley face constructed from basic SVG shapes, centered on a yellow circle outlined in black. The face is composed of three elliptical eyes and a curved mouth, all positioned symmetrically around the center. The code uses React to define reusable components, such as an `Eye` element, and leverages D3’s `arc` API to generate the mouth’s path geometry. The rendering is done via SVG within a 960x500 canvas, with all coordinates calculated from fixed constants.

Aug 27, 2023