Prince Rajasingh Paulraj

@princerajasingh·6 public vizzes

Fork of Fork of Mouse Follower

This example displays a simple text summary of a CSV dataset loaded from a GitHub gist, showing file size, row count, and column count. Built with React and D3.js v6, the app uses `d3.csv` to fetch and parse the data, then displays the formatted result within a styled `<pre>` element. The interface tracks the mouse cursor with a circle overlay, though the functional interaction is limited to this visual follower. The page relies on the `message` module to compose the summary from the parsed dataset.

Mar 1, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization updates the circle’s position in response to every mouse movement event. Built with React 16.9, it uses the `useState` hook to track the cursor’s `clientX` and `clientY` coordinates and the `useCallback` hook to handle the `onMouseMove` listener. The circle’s center is set via `cx` and `cy` attributes on the SVG `<circle>` element, with a fixed radius of 30 pixels.

Mar 1, 2021

Loading thumbnail…

Fork of D3 CSV Parsing

A circle tracks the mouse cursor inside an SVG canvas, updating its position in real time as the pointer moves. The React app manages the mouse coordinates through a stateful event handler, while D3 and ReactDOM handle the rendering. The code defines the canvas dimensions and circle radius, but the circle’s movement appears smooth and direct, with no interpolation or additional visual effects beyond the basic positional update.

Mar 1, 2021

Loading thumbnail…

D3 CSV Parsing

The example reads a CSV file of CSS named colors from a GitHub gist using d3.csv, then displays three summary metrics as plain text in an HTML pre element: the row count, column count, and file size in kilobytes computed via d3.csvFormat. The parsed data itself is not visualized; instead, the example demonstrates D3’s asynchronous CSV parsing and formatting API within a minimal vanilla JavaScript setup. The page uses D3 v6 loaded from a CDN, with no React components or SVG rendering involved.

Mar 1, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data by fetching a remote file and outputting its contents to the browser console. It uses the Fetch API’s `response.text()` method to retrieve the raw content from a GitHub Gist URL containing CSS named colors. The code defines an async `fetchText` helper that wraps the fetch operation for clarity. No visualization is rendered; the focus is purely on the data-loading step, with commented-out alternative code illustrating direct fetch usage.

Feb 28, 2021

Loading thumbnail…

Smiley Face Part I

A grid of 25 small, yellow, smiley-face icons, each rendered as a standalone React component using SVG. The faces have randomly varied eye radii, mouth radii, and mouth widths, demonstrating how component parameters can generate visual diversity. The code builds each face with separate `BackgroundCircle`, `Eyes`, and `Mouth` components, where the mouth uses `d3.arc` to create a curved path, and `d3.range` generates the 5x5 layout. The rendering is done via React's `ReactDOM.render` into an HTML page.

Feb 28, 2021