Darren Grafton

@DarrenGrafton·6 public vizzes

Darren's Cactus

The visualization shows a large yellow circle centered on a dark background, intended as a cactus but currently rendered as a minimal face with a black outline. It uses React components to assemble SVG shapes, with d3’s `arc` generator for the mouth and plain SVG circles, polygons, and rectangles for eyes, nose, and teeth. The code imports d3 v6 and React 17, and renders statically without interaction or data.

Mar 1, 2021

Loading thumbnail…

Loading data into React

This example demonstrates how to load and summarize a CSV dataset within a React application using asynchronous JavaScript. The App component fetches data from a remote URL via the `fetch` API inside a `useEffect` hook, then parses it with D3’s `csv` function. Once loaded, it displays the file size in kilobytes, row count, and column count using a custom message module. While waiting for the data, the interface shows a “Loading…” placeholder. The visualization combines React hooks (`useState`, `useEffect`) with D3's data parsing and formatting methods (`csvFormat`).

Feb 28, 2021

Loading thumbnail…

Mouse Move and Load CSV

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across an SVG canvas, while a text overlay reports the size and dimensions of a CSV file loaded from a GitHub gist. The circle’s position updates via React’s `useState` and `onMouseMove` event. The CSV is fetched asynchronously using `fetch`, `async`/`await`, and parsed with `d3.csvParse`, displaying the file’s kilobyte size, row count, and column count. The scene uses React 16.9, D3 v6, and SVG rendering.

Feb 28, 2021

Loading thumbnail…

Reading a csv from gisthub

This example demonstrates how to fetch and read a CSV file hosted on GitHub Gist using the browser’s native Fetch API. The page displays a large title while the JavaScript asynchronously retrieves the raw text data from the provided Gist URL, using `fetch` and `response.text()` to log the content to the console. No visualization is rendered; the focus is on the basic pattern of loading external data in a React-free, plain HTML and JavaScript context, with CSS styling applied to the page body.

Feb 28, 2021

Loading thumbnail…

Darren's Vizhub face Part 4+

A grid of eighteen randomly generated smiley faces, each rendered with React and SVG, uses d3 to create the mouth arc and generate random values for facial features. The face, eyes, nose, and mouth are composed from separate React components, with each face receiving randomized properties like eye offset, radius, and tooth size via `Math.random()` and d3's `range` function. The resulting collection shows the variety possible through simple parameter variation, with each face displaying a distinct expression.

Feb 27, 2021

Loading thumbnail…

Darren's Vizhub face

This example visualizes a smiley face rendered as an SVG using React and D3. The face consists of a yellow circle, two eyes with white highlights, and a mouth drawn as an arc using the `d3.arc()` API. Positioning relies on React’s JSX with SVG elements, while D3 handles the arc path generation. The layout uses fixed coordinates and offsets derived from the viewport dimensions, with static styling applied via SVG attributes. No interactive or data-driven behavior is present.

Feb 27, 2021