Tina Haiser

@thisteensy·4 public vizzes

Fork of Loading Data with React & D3

This example demonstrates the workflow of fetching external data with D3 and managing it through React state. Using `d3.csv`, it loads a dataset of CSS named colors from a GitHub gist and displays a text summary of its size, row count, and column count. The React component uses `useState` and `useEffect` to trigger the asynchronous data loading, then renders either a loading message or the computed statistics via a custom `message` function. The visualization focuses on the integration between D3’s data parsing utilities and React’s declarative state management.

Apr 7, 2021

Loading thumbnail…

Loading Data with React and D3

A React application demonstrates how to load external data with D3 and manage it with React state. The code uses `useState` and `useCallback` hooks to store and update data, though the data-loading logic itself is not shown in the provided snippet. It renders an SVG container with a commented-out yellow circle and smaller circles, suggesting a basic scatter-plot or node layout template. The example uses `ReactDOM.render` to mount the component and imports React's state management alongside D3 utility functions.

Apr 7, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a plain-text summary of a CSV dataset loaded from a GitHub gist, showing its size in kilobytes, row count, and column count. It demonstrates both the primary approach using `d3.csv` with a Promise, and commented-out alternatives using `fetch` with async/await plus `d3.csvParse`. The React state mentioned in the README is not visible in this code, which instead directly updates the DOM via `textContent`. The large `pre` element presents the concise statistics.

Apr 7, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows a smiling face constructed from SVG primitives, rendered using React and D3.js. The face includes a yellow circular head, two elliptical eyes, and a mouth drawn as a D3 arc path. The composition is centered within the viewport using a React component hierarchy that passes configuration props for geometry and stroke width. The SVG is generated entirely in code, with no external data, demonstrating how D3's `arc` generator and React components can combine to create simple, parametric graphics.

Apr 7, 2021