jamesc4

@jamesc4·4 public vizzes

Loading data with React & D3

This example demonstrates how to load external CSV data within a React application using D3 utilities, showing the data as raw text in the browser. The code uses React’s `useState` hook to store the fetched dataset and `useCallback` for memoization, while D3’s `csv` and `csvParse` functions handle parsing the remote CSV file, which contains named CSS colors. The app renders a simple message displaying the parsed data object instead of a chart, highlighting the initial data-loading pattern rather than visualization.

Jan 10, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the loading and parsing of a CSV file containing CSS named colors, displaying the file size, row count, and column count in a large text format. The visualization uses the D3.js v5 library to handle CSV parsing and formatting, while employing JavaScript's native fetch API with asynchronous functions to retrieve the data from a remote GitHub gist. The code specifically utilizes `d3.csvParse` and `d3.csvFormat` to convert between text and tabular data structures, and renders the resulting metadata as plain text within an HTML document.

Jan 10, 2022

Loading thumbnail…

Mouse Follower

A React component renders an SVG circle that tracks the mouse position across a 960 by 500 viewport. The app uses the `useState` hook to store the current cursor coordinates and the `useCallback` hook to handle the `onMouseMove` event on the SVG element. As the pointer moves, the circle’s `cx` and `cy` attributes update reactively via `setMousePosition`, with a fixed radius of 30 pixels. The interaction is purely client-side, with no external data.

Jan 10, 2022

Loading thumbnail…

Let's Make a Face Part I

A grid of eighteen tiny, simple faces, each with a yellow circular head, black outline, two eyes, and a curved mouth, fills the canvas. The faces vary slightly in stroke thickness, eye position and size, and mouth dimensions, creating subtle differences across the repeated pattern. Built with React and rendered as SVG, the example uses D3’s `arc` generator for the mouth paths and generates random parameter values via `Math.random` for each face. The components are modular, with separate files for the background, eyes, mouth, and container.

Jan 1, 2022