Mouse Move and Load CSV

100%

Mouse Move and Load CSV

✓ Published1🌍 Public

Last edited Feb 28, 2021

Created on Feb 28, 2021

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across an SVG canvas, while a text overlay reports the size and dimensions of a CSV file loaded from a GitHub gist. The circle’s position updates via React’s `useState` and `onMouseMove` event. The CSV is fetched asynchronously using `fetch`, `async`/`await`, and parsed with `d3.csvParse`, displaying the file’s kilobyte size, row count, and column count. The scene uses React 16.9, D3 v6, and SVG rendering.

AI-generated description

A program that follows your mouse with a circle

And then also loads a CSV with fetch, async and await, and parses it with d3

MIT Licensed

Similar vizzes

Loading thumbnail…

Loading data using d3 and Mouse Follower

This example demonstrates loading a remote CSV dataset with d3.csv in a React application, displaying the file size, row count, and column count in a large text element. A black SVG circle follows the mouse cursor across the viewport using React’s useState and useCallback hooks to track and update the pointer’s clientX and clientY coordinates. The code imports React and ReactDOM, creates an SVG with dimensions 960 by 500 pixels, and sets the circle’s center to the current mouse position. The CSV data comes from a GitHub gist containing named CSS colors.

Sshresthabhi

87% match

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates a circle that follows the mouse cursor within an SVG canvas. It shows interactive tracking by rendering a single circle whose position updates based on mouse movement events. The implementation uses React with the `useState` and `useCallback` hooks to manage and update the circle's coordinates. Mouse movement is captured via the SVG's `onMouseMove` event handler, which extracts the `clientX` and `clientY` properties. The circle is drawn using ReactDOM's rendering into an SVG element, with a fixed radius of 30 pixels within a 960x500 viewport.

Hhukbk

86% match

Loading thumbnail…

Mouse Follower

A circle tracks the mouse cursor across an SVG canvas, moving fluidly with each pointer movement. Clicking the canvas loads a CSV file from a remote GitHub repository, then calculates and displays the average temperature recorded at the Friman Metsola collective. The visualization uses React's `useState` and `useCallback` hooks, with D3's `csv()` function parsing the data, while the circle's position updates through an `onMouseMove` event handler. The SVG circle and text overlay are rendered within a full-screen viewport.

SShiryaW

84% match

Loading thumbnail…

MouseMover

This example demonstrates a React application that loads a CSV dataset and displays a message about the number of rows it contains. The application uses the `d3.csv` API to fetch data from a remote gist URL, and the React `useState` hook to manage the loading state. A large, centered message shows either "Still Loading" while data is being fetched, or the row count once the CSV is parsed. The visualization is minimal, focusing on the data-loading workflow rather than graphical rendering, with a large 13em font size for the text output.

FFahimeh Saleh

83% match

Loading thumbnail…

Mouse Follower

This visualization displays metadata about a CSS named colors dataset, including row count, column count, and file size, rendered as large text that follows the mouse cursor across the screen. The React component fetches the CSV data using d3.csv, then formats the statistics with d3.csvFormat in the Message function. The example combines React’s useState and useEffect hooks for data loading with D3 v7 for CSV parsing, while the oversized pre tag creates the interactive mouse-following effect in an SVG-less plain HTML layout.

Wwaur1024

83% match

Loading thumbnail…

Fork of Mouse Follower

This example displays a moving circle that follows the mouse cursor, while also loading and summarizing a CSV dataset of CSS named colors. The circle’s position updates reactively based on pointer movement, and the data summary reports the file size in kilobytes, row count, and column count. The project uses D3 v5’s `csv` loader to fetch the remote data, and React with hooks (`useState`, `useCallback`) to manage state and rendering updates.

VVenkat

82% match

Loading thumbnail…

Mouse Follower and Data with React & D3

This visualization demonstrates how to integrate D3.js within a React application. A large circle follows the mouse cursor across the screen, while a `pre` element displays summary statistics about a dataset loaded from a CSV file containing CSS named colors. The code uses React's `useState` and `useEffect` hooks to manage state and fetch the data via `d3.csv`. The `message.js` module calculates the file size in kilobytes, row count, and column count using `d3.csvFormat` and displays these metrics alongside the interactive mouse follower.

Ppengw6

82% match

Loading thumbnail…

D3 Color Parser plus mouse move

A React-based SVG visualization parses the CSS named colors dataset from a CSV file using d3.csvParse, then renders a small black circle that follows mouse movements across the full-screen viewport. The component tracks the pointer position via a React useCallback event handler and updates the circle’s cx and cy coordinates in real time. The example demonstrates integration between React state management, D3’s parsing utilities, and SVG mouse-event handling in d3.v7.

Ddan815

82% match