allan-maker

@allan-maker·5 public vizzes

Loading Data with React & D3

This example demonstrates a React and D3 workflow for loading and summarizing external data. It fetches a CSV file of CSS named colors using the D3 utility `csv`, then stores the parsed result in React state via `useState`. Once loaded, the app displays a text summary of the dataset’s size, row count, and column count, rendered as an SVG `<pre>` element. The page initially shows "loading" until the asynchronous fetch completes. The code relies on React's `useEffect` and `useCallback` hooks alongside D3's `csvFormat` to calculate the file size in kilobytes.

Apr 4, 2021

Loading thumbnail…

Loading and Parsing CSV Data using D3

This example demonstrates the basic workflow of loading and inspecting tabular data with D3. It fetches a CSV file of CSS named colors from a GitHub gist and displays a concise summary of its contents, including file size, row count, and column count. The visualization uses `d3.csv` to asynchronously parse the remote data, `d3.csvFormat` to compute the raw data size, and DOM text content to render the results in a large `<pre>` element. The page relies on D3 v6 and shows no chart, focusing instead on data parsing mechanics.

Apr 4, 2021

Loading thumbnail…

Mouse Follower

A yellow-outlined circle follows the mouse pointer across a blank grayscale SVG canvas. The React app tracks pointer movement via an SVG `onMouseMove` handler, updating React state with the cursor's client coordinates. This state drives the circle's `cx` and `cy` attributes, re-rendering the circle's position on every move. The example uses React `useState` and `useCallback` hooks within a functional component, rendered through `ReactDOM.render`.

Apr 4, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load a remote CSV file and display its raw contents in the browser console. It fetches a comma-separated dataset of CSS named colors using the Fetch API and converts the response to text. The code relies on the `fetch` and `Response.text()` methods, triggered from an async function, to retrieve and parse the data from a GitHub Gist URL. No visualization is rendered; the example focuses solely on the loading and parsing workflow.

Apr 4, 2021

Loading thumbnail…

My 1st Face

A smiling face rendered with React and D3, drawn as SVG shapes on a yellow circular head with a black outline. The code uses D3's `arc()` generator to create the mouth and positions two black eye circles via explicit SVG `<circle>` elements. The face is centered using a computed `translate()` transform, with dimensions hardcoded for a 960×500 viewport. React 17 manages the component rendering, while D3 v6 provides the arc path generation for the closed mouth.

Mar 30, 2021