maciekbanas

@maciekbanas·3 public vizzes

Fork of Mouse Follower

This example displays a minimal text summary of a COVID-19 deaths dataset. The React component fetches a CSV file from the Johns Hopkins CSSEGISandData repository and uses D3’s `csv` function to parse it. The resulting `data` object is passed to a custom `message` function, which computes and renders the file size in kilobytes, row count, and column count. The output updates dynamically through React’s `useState` and `useEffect` hooks, initially showing a “loading…” placeholder. D3’s `csvFormat` is used to measure the file size.

May 12, 2021

Loading thumbnail…

Fork of Loading and Parsing Coronavirus Data

This example displays the parsed size, row count, and column count of the Johns Hopkins Coronavirus time-series dataset as oversized text in a `<pre>` element. It loads the CSV file from a pinned GitHub commit using `d3.csv`, then computes the formatted data length with `d3.csvFormat`. The visualization relies on D3 v5 (`d3.v5`) to fetch and parse the remote data, while using native DOM manipulation to update the message container.

May 12, 2021

Loading thumbnail…

Test

A grid of smiley faces, generated as React components, appears as a playful visualization of procedural variation. Each face is built from separate SVG subcomponents—a yellow circle head, two eyes, and a mouth—with random parameters controlling eye height, eye radius, mouth width, and mouth radius for every instance. The code uses React with D3’s `arc` function for the mouth path, while `d3.range` creates an array of 18 faces rendered responsively in a fixed layout.

May 11, 2021