James Yu

@jamesyu1·6 public vizzes

Visualizing data with D3 and React

This example shows a full-screen radial burst of colored arcs, one for each named CSS color, rendered as SVG paths. It loads a CSV of CSS color names and RGB hex values using `d3.csv`, then uses React hooks (`useState`, `useEffect`) to fetch and store the data. D3’s `pie` and `arc` generators compute the angular segments, each filled with its corresponding hex color, while React maps the data to `<path>` elements inside a centered `<g>` transform.

Oct 27, 2020

Loading thumbnail…

Loading data with D3 and React

This example demonstrates how to load and summarize a CSV dataset using D3 utilities within a React application. It shows a simple text display of the data’s size, row count, and column count, initially showing "Loading..." until the data arrives. The code uses React's `useState` and `useEffect` hooks to manage state and fetch the data asynchronously via `d3.csv`, while `d3.csvFormat` calculates the data's byte size. The data source is a gist with CSS named colors.

Oct 6, 2020

Loading thumbnail…

Parsing CSV with D3

This example demonstrates how to parse a CSV file loaded from a remote URL using D3. It fetches a dataset of CSS named colors from a GitHub gist, then displays the file size in kilobytes, row count, and column count in large text. The visualization uses `d3.csv` to load and parse the data, and `d3.csvFormat` to measure the formatted size. The result is rendered into an HTML `<pre>` element, showing the parsed table’s dimensions without any graphical chart.

Oct 6, 2020

Loading thumbnail…

Mouse Follower

A full-screen SVG circle follows the mouse cursor across a blank canvas. The React component tracks pointer coordinates via an `onMouseMove` event listener, updating component state through `useState` and `useCallback`. The circle's center position (`cx`, `cy`) is derived from the state's `x` and `y` values, rendering with D3.js v6. The canvas resizes to the window dimensions, and the circle has a fixed radius of 30 pixels.

Oct 3, 2020

Loading thumbnail…

Parsing CSV

This example demonstrates how to fetch and log the contents of a CSV file containing CSS named colors. The code uses the Fetch API to retrieve the data from a GitHub Gist URL, then parses the response as text before printing it to the browser console. The approach uses an async function with await to handle the promise-based fetch and text extraction, highlighting the basic pattern for loading remote data in JavaScript.

Oct 3, 2020

Loading thumbnail…

The Pink Thing I

A gallery of 18 pink circular faces, each composed of a salmon-stroked background circle, two eyes, and a mouth, renders as a static grid of SVG elements. React generates the faces, while D3’s `arc` API creates the mouth path for each. Randomized parameters for eye offset, eye radius, and mouth dimensions vary the expressions across the faces. The `FaceContainer` component wraps the SVG coordinate system, centering all elements within each 160×160 viewport.

Oct 3, 2020