Pyotr Grigorchenko

@PyotrGrogorchenko·4 public vizzes

Loading data with React & D3

This visualization displays a donut chart of CSS named colors, with each slice representing a single color from a CSV dataset loaded from a GitHub gist. The React component uses the `useState` and `useEffect` hooks to asynchronously fetch the data with D3's `csv` function, then renders an SVG with D3's `pie` and `arc` generators. Each color's hex value fills its corresponding pie slice, creating a full circular spectrum.

Dec 20, 2022

Loading thumbnail…

Smiley face

A grid of randomly generated smiley faces fills the view, each with a yellow background circle, black stroke, two eyes, and an arc-shaped mouth. The React components compose a `Face` from reusable parts (`BackgroundCircle`, `Eyes`, `Mouth`) inside an SVG container, with properties like eye offset, radius, and mouth width varied randomly. The `Mouth` path is built using `d3.arc()`, while the grid layout itself comes from `d3.range()` mapping over the component. The rendering is pure SVG within a React application using D3 v7 for geometry.

Dec 20, 2022

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates two approaches to loading and parsing CSV data in D3. It fetches a remote CSV file containing CSS named colors and their corresponding RGB values, first using the promise-based `d3.csv` method to parse the data automatically, and second using the native `fetch` API combined with `d3.csvParse` to manually parse the raw text. Both results are logged to the browser console. The code relies on D3 v7 and illustrates the difference between D3’s built-in fetch-and-parse convenience and a more explicit, lower-level workflow.

Dec 19, 2022

Loading thumbnail…

Mouse follower

A circle drawn with SVG follows the mouse cursor across a 960 by 500 pixel canvas. The visualization tracks the pointer's absolute client coordinates on every mouse movement event, updating the circle's center position accordingly. Built with React, the example uses the `useState` hook to store the current mouse position and a `useCallback` handler to update it, while the circle itself is rendered as an SVG `<circle>` element. The code relies on React 18 and D3 v7 only for DOM rendering, with no data or additional D3 visualization APIs involved.

Dec 19, 2022