oeohomos

@oeohomos·5 public vizzes

Rendering data with React

The example renders a pie chart of CSS named colors using React for the DOM and D3 utilities for data loading and shape generation. It pulls CSV data via `d3.csv`, then uses `d3.pie` and `d3.arc` to compute and draw each segment as an SVG `<path>`, filling each with its corresponding hex value. The visualization effectively displays the full color spectrum as a circular donut, demonstrating a hybrid approach where React manages state and rendering while D3 handles the geometric calculations.

Apr 2, 2021

Loading thumbnail…

Loading with React and D3

This example demonstrates how to load and display metadata about CSS named colors using React and D3. The app fetches a CSV file from a GitHub gist with D3’s `csv` utility and stores the parsed result in React state via the `useState` and `useEffect` hooks. Once loaded, it renders a brief summary of the data, including its size in kilobytes, row count, and column count, using a custom `message` function. The visualization relies on React’s conditional rendering to show “data is: not loaded” before the asynchronous fetch completes.

Apr 2, 2021

Loading thumbnail…

Loading and Parsing data

This example demonstrates a minimal D3.js workflow for fetching remote data and parsing it into a tabular structure. The page displays nothing visually, instead serving as a code-level demonstration of asynchronous data loading. The script uses the browser's native `fetch` API to retrieve a CSV file containing CSS named colors from a GitHub gist. D3.js version 6 is loaded via a CDN, and its `d3.csvParse` method is called to convert the raw text responses into an array of JavaScript objects, though the code contains a typo in the method name. The parsed data is not rendered or further processed.

Mar 25, 2021

Loading thumbnail…

Mouse Tracing

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The visualization demonstrates mouse tracking with React's `useState` and `useCallback` hooks to manage and update the circle's coordinates from the `onMouseMove` event. It uses React 17 to render an SVG element with a single circle, and D3 v6 is loaded but not directly used in the logic. The circle starts centered at (480, 250) with a radius of 30 pixels.

Mar 25, 2021

Loading thumbnail…

face

A simple cartoon face is drawn using React and SVG, with a yellow circular background, two eyes, and a smiling mouth. The face is composed of separate React components, each responsible for a part (BackgroundCircle, Eyes, Mouth). The mouth is generated using the `arc` function from the d3 library to create a path with a specified inner radius, width, and angular range. The overall composition is centered and scaled through the `FaceContainer` component.

Mar 25, 2021