Zaid Alshaikh Hasan

@zaidh98·4 public vizzes

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors, displaying the file size, row count, and column count as large text. It uses the Fetch API to retrieve the CSV from a GitHub gist, then applies `d3.csvParse` to convert the raw text into tabular data. The code relies on asynchronous `async/await` syntax and renders the summary information into an HTML `<pre>` element via `document.getElementById`.

Aug 11, 2023

Loading thumbnail…

Mouse Follower

A yellow circle tracks the mouse cursor across a fixed-width SVG canvas, with its position updating in real time based on pointer movement. The visualization demonstrates the integration of React state management with D3’s SVG rendering capabilities. It uses React’s `useState` hook to store and update the cursor coordinates, which are passed as `cx` and `cy` attributes to a D3-created circle element. The `onMouseMove` event handler on the SVG container triggers state changes, while D3’s `arc` function is imported though unused.

Aug 10, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying summary statistics about the dataset in a large text element. Using D3.js version 5, it fetches the remote CSV via `d3.csv` and reports the file size in kilobytes, row count, and column count. The code also includes commented alternatives using the Fetch API with async/await and `d3.csvParse`. The visualization is minimal, focusing purely on data loading mechanics rather than graphical representation.

Aug 10, 2023

Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn using React components that compose SVG shapes: a background circle for the head, two offset circles for eyes, and a d3.arc-generated path for the mouth. Each feature is parameterized by props like radius, eye offset, and stroke width, allowing the face to be reconfigured. The `FaceContainer` component applies a transform to center all elements, and the entire face is rendered dynamically from data-driven values in d3.v7 and React 18.

Aug 8, 2023