PABOML

@PABOML·4 public vizzes

Mouse Follower

A full-screen SVG circle follows the mouse cursor as it moves across the viewport, using React state to track the pointer's coordinates. The component updates the circle's `cx` and `cy` attributes on every `mousemove` event via an `onMouseMove` handler, storing the position with `useState` and `useCallback`. React and ReactDOM render the interactive graphic at 960 by 500 pixels.

Feb 11, 2022

Loading thumbnail…

Smiley face part 1

This example builds a stylized smiley face from SVG primitives in React, composed from a yellow background circle, two eyes, and a mouth arc. The code uses D3’s `arc` generator to define the mouth shape, while the remaining facial elements—nose, glasses, and connecting lines—are drawn with basic SVG shapes. All parts are positioned relative to a central translation, and the rendering uses React’s declarative syntax to output the final SVG.

Jan 29, 2022

Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load external data with D3 utilities and manage it through React state. The application fetches a CSV file containing CSS named colors from a GitHub gist using d3.csv, then displays a summary message showing the data size in kilobytes, row count, and column count. The visualization uses React hooks—useState, useEffect, and useCallback—to handle asynchronous data loading and rendering. The output is rendered as SVG-like text within a pre element, with d3.csvFormat used to calculate the formatted data length.

Jan 14, 2022

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. The code fetches a text file containing CSS named colors from a GitHub gist, then logs the raw string to the console. It illustrates the first step in a data pipeline, using the asynchronous `fetch` and `response.text()` methods to retrieve the dataset, with a commented-out alternative approach showing the same process with nested then callbacks.

Jan 11, 2022