kyleSpaulus

@kyleSpaulus·2 public vizzes

Loading data with React

This example demonstrates how to load and summarize a CSV dataset using D3 within a React application. It displays the file size in kilobytes, row count, and column count in a large `<pre>` element. The React component uses the `useState` and `useEffect` hooks alongside `d3.csv` to fetch and parse the data from a GitHub gist. The `message` helper function calculates the summary using `d3.csvFormat` to determine the formatted data length.

Aug 3, 2023

Loading thumbnail…

Interaction with React

A React component tracks the mouse pointer by updating SVG circle coordinates in response to mouse movement events. The `useState` hook stores the current mouse position, while `useCallback` defines an efficient move handler that calls `setMousePosition`. The circle re-renders at the new coordinates, demonstrating declarative state-driven updates. This example also loads a CSV dataset with D3's `csvParse` to display file size, row count, and column count in a separate `<pre>` element, mixing React for interactive visuals with D3 for data parsing.

Aug 3, 2023