davebell

@davebell·4 public vizzes

Load Data into React

This example demonstrates how to load external CSV data into a React application using the `csv` method from d3. The code sets up a React component with `useState` to hold the fetched data, initially `null`, and applies a Promise to populate it once the request completes. It includes a minimal HTML page with React and d3 loaded via CDN, rendering to a root div. The visualization currently shows only a loading state or confirmation of data arrival, without additional chart elements.

Jul 14, 2021

Loading thumbnail…

D3 CSV

This example displays a text summary of a CSV file's contents, including its size in kilobytes, the number of rows, and the number of columns. The visualization uses D3's `d3.csv` API with a promise to fetch and parse the data from a remote GitHub Gist URL, then formats the results using `d3.csvFormat`. The output is presented as a simple, large-font text message rendered in an HTML `<pre>` element, demonstrating a minimal workflow for loading and summarizing tabular data with D3 v7.

Jul 14, 2021

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse across a blank SVG canvas, responding instantly to pointer movement within the viewport. The visualization uses React state and the `useCallback` hook to track client coordinates, updating the circle's `cx` and `cy` attributes through React's declarative rendering. The page loads React 17 and D3 v7 from a CDN, though the interaction relies solely on event handling rather than D3-specific APIs. The minimalist setup with a full-screen, overflow-hidden body ensures uninterrupted tracking.

Jul 14, 2021

Loading thumbnail…

Smiley Face Part 1

This example renders a grid of procedurally generated smiley faces using React and D3 v7. Each face is composed of SVG shapes—a yellow background circle, black eyes, and a mouth created with the d3 `arc` generator. The `Face` component composes smaller components (`BackgroundCircle`, `Eyes`, `Mouth`) inside a `FaceContainer`, while the `App` maps over an array of 18 faces, randomizing eye offset, eye radius, mouth width, and mouth radius for each. The result is a playful, varied collection of faces displayed in a fixed-size SVG canvas.

Jul 14, 2021