Wilmot Osei-Bonsu

@wbonsu·4 public vizzes

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count in a large HTML `<pre>` element. It fetches the CSS Named Colors dataset using the Fetch API with `fetchText`, then parses the raw text with `d3.csvParse` from d3.v5. The resulting message updates the page via `document.getElementById().textContent`, showing quantitative metadata about the parsed dataset. The visualization is minimal, focusing on the data-loading pipeline rather than graphical representation.

Feb 24, 2022

Loading thumbnail…

Mouse Follower

A single yellow circle follows the mouse cursor across an SVG canvas. The visualization uses React state to track the cursor's clientX and clientY coordinates and passes them as the circle's cx and cy attributes. The index.js file imports React's useState and useCallback hooks, while D3 is loaded but not directly used in the visible logic. The example demonstrates a lightweight approach to binding mouse events to SVG elements within a React component structure.

Feb 24, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and display raw CSV data from a remote URL using JavaScript’s built-in `fetch` API. The code loads a gist-hosted file containing CSS named colors, then logs the entire text response to the browser console. The visualization is a bare-bones HTML page that focuses on the data-loading step rather than rendering a chart, using the `fetchText` function with async/await to retrieve the text. No external libraries or plotting frameworks are employed.

Feb 24, 2022

Loading thumbnail…

Smily Face Part:1

A grid of 50 randomly generated smiley faces is rendered as SVG elements. Each face uses a yellow circle, two eyes, and a crescent-shaped mouth created with the `d3.arc` API for the mouth path. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` are composed and translated into a single SVG via the `FaceContainer`. Eye radius varies randomly per face, while other features remain constant. The visualization demonstrates reusable React components combined with D3's arc generator to produce a playful, data-driven collection of smiley faces.

Feb 24, 2022