Chestnut Sea (@chestnutsea), VizHub

Fork of Loading Data with React & D3

This example demonstrates the size and structure of a dataset containing CSS named colors, showing the file size in kilobytes, row count, and column count as plain text. The application loads the data from a CSV file using the `d3.csv` utility, then manages the asynchronous loading state with React hooks `useState` and `useEffect`. Once the data arrives, a custom message function formats the summary using `d3.csvFormat` to calculate the byte length. React renders the result in a `<pre>` element, displaying a loading message until the data is ready.

Mar 22, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying the file size, row count, and column count in large text. It uses D3 v5’s `d3.csv` method to fetch and parse the CSS Named Colors dataset, then computes metrics from the parsed array and its `.columns` property. The code also includes commented-out alternatives using `fetch` with `async/await` and `d3.csvParse`, highlighting different approaches to asynchronous data loading. The rendered output is a simple HTML `<pre>` element updated via the DOM.

Mar 3, 2023

Loading thumbnail…

Fork of Mouse Follower

A circular marker tracks the cursor across a blank SVG canvas, positioning itself precisely at the mouse’s current coordinates. Built with React, the app uses the `useState` hook to store pointer location and a `useCallback`-wrapped event handler to capture `onMouseMove` events. ReactDOM renders the SVG element, whose circle’s center and radius update dynamically with each movement.

Mar 3, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote URL, displaying the file size, row count, and column count in large text. It uses D3 v5’s `d3.csv` method to fetch and parse the CSS Named Colors dataset, then computes metrics from the parsed array and its `.columns` property. The code also includes commented-out alternatives using `fetch` with `async/await` and `d3.csvParse`, highlighting different approaches to asynchronous data loading. The rendered output is a simple HTML `<pre>` element updated via the DOM.

Feb 26, 2023

Loading thumbnail…

Fork of Smiley Face Part V

This example shows a classic smiley face rendered as an SVG composed of three distinct React components: a yellow background circle, two black eyes, and a mouth drawn using an arc path. The code demonstrates splitting React components into separate ES6 module files, using React Fragments to group elements without extra DOM nodes. It leverages ReactDOM to render the entire graphic into a root div, while D3 v5’s `arc()` API generates the mouth’s path geometry with specified inner and outer radii and angular range. The layout is centered via a translate transform, with all shapes positioned relative to the SVG’s center.

Feb 24, 2023

Loading thumbnail…

Fork of Hello HTML

This example renders a simple, full-window yellow smiley face using an SVG drawing built with React and D3, positioned at the center of the viewport. It shows a large yellow circle with a black outline, two black eye circles, and a D3-generated arc path for the mouth, created with `d3.arc()`. The drawing uses D3's arc generator to define the mouth’s inner and outer radii and its angular span, while React composes the SVG elements. The dimensions and positions are all computed from the window’s current width and height, making the face scale to fit the browser.

Feb 24, 2023