Paulo Dandrea

@Paulo-Dandrea·4 public vizzes

Fork of Loading Data with React & D3

This example demonstrates loading CSS named color data from a CSV file and displaying a summary of its size, row count, and column count as text. The visualization uses React state via the `useState` and `useEffect` hooks to fetch data asynchronously with D3’s `csv` function, then renders the result through a custom `message` function that formats the statistics. The page shows “Loading...” until the D3 v5 CSV parsing completes, after which the formatted summary appears in a large monospace font.

Jan 20, 2022

Loading thumbnail…

Fork of Loading data in React

This example shows a React application that renders an SVG circle which follows the mouse cursor across a 960 by 500 coordinate space. The circle updates its position in real time using React’s `useState` hook to store the mouse coordinates, triggered by the `onMouseMove` event handler on the SVG element. The `useCallback` hook memoizes the event handler, and `ReactDOM.render` mounts the component into the DOM. The visualization demonstrates state-driven rendering with SVG, where every mouse movement causes a re-render that moves the circle.

Jan 20, 2022

Loading thumbnail…

Loading data in React

A React application demonstrates mouse tracking by rendering a single SVG circle that follows the cursor. The component uses React's `useState` hook to store the mouse position and a `useCallback` hook to handle the `onMouseMove` event, updating the circle's `cx` and `cy` attributes. The visualization renders through ReactDOM into an SVG element with a fixed 960 by 500 viewport, showing how React state drives interactive SVG updates without any external data loading or D3 dependencies.

Jan 20, 2022

Loading thumbnail…

Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960-by-500 viewport. The component tracks pointer coordinates via the `onMouseMove` event handler, updating React state with the client X and Y positions, which are then bound to the circle's `cx` and `cy` attributes. The visualization demonstrates real-time state-driven SVG manipulation using React hooks (`useState`, `useCallback`) and ReactDOM, with no external data source or animation library.

Jan 19, 2022