TulioChiodi

@TulioChiodi·4 public vizzes

Loading data with React & D3

A React application demonstrates asynchronous data loading with D3, using React state to track whether a CSV dataset is loaded. The app fetches CSS named colors from a GitHub gist via `d3.csv` and stores the parsed result in React's `useState` hook. The interface displays a simple text indicator that changes from "loading" to "loaded" once the data arrives. The example uses React 16.9, D3 v6, and renders only a plain text message rather than any SVG visualization, with the SVG markup present in the HTML file commented out.

May 13, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates reading a remote CSV file and summarizing its contents with three key statistics: file size in kilobytes, row count, and column count. It uses D3 v6’s `d3.csv` method to fetch and parse the data, then `d3.csvFormat` to measure the formatted string length. The results are displayed in a large preformatted text block. The data source is a GitHub-hosted CSS named colors table, and commented-out alternatives show `fetch` with `async/await` and `d3.csvParse` for manual parsing.

May 13, 2021

Loading thumbnail…

Mouse follower

A yellow circle follows the mouse cursor across an SVG canvas. The circle's position updates in response to mouse movement, starting at the center of the 960 by 500 viewport. The example uses React’s `useState` and `useCallback` hooks to manage the cursor coordinates, with the SVG `onMouseMove` event triggering state updates. The circle is rendered as an SVG `<circle>` element, and the React DOM handles re-rendering on each move.

May 13, 2021

Loading thumbnail…

Smiley face part I

A grid of randomly parameterized smiley faces is rendered with React and SVG. Each face uses D3’s `arc` generator to draw a mouth, while circles form the yellow background, black stroke, and eyes. Positions and sizes for eyes, mouth, and stroke are generated with `Math.random()` and D3’s `range` to produce 18 variations. The `FaceContainer` wraps all elements in a centered `<g>` transform.

May 6, 2021