onthebanks14

@onthebanks14·3 public vizzes

Loading Data with React and D3

This example demonstrates loading a CSV dataset into a React component using D3’s `d3.csv` method, fetching CSS named colors from a GitHub gist. Once the data arrives, it is stored in React state via the `useState` hook, and the raw data object is displayed directly in the DOM. The visualization renders as SVG, with the React app mounted into a root div, showing the asynchronous data-loading pattern in a minimal interface. The code highlights integration of D3’s data fetching with React’s component lifecycle.

Apr 27, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading a remote CSV file containing CSS named colors and parsing it into a JavaScript array using D3 v5’s `d3.csvParse`. The program first fetches the raw text via the Fetch API, then reports the file size in kilobytes, the number of parsed rows, and the number of columns into an HTML `<pre>` element. It highlights the separation between fetching text and structured parsing, relying on D3’s `d3.csvParse` for delimiter handling and column detection.

Apr 22, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows a stylized smiley face rendered as scalable vector graphics (SVG) through React components, with the face centered within a fixed 166-by-166 viewport. The visualization is composed of a yellow background circle with a black stroke, two black eyes positioned symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular range. Each facial feature is a separate React component (`BackgroundCircle`, `Eyes`, `Mouth`) composed within a `FaceContainer` that applies a translation transform. The code relies on `ReactDOM` for rendering and D3 v6’s `arc` API for path generation.

Apr 21, 2021