NoPlay1984

@NoPlay1984·3 public vizzes

Loading Data with React & D3

This example demonstrates how to load a CSV file from a remote URL using D3’s `d3.csv` method and manage the resulting data state with React’s `useState` and `useEffect` hooks. It displays a summary of the loaded dataset—file size in kilobytes, row count, and column count—inside a `<pre>` element. The data comes from a GitHub Gist containing CSS named colors. React renders the message while the data is loading or after it arrives, showing the integration between D3’s data loading utilities and React’s component lifecycle.

Apr 17, 2022

Loading thumbnail…

Test_load_data

This example demonstrates how to load and inspect a CSV file of CSS named colors by fetching it from a remote GitHub gist. Using the browser’s built-in `fetch` API and async/await syntax, it retrieves the text content and logs it to the console. The page is a minimal HTML document with embedded JavaScript, without any external libraries or visualization components. It serves as a basic test for confirming that data loading works before building more complex charts.

Apr 16, 2022

Loading thumbnail…

Hello HTML

A grid of 18 smiling faces, each generated with randomized eye and mouth sizes, demonstrates the composition of reusable React components. The faces are rendered as SVG circles and arcs, with yellow heads, black outlines, and black eyes. The code uses React to build component hierarchies, d3’s `arc` function to shape mouths, and the `range` helper from d3 to generate the array of faces.

Mar 27, 2022