Mohsin Ali

@Ymjir·3 public vizzes

Loading data with react & d3

This example demonstrates how to load and summarize CSV data within a React application using D3 utilities. The interface displays a simple text report showing the data’s file size in kilobytes, row count, and column count. The code relies on React’s `useState` and `useEffect` hooks to manage the loading state, alongside D3’s `d3.csv` to fetch the remote dataset. The concise output is generated through a custom `d3.csvFormat` call within a helper module.

Jul 20, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading and parsing a CSV file of CSS named colors using D3 v7. The program fetches the remote dataset via `d3.csv` and then displays summary statistics—formatted size in kilobytes, row count, and column count—inside a `<pre>` element. It relies on `d3.csvFormat` to compute the data’s string length and `data.columns` to report the number of headers. The visualization is purely textual, showing how asynchronous data loading and parsing work without any graphical chart.

Jul 20, 2021

Loading thumbnail…

Mouse Follower

A single yellow circle follows the mouse cursor across a blank 960 by 500 pixel SVG canvas. The visualization reacts instantly to pointer movement, updating the circle’s center coordinates in real time. Built with React (16.9), it uses the `useState` hook to track the cursor position and an `onMouseMove` event handler on the SVG element to trigger each update. The circle is rendered as an SVG `<circle>` element, with its `cx` and `cy` properties bound to the current mouse coordinates.

Jul 20, 2021