Pinzhi

@pinzhi000·8 public vizzes

Loading Data w/React and D3

This example demonstrates loading and managing data in a React visualization, where a single circle follows the mouse cursor across an SVG canvas. The app uses React’s `useState` hook to store the cursor’s x and y coordinates, and a `handleMouseMove` callback updates this state on every mouse movement. Rendering is handled by ReactDOM, which outputs the SVG circle with its position bound to the state. The code explicitly imports React and ReactDOM, and uses `useState` and `useCallback` for state management and event handling.

Dec 25, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the fundamental process of loading and parsing CSV data with D3. It fetches a remote dataset of CSS named colors from a GitHub gist and displays summary statistics about the file in a large text element. The visualization shows the data’s size in kilobytes, row count, and column count by using `d3.csv` to load and parse the data, then `d3.csvFormat` to measure its length, and `data.columns` to determine the number of columns. An alternative implementation using `fetch`, `async`, and `d3.csvParse` is also provided in comments but not executed.

Dec 25, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time to mirror the pointer’s location. The visualization demonstrates React’s `useState` and `useCallback` hooks to manage mouse coordinates and re-render the circle on every move event. Built with React 16.9 and rendered as SVG, the component listens for `onMouseMove` on the `<svg>` element, extracting `clientX` and `clientY` to set the circle’s `cx` and `cy` attributes. The example uses no external data source, relying solely on user interaction.

Dec 25, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the native Fetch API. It shows two approaches: an asynchronous `async/await` function that fetches text and returns the parsed response, and a commented-out callback chain using `fetch().then().then()`. The code retrieves a CSS named colors dataset from a GitHub gist and logs the raw text output to the browser console, highlighting basic data loading patterns without any visualization or charting library.

Dec 25, 2021

Loading thumbnail…

Fork of Smiley Face Part III

This gallery example shows a grid of eighteen smiley faces, each rendered with randomized facial features such as eye position, eye radius, mouth width, and stroke thickness. The visualization is built using React components for modular structure, while D3 v5’s `arc` API generates the mouth paths. The faces are drawn as SVG elements, with a yellow background circle, black outline, and simple circular eyes, all positioned relative to a central coordinate system. The data is generated programmatically using D3’s `range` function to create a repeated array of faces.

Dec 24, 2021

Loading thumbnail…

Fork of Face Part II

This example renders a stylized half-completed smiley face as an SVG using React and D3 v7. It draws a yellow circular head with white and black eyes, gray elliptical features, a pink tongue, and two arc-based mouth paths created with the `d3.arc()` API. The face is centered via a group transform, with shapes positioned using hardcoded coordinates and defined constants for offsets and radii. The code uses React components to structure the SVG elements, while D3’s `arc` function generates the mouth path data.

Dec 24, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a yellow smiley face built from SVG shapes, with two black eyes and a curved mouth, centered on a 960-by-500 canvas. It renders the face using React components, where each circle and the mouth path are defined as JSX elements inside an SVG. The mouth is generated with the `d3.arc()` generator, specifying inner and outer radii and start and end angles, while the eyes use hardcoded offsets from the center. The code relies on React for structure and d3 for path generation, with all geometry computed from fixed variables.

Dec 23, 2021

Loading thumbnail…

Smiley Face Part I

This example depicts a partial smiley face using three SVG circles: a large yellow circle with a black outline, and two smaller circles placed inside it to represent eyes. The visualization is implemented through inline SVG markup within an HTML file, with the React library loaded but not yet actively used in the rendering logic. The circles are positioned using explicit `cx`, `cy`, and `r` attributes, with the main face centered on a 960×500 canvas. The structure suggests a static composition, as no interactive or animated behavior is present in the code.

Dec 20, 2021