Chris Ferenci

@chris-ferenci·3 public vizzes

Loading and Parsing CSV Data

This example demonstrates the size and structure of a CSV file by fetching it and displaying its file size, row count, and column count as large text. After loading the data from a GitHub-hosted CSS named colors dataset, it uses `d3.csv` to parse the remote file, then accesses `data.length` and `data.columns.length` to summarize the dataset. The code also shows an alternative approach using the Fetch API and `d3.csvParse` in commented-out form.

Apr 17, 2022

Loading thumbnail…

Mouse Follower

A mouse follower rendered with React and SVG that tracks the pointer’s position in real time. The visualization shows a single black circle that moves across the 960×500 canvas as the user moves the mouse, using React’s `useState` to store the current cursor coordinates and `useCallback` to handle the `onMouseMove` event. The SVG `<circle>` updates its `cx` and `cy` attributes based on the clientX and clientY values from the event, creating a direct, lag-free response to user input.

Apr 17, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSS Named Colors data from a CSV file, displaying the file size, row count, and column count as large text. It uses the D3 v5 `d3.csv` method to fetch and parse the remote CSV, then formats the results via `d3.csvFormat`. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a nested Promise example, all within a minimal React-free HTML setup.

Apr 17, 2022