PabloDraHer

@PabloDraHer·3 public vizzes

Loading and Parsing csv Data

This example demonstrates the initial step of working with tabular data in D3: loading a CSV file and parsing it into JavaScript objects. It fetches a comma-separated list of CSS named colors from a GitHub gist, then uses `d3.csvParse` to convert the raw text into an array of data objects. The page displays only the total row count in the document body, confirming the parse succeeded. The code relies on the Fetch API and D3 v7, highlighting the separation between network I/O and D3’s data-formatting utilities.

Jan 2, 2022

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across a full-screen SVG canvas. The React component tracks pointer coordinates via the `onMouseMove` event and stores them in state with the `useState` hook, updating the circle's `cx` and `cy` attributes through re-rendering. The `useCallback` hook memoizes the event handler, while rendering relies on React DOM and plain SVG elements with no external charting library.

Jan 2, 2022

Loading thumbnail…

Smiley Face I

A grid of 18 yellow smiley faces, generated as React components, fills the viewport. Each face uses SVG shapes for a circular background, two eyes, and a mouth drawn with a d3.arc path. The `Face` component composes a `BackgroundCircle`, `Eyes`, and `Mouth` inside a `FaceContainer`, with random eye radii varying per face. The code relies on React for component structure, d3 for the arc generator and `range` utility, and renders entirely as inline SVG.

Dec 30, 2021