Jordan Trémoureux

@JTremoureux·4 public vizzes

Loading data with React & D3

A bar chart appears after loading a CSS named color dataset, displaying the file size, row count, and column count of the loaded data. The React component uses the `useState` hook to manage the data asynchronously, with D3's `csv` function fetching the remote CSV file and updating the state once the data arrives. The example demonstrates a data-loading workflow in React using D3 v7, where the rendered message updates from a loading state to the dataset statistics.

Jul 6, 2022

Loading thumbnail…

Loading and Parsing csv data

This example demonstrates parsing CSV data from a remote source using D3 v7 in a minimal HTML page. It fetches a gist containing CSS named colors and parses it with `d3.csvParse` and `d3.csv`, logging the data size, row count, and column count to the console. The code contrasts manual `fetch` with async/await against D3’s built-in `d3.csv` promise API, highlighting both approaches for loading tabular data. The page itself shows only a static title, with all results displayed in the browser’s developer console.

Jul 6, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The example demonstrates state management in React, using the `useState` hook to track cursor coordinates and the `useCallback` hook to optimize the mouse move event handler. React renders the circle's position dynamically with a 20-pixel radius, starting at the center of a 960 by 500 viewport. The code uses React 16.9 and ReactDOM to render the SVG element, updating the circle's `cx` and `cy` attributes on every `mousemove` event.

Jul 6, 2022

Loading thumbnail…

Smiley Face Part 1

This example generates a grid of eighteen randomized smiley faces, each with a yellow circular background, black stroke, two eyes, and a curved mouth. The faces are rendered as SVG elements using React components and D3’s `arc` generator for the mouth path, with random values for stroke width, eye position, and mouth dimensions. All faces are positioned at the center of a 160-by-160-pixel SVG, produced by mapping over a D3 `range` array.

Jul 6, 2022