ajardev

@ajardev·4 public vizzes

Mouse Follower

A React component tracks the mouse position across the full browser window and renders a single SVG circle that follows the cursor in real time. The circle’s center coordinates update through the `useState` hook and the `onMouseMove` handler on the SVG element, which captures `clientX` and `clientY` from the event. Rendered using ReactDOM, the visualization demonstrates basic state-driven SVG interaction without any external data or animation library.

Aug 6, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization presents a radial burst of CSS named colors as equal-sized slices in an SVG, rendered with React. The code loads color data from a CSV file using D3’s `csv` utility, then shapes it into pie segments with `d3.pie` and draws them via `d3.arc`. React manages the component state and maps each data entry to a color-filled path, demonstrating a hybrid approach where D3 handles data processing and geometry, while React controls the render tree.

Jul 16, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v7, displaying a summary of the data in a large text block. It fetches a gist-hosted CSV containing CSS named colors, then uses `d3.csv()` to parse the file and `d3.csvFormat()` to compute its size in kilobytes. The output shows the file size, row count, and column count, making the data structure immediately visible. Alternative approaches using `fetch` with `async`/`await` and `d3.csvParse()` are included as commented code.

Jul 15, 2022

Loading thumbnail…

Hello HTML

This example renders a grid of smiley faces, each generated procedurally with randomized facial features. The code uses React components to compose SVG elements like circles and paths, while the D3 `arc` function creates each mouth. It demonstrates how to build reusable, nested visualization components with React and D3 together, rendering 18 distinct faces as SVG output.

Jun 12, 2022