Ahmad Wilson

@0x0I·4 public vizzes

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas. The circle's position updates on every mouse movement event. Built with React and D3.js v5, the application uses React's `useState` hook to track the cursor's coordinates and a D3 `arc` import, though the rendering itself is a simple SVG `<circle>` element whose `cx` and `cy` attributes are set from the current mouse position.

Jun 26, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and parse a CSV file using the browser's built-in Fetch API and the `response.text()` method. It retrieves a dataset containing CSS named colors from a remote GitHub Gist URL and logs the raw comma-separated text to the console. The visualization is minimal, displaying a static message styled with CSS, while the actual data processing occurs in the JavaScript console, providing a foundational template for loading external tabular data.

Jun 26, 2022

Loading thumbnail…

Smiley Face Part I

A grid of randomized smiley faces, generated using React components and rendered as SVG, fills the viewport. Each face combines a yellow background circle, two eyes, and a mouth arc created with the `d3.arc` generator, with all parameters like radii, offsets, and stroke widths varying randomly per instance via `Math.random()`. The `FaceContainer` translates each group into place, while the app produces multiple faces using `d3.range` and maps over them, with the rendering driven by ReactDOM into a shared SVG context.

Jun 26, 2022

Loading thumbnail…

Network Block Explorer

This interactive scatter plot, built with React and D3 v5, visualizes temperature over time using a connected line for each week's data. The visualization uses SVG rendering, with D3 utilities like `scaleTime`, `scaleLinear`, and `extent` for scaling, and `line` with `curveNatural` for the path. The data comes from the Sense Your City Dataset, loaded via D3's `csv` function. Axis components are custom React implementations that map scale ticks to SVG lines and text labels.

Mar 29, 2021