sheetbag

@sheetbag·6 public vizzes

Loading Data with React & D3

This example demonstrates loading and displaying CSV data in a React application using D3’s `csv` method. It fetches a remote CSS color dataset from a GitHub gist, then formats the results to show the number of rows, columns, and file size in kilobytes within a preformatted text block. The React `useEffect` hook triggers the asynchronous data fetch, while `useState` manages the loading state, rendering “Loading…” until the data arrives. The output is styled with a large font and displayed as SVG, though the SVG markup is commented out.

Aug 27, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates two methods for loading and parsing CSV data from a remote URL, displaying the resulting row count, column count, and file size. It uses d3.csv with a Promise, and fetch with async/await combined with d3.csvParse to parse the raw text. The data comes from a gist-hosted CSV file containing CSS color names, and both approaches output results to the browser console and page elements. The example highlights the equivalent functionality of D3’s wrapper and native fetch with explicit parsing.

Aug 27, 2021

Loading thumbnail…

Gaffel_Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using both the `d3.csv` method and the Fetch API with `async`/`await` plus `d3.csvParse`. It displays the size in kilobytes, row count, and column count of the CSS Named Colors dataset from a GitHub gist. The interface is a single `<pre>` element updated via `textContent` in plain text. Both parsing approaches produce identical results, while commented code shows a nested Promise pyramid for comparison.

Aug 27, 2021

Loading thumbnail…

Mouse follower

A React-controlled SVG circle follows the user's mouse position across a 960×500 canvas, updating its coordinates on every `mousemove` event via the `useState` and `useCallback` hooks. The code imports `arc` from D3 v5 but does not use it, relying instead on React's synthetic event handling and direct SVG attribute updates. The circle’s center is bound to `mousePosition`, with an initial default at the canvas midpoint, and the page hides browser scrolling for a focused interactive demonstration.

Aug 27, 2021

Loading thumbnail…

React-sirkel

This example renders a single cartoon face composed of SVG shapes in a React component hierarchy. The face includes a wheat-colored background circle, two eyes, and a D3-generated mouth path created with the `arc()` API. The Face component composes reusable subcomponents (`BackgroundCircle`, `Eyes`, `Mouth`) inside a `FaceContainer` that positions the group at the center of a 960×500 SVG canvas. All visuals are static, produced with d3.v7 for the arc geometry and React 17 for DOM rendering.

Aug 20, 2021

Loading thumbnail…

How to make a smiley face pt1

A modular React component assembles a smiley face from separate circles and an arc. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` within a `FaceContainer` SVG group, translating to the canvas center. The mouth uses `d3.arc` with a fixed start and end angle to create a smile, while eye and mouth dimensions come from props. The example demonstrates component reuse with SVG primitives and D3’s arc generator, rendering a single static face.

Aug 19, 2021