Alicia Larsen

@larsenalicia·3 public vizzes

Loading and Parsign CSV data

This example demonstrates how to load and parse CSV data in D3 v5, displaying the file size, row count, and column count of a remote dataset. It uses `d3.csv` to fetch and parse the data asynchronously, then calculates the formatted output with `d3.csvFormat` to measure its kilobyte size. A commented-out alternative shows the same process using the Fetch API with `d3.csvParse`. The results are rendered as text inside a `<pre>` element.

Nov 25, 2023

Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across an SVG canvas. The example demonstrates real-time interaction in a React application, using state management to track the cursor's coordinates. The code builds an SVG with React's `useState` and `useCallback` hooks, updating the circle's `cx` and `cy` attributes on every `onMouseMove` event. The React component renders directly into a `div` element, with the SVG's default styling coming from D3 v5 and React 16.9.0.

Nov 25, 2023

Loading thumbnail…

Smiley Face Part III

A grid of fifteen smiley faces, each randomly varying in facial feature size, position, and stroke thickness, is rendered as SVG via React. The visualization demonstrates modular component composition and the use of d3’s `arc` API to generate mouth paths, while drawing circle elements for the background and eyes within a transformed SVG group.

Nov 24, 2023