Soujanya C. Aryal

@soujanya957·3 public vizzes

Mouse Follower

A single black circle follows the mouse cursor across a blank SVG canvas. The circle’s position updates in response to mouse movement via a React state hook (`useState`) and an `onMouseMove` event handler. The example uses React 16.9 for component rendering and event handling, with the SVG element created directly in JSX. No external data or D3 functions are used; only React’s state management drives the dynamic repositioning.

Dec 30, 2023

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using JavaScript’s built-in `fetch` API. The code fetches a text file containing CSS named colors from a GitHub gist, then logs the raw text to the console. It showcases the minimal steps for retrieving external data without additional libraries, relying on the `fetchText` helper function to handle the asynchronous request and response. The example uses no external frameworks, just plain JavaScript within an HTML page.

Dec 30, 2023

Loading thumbnail…

DV with D3

This example shows a grid of 18 cartoon faces rendered in React with SVG. Each face consists of a yellow background circle, two black eyes, and a mouth drawn using the d3.arc() API, with randomized eye radius for variation. The reusable React components—Face, FaceContainer, BackgroundCircle, Eyes, and Mouth—are composed to build the visual. The faces are generated from a d3.range() array, and the entire scene is rendered into the DOM using ReactDOM.render().

Dec 30, 2023