Yann Bilodeau

@yannokgo·4 public vizzes

Parsing CSV Data With D3

This example displays a text-based summary of a CSV file loaded from a remote URL, showing its size in kilobytes, row count, and column count. It uses D3’s `d3.csvParse` to convert raw text fetched via the Fetch API into structured data, then accesses the parsed array’s `length` and the `columns` property to extract the counts. The result is rendered in a large `<pre>` element, with the data sourced from a GitHub Gist.

Feb 17, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor inside an SVG canvas, updating its position in real time as the user moves over the 960×500 drawing area. The example demonstrates React state management with `useState` and event handling via the `onMouseMove` callback, rendering the circle as an SVG `<circle>` element. It uses React 16.9 and ReactDOM to mount the component, with the circle’s coordinates derived directly from the browser’s `clientX` and `clientY` event properties.

Feb 11, 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 defines an asynchronous `fetchText` function that retrieves the raw text from a gist-hosted CSV file and logs it to the browser console. It highlights the two-step promise chain—calling `fetch()` on the URL, then invoking `response.text()` to extract the content. No data visualization or parsing library is used; the focus is solely on the foundational step of acquiring CSV data for later processing.

Feb 11, 2022

Loading thumbnail…

FCC-Course-Smiley

A grid of fifteen smiley faces, each uniquely styled, fills the screen. The faces are composed of SVG circles, with features like eyes, cheeks, and hair rendered through varied stroke dash arrays and offsets. Built with React, the app maps over a d3.range array to render each Face component, and uses d3.arc to draw the mouth. Randomized eye radii ensure each face has a distinct appearance.

Feb 6, 2022