seanware

@seanware·3 public vizzes

Mouse Follower

A yellow circle follows the mouse cursor as it moves across an empty SVG canvas. The React component tracks pointer coordinates via the `onMouseMove` event and updates the circle's `cx` and `cy` attributes in response. The implementation uses React's `useState` and `useCallback` hooks with ReactDOM to render the SVG, providing an interactive demonstration of mouse tracking without any data source.

Jul 28, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example loads a CSV file and parses it into a data array for visualization. The code uses D3's `d3.csv` method to fetch and convert the tabular data, making it ready for binding to DOM elements. The parsed rows are then available for further processing, though the visualization body itself remains empty in the provided markup. The illustration focuses on the data-loading step, demonstrating how external CSV files integrate with a D3-based rendering pipeline.

Jul 28, 2020

Loading thumbnail…

Let's Make a Face Part I

A modular React component builds a smiley face from SVG shapes, with a yellow background circle, two eyes, and a curved mouth rendered via d3.arc. The face’s position, sizes, and offsets are passed as props, while a FaceContainer groups elements around a translated origin. The example demonstrates reusable SVG composition with React and D3 v5.

Jul 28, 2020