ddrake

@d-drake·3 public vizzes

Loading Data with React & D3

This example demonstrates how to load and render CSV data in a React application using D3. It uses React’s `useState` hook alongside the `d3.csv` method to fetch and parse external data, then maps the results into visual elements. The program sets up a full-screen SVG canvas with fixed dimensions of 960 by 500 pixels, and the code structure highlights the integration of React’s component lifecycle with D3’s data-loading utilities for dynamic, data-driven visualization.

Jul 24, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example loads CSS named colors from a CSV file hosted on GitHub and displays a summary of the dataset as text. It uses D3 v5’s `d3.csv` method to fetch and parse the data, then reports the file size in kilobytes, the number of rows, and the number of columns. The code also includes commented-out alternatives using the Fetch API with async/await and `d3.csvParse`, as well as a nested promise “pyramid of doom” pattern for comparison. The rendered output is a simple `<pre>` element with large monospaced text.

Jul 22, 2021

Loading thumbnail…

Fork of Hello HTML

A grid of fifteen smiley-face SVG components, all sharing the same base geometry but with randomized eye radii, demonstrates a React-based approach to generative visual variation. Each face is assembled from dedicated sub-components—`BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`—which wrap SVG elements like `<circle>` and a d3 `arc()` path. The rendering uses ReactDOM to mount the component array, and the d3 `range` function generates the 5×3 layout.

Jul 22, 2021