Gang Chen

@ssword·7 public vizzes

Rendering Data with React

A React application renders a color wheel from CSS named colors loaded as CSV data from a GitHub gist. The program uses React hooks (`useState`, `useEffect`) to fetch and parse the data with `d3.csv`, then maps each color to an SVG path segment using `d3.arc`. With dimensions of 960 by 500, each path is positioned around a central point, its fill set to the color’s hex value, creating a full circular visualization of all named colors. The D3 arc generator defines each segment’s angle based on the data index.

Oct 25, 2021

Loading thumbnail…

Vega-Lite API Template

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository, showing the relationship between fuel efficiency (mpg) and horsepower while encoding car origin by color and weight by circle size. Hovering reveals the vehicle name via tooltips. Built with the Vega-Lite API, the visualization chains declarative specifications programmatically, registering Vega-Lite and Vega with the vega-lite-api library. The code customizes axis styling through a shared config object, loads data via d3.csv, and renders to an SVG using Vega’s renderer with automatic window sizing.

Oct 24, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading and parsing remote CSV data with React and D3, displaying summary statistics about the dataset. It fetches a CSS named colors CSV file from a GitHub gist using D3’s `csv` method inside a React `useEffect` hook. The `message` function calculates and formats the file size in kilobytes, row count, and column count for display. While the data loads, the view shows “loading…”, then renders the formatted summary in large text via React’s `useState` and `ReactDOM`. The code relies on `d3.csvFormat`, `d3.csv`, and React 16.9 with D3 v7.

Oct 22, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates loading and parsing a CSV file from a remote URL, then displaying basic metadata about the dataset. It fetches the raw CSV text using the Fetch API and parses it with d3.csvParse from d3.v7, after which it reports the file size in kilobytes, the number of rows, and the number of columns. The data source is a gist containing CSS named colors, and the output appears in a large-font HTML pre element.

Oct 22, 2021

Loading thumbnail…

Mouse Follower

This example demonstrates a simple interactive visualization inside an SVG canvas: a circle continuously follows the mouse cursor across the screen. It serves as a basic demonstration of handling mouse events and updating React state in response to user input. Built with React and ReactDOM, the application uses the `useState` hook to track the cursor's `clientX` and `clientY` coordinates, updating them via the `handleMouseMove` callback attached to the SVG element's `onMouseMove` event. The rendered SVG circle’s `cx` and `cy` attributes are bound directly to the mouse position state, causing the circle to track the pointer in real time.

Oct 22, 2021

Loading thumbnail…

Mouse Follower

A grid of eighteen smiling faces follows the mouse cursor across the screen. Each face is a React SVG component composed of a yellow background circle, two eyes, and a d3-generated arc path for the mouth. The code uses React 16.9 and d3.v7, with the `arc()` API to construct the mouth shape and `range()` to generate the array of faces. Each face has randomized eye and mouth dimensions, and the entire grid moves together with the pointer.

Oct 22, 2021

Loading thumbnail…

Hello Smilly Face

A grid of 18 smiling faces fills the screen, each rendered as a yellow circle with black stroke, two eyes, and a curved mouth. The faces vary subtly in eye radius and mouth dimensions due to random values generated per face. Built with React components that compose SVG elements, the visualization uses d3’s `arc` generator to create the mouth path and `range` to produce the grid layout. ReactDOM renders the array of Face components into the DOM.

Oct 22, 2021