adante111

@adante111·4 public vizzes

Loading data with React and d3

A React application loads a color-name dataset from a GitHub gist using `d3.csv`, then displays summary statistics about the dataset in a `<pre>` element as plain text. The component uses React’s `useState` and `useEffect` hooks to manage the asynchronous data-fetching lifecycle, showing "Loading..." until the data arrives. The code includes reusable SVG face components built with `d3.arc` and `d3.line`, though the main view focuses on reporting the file size in kilobytes, row count, and column count. The rendering uses React’s virtual DOM with SVG elements.

Sep 8, 2023

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates loading a remote CSV file and parsing it with D3.js, displaying basic dataset statistics as large text. It uses `d3.csv` to fetch and parse the data from a GitHub Gist, then reports the approximate size of the formatted output in kilobytes, the number of rows, and the number of columns. The page also includes commented-out code showing an alternative approach using the `fetch` API with `async`/`await` and `d3.csvParse` for manual text parsing, but the active path relies on D3's built-in CSV handling.

Sep 8, 2023

Loading thumbnail…

Fork of Smiley Face Part 1

A yellow smiley face is rendered with React and SVG, featuring a black-outlined circle, two eyes, a blue line for the nose, and a mouth drawn as an arc. The face organizes its parts using the `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components, with coordinates transformed via an SVG `<g>` group. The D3.js library contributes the nose's line path and the mouth's `arc()` geometry, while the container is sized by the `FaceContainer`. The example appears to be a static composition, as no interactive mouse handling is active in the final render.

Aug 11, 2023

Loading thumbnail…

Smiley Face Part 1

A grid of eighteen smiley faces, each rendered as a yellow SVG circle with black outline, eyes, a mouth, and a nose, demonstrates a reusable React component pattern. The faces vary slightly due to randomized eye offsets and radii applied per instance. Built with React and D3 v7, the visualization composes modular components like `BackgroundCircle`, `Eyes`, and `Mouth`, where the mouth uses d3’s `arc` generator and the nose is drawn with `d3.line`.

Aug 1, 2023