Drew Dudley

@dduldey·5 public vizzes

Loading Data with React and D3

This example demonstrates a React component that loads a CSV dataset of CSS named colors and displays a summary of its size and structure. The data loading process uses the `csv` method from d3.v7, while React’s `useState` and `useEffect` hooks manage the asynchronous fetch and update the component’s state. Once the data arrives, a custom message module computes the file size in kilobytes, row count, and column count, rendering the result in a large `<pre>` element.

Jan 7, 2022

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data with D3.js, displaying summary statistics about the dataset in a large-format text element. It fetches a remote CSS named-colors CSV file via d3.csv and reports the file size in kilobytes, row count, and column count. The visualization also includes commented-out alternative approaches using fetch, async/await, and d3.csvParse, showing different methods for handling CSV data. The output is rendered as plain text within an HTML pre element styled with a 7em font size, making the metadata the sole focus of the display.

Jan 5, 2022

Loading thumbnail…

Mouse Follower

A full-window SVG renders a single fixed-radius circle that tracks the pointer as it moves across the viewport. The circle’s center coordinates are updated via React state, managed through the `useState` and `useCallback` hooks, with each `mousemove` event on the SVG element. The initial position is centered at 480,250, and the code uses React 17 and D3 v7, though D3 is loaded but not actively used in the logic.

Jan 4, 2022

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces renders in React, each with randomized eye positions, eye radii, mouth widths, and stroke thicknesses. The faces are generated using D3 v7’s `arc()` generator for the mouth and SVG circles for the eyes and background. All components are React function components, with the overall layout using D3’s `range()` to create the array of faces. The SVG output is centered via a translation group.

Dec 28, 2021

Loading thumbnail…

Fork of Smiley Face

A yellow smiley face drawn in SVG appears centered on a dark canvas, with two black eyes and an open, arc-shaped mouth formed by a thick stroke. The visualization uses React to render the SVG elements and d3.arc to generate the mouth path, computing coordinates from fixed constants for eye offsets, radii, and stroke widths. All shapes are positioned relative to a central transform, with the face circle, eyes, and mouth defined declaratively.

Dec 17, 2021