Gino (@gochoa1088), VizHub

Loading Data with React and D3

This example demonstrates how to combine React hooks with D3 for asynchronous data loading. The React component displays a summary of the loaded dataset using a `<pre>` element. The code uses the `useEffect` hook along with D3’s `csv` function to fetch a CSV file containing CSS named colors from a GitHub gist. Once the data arrives, the component renders its size in kilobytes, row count, and column count using the `message` function. The visualization highlights the integration of React state management with D3’s data loading utilities.

Nov 14, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 within a React framework. It displays the size, row count, and column count of the CSS Named Colors dataset in a large HTML `<pre>` element. The code uses `d3.csv` to fetch and parse the remote CSV file, then computes metrics with `d3.csvFormat` and the resulting array’s properties. An alternative approach using `fetch`, `async`/`await`, and `d3.csvParse` is provided as commented-out code.

Nov 14, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas, its position updating in real time to mirror the user's movement. The example demonstrates state-driven rendering with React, using the `useState` hook to track cursor coordinates and the `useCallback` hook to handle `mousemove` events efficiently. The SVG is sized to the browser window, and the circle's center is set via `cx` and `cy` properties tied directly to the current mouse position state.

Nov 14, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 within a React framework. It displays the size, row count, and column count of the CSS Named Colors dataset in a large HTML `<pre>` element. The code uses `d3.csv` to fetch and parse the remote CSV file, then computes metrics with `d3.csvFormat` and the resulting array’s properties. An alternative approach using `fetch`, `async`/`await`, and `d3.csvParse` is provided as commented-out code.

Nov 14, 2022