THANNULA

@THANNULA·6 public vizzes

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3 utilities. It fetches CSS named colors from a GitHub gist via `d3.csv`, stores the parsed data in React state with the `useState` and `useEffect` hooks, and displays a text summary generated by a custom `message` function. The summary reports the dataset’s size in kilobytes using `d3.csvFormat`, along with its row and column counts, rendered inside a `<pre>` element while showing “Loading…” until data arrives.

Mar 4, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV file by displaying its kilobytes, row count, and column count. The visualization loads a remote dataset containing CSS named colors, then parses it with the `d3.csvParse` function from the D3 v6 library. The code uses the `fetch` API with async/await to retrieve the text, then computes the data dimensions and displays them in a large `<pre>` element. The alternative approach in `index.html` uses `d3.csv()` and `d3.csvFormat()` to achieve the same result.

Mar 4, 2021

Loading thumbnail…

Mouse follower

A black circle follows the mouse cursor across a 960 by 500 SVG canvas. The circle’s position updates in real time using React’s `useState` and `useCallback` hooks, with the `onMouseMove` event handler tracking client coordinates. The SVG circle is rendered via React, while D3 v6 is loaded but not directly utilized in this interactive mouse-follower example.

Mar 4, 2021

Loading thumbnail…

Face6 Timm

A grid of eighteen randomly generated smiley faces fills the screen, each rendered as a yellow circle with a black stroke, two eyes, and a d3 arc mouth. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius, all set via JavaScript’s `Math.random()` in a React `map` over a `d3.range`. React 17 and D3 v6 compose the SVG output, with each face wrapped in a shared `FaceContainer` that translates the coordinate system for drawing.

Mar 3, 2021

Loading thumbnail…

Smiley Face Part 1

The gallery displays 18 randomly generated smiley faces, each composed of a yellow circular background, black eyes, and an arc-shaped mouth, rendered as SVG elements. The React component structures the face, while D3’s `arc` API generates the mouth path, and the `range` function from D3 creates the array of faces. Randomization in stroke width, eye offset, eye radius, and mouth parameters produces varied expressions across the grid.

Mar 3, 2021

Loading thumbnail…

Timms New Face Assignment

A yellow smiley face is drawn using SVG, featuring two black eyes and a mouth shaped as an arc. The face is centered within a circle with a thick black stroke, and its dimensions are fixed at 960 by 500 pixels. The visualization uses React for rendering and d3.arc to compute the mouth’s path, with D3 v6 and React 17 loaded via CDN. The code defines geometric constants for eye placement, mouth radius, and stroke width to construct the face programmatically.

Mar 3, 2021