charles-duron

@charles-duron·4 public vizzes

Loading data using React

This example combines React and D3 v7 to create a smiley face whose eyes jitter randomly on each render. The face is drawn with SVG primitives, including a linear gradient for the face, and D3’s `arc` API generates the mouth path. React components compose the face, eyes, and mouth, while `useState` and `useCallback` track mouse movement to position a separate outline circle, demonstrating interactive SVG rendering in a React framework. The source data is entirely procedural, with no external data loading.

Nov 6, 2022

Loading thumbnail…

Loading & parsing CSV data

This example demonstrates how D3 loads and parses external CSV data by fetching a remote file and displaying a summary of its contents. The code uses `d3.csv()` to retrieve the dataset from a GitHub gist URL, then calculates and presents the file size in kilobytes, the number of rows, and the number of columns directly on the page. The resulting message is rendered inside an HTML `<pre>` element via the `textContent` property, with `d3.csvFormat()` used to measure the data’s string length for the size calculation. The example also defines an unused `fetchText` helper with the Fetch API.

Nov 6, 2022

Loading thumbnail…

Mouse follower

This example shows a simple smiley face that follows the mouse cursor across a 960-by-500 SVG canvas. The face is drawn with a yellow linear gradient, two elliptical eyes, and a d3.arc-generated mouth, all assembled from React components. As the user moves the mouse, the React state updates the circle’s center coordinates via the `onMouseMove` handler, re-rendering the face at the new position. The code uses React’s `useState` and `useCallback` hooks, along with d3’s `arc` for the mouth path, and renders everything as SVG elements.

Nov 6, 2022

Loading thumbnail…

Smiley face part I

A grid of randomly sized smiley faces is rendered, each with a yellow radial gradient face, elliptical eyes, and an arc-based mouth. The faces are generated using React components that compose SVG elements, with d3’s `arc` generator shaping the mouth and the `range` function creating the array of faces. D3 v7 and React 16.8.6 work together, applying randomized eye dimensions for variation across the repeated smiley faces.

Nov 1, 2022