Carlos

@cd-los·3 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v6. It fetches a remote dataset of CSS named colors hosted on GitHub and displays basic file statistics—size in kilobytes, row count, and column count—in a large text element. The visualization relies on `d3.csv` for asynchronous loading and parsing, then uses `d3.csvFormat` to measure the formatted size. A commented alternative shows the same workflow using the Fetch API with `d3.csvParse`.

Apr 18, 2021

Loading thumbnail…

Mouse Follower

A circular shape tracks the user's cursor in real time, responding to every mouse movement across the full viewport. The visualization reacts immediately to input, with a fixed-radius circle redrawing its position wherever the pointer travels. Built with React, the app uses the `useState` hook to store the mouse coordinates and the `onMouseMove` event handler on the root `<svg>` element to capture position updates. The circle is rendered purely as an SVG element, with ReactDOM managing its placement, all within a full-window canvas that resets with the window size.

Mar 29, 2021

Loading thumbnail…

Smiley Face

A grid of randomized smiley faces fills the screen, each face built from a yellow circle, two eyes, and a curved mouth. The React components render SVG elements, while the d3 `arc` generator creates the mouth path. The `range` function from d3 generates the face count, and each face receives random properties for stroke width, eye offset, eye radius, and mouth dimensions.

Mar 22, 2021