AndrewLamWARC

@AndrewLamWARC·6 public vizzes

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 large text. The code uses the Fetch API with async/await to retrieve the raw CSV text, then parses it with `d3.csvParse`. It also shows an alternative commented-out approach using `d3.csv` with promises. The dataset is CSS Named Colors, fetched from a GitHub gist, and the results are rendered into a DOM element via `textContent`.

Oct 22, 2021

Loading thumbnail…

Mouse Follower Refactor

This example demonstrates a circle that tracks the user’s mouse movements across an SVG canvas, updating its position in real time. Using React’s `useState` and `useCallback` hooks, the app captures `clientX` and `clientY` coordinates from the `onMouseMove` event and passes them as `cx` and `cy` attributes to the circle element. The rendering relies on React 16.9 and ReactDOM, with no additional data sources or visualization libraries involved.

Oct 22, 2021

Loading thumbnail…

Smiley face Compartmentalized 4

This example renders two identical smiley faces side by side using React and D3 v7’s `arc` generator for the mouth paths. Each face is composed from reusable components: a radially gradient-filled `circle` for the face, two `ellipse` eyes, and a multi-path mouth with rounded corners. The faces are drawn in SVG within a centered `<g>` transform, with fixed dimensions and stroke widths passed as props. The code demonstrates modular composition of geometric shapes and D3’s arc API for curved path generation.

Oct 15, 2021

Loading thumbnail…

Smiley face 3

This example shows a stylized smiley face rendered in SVG, with a yellow-to-orange gradient fill, elliptical eyes, and a rounded smile formed from three arcs. It builds on the previous “Smiley face” versions by adding a d3.arc-generated mouth and small smile arcs positioned with rotations and translations. The code uses React components and the D3 v7 `arc` API from the `d3` module to draw the mouth and smile shapes, while `use` references a gradient-defined circle from the SVG `<defs>`.

Oct 14, 2021

Loading thumbnail…

Smiley face 2

A stylized smiley face rendered as an SVG, built with React and D3 v7. The face uses a yellow-to-orange linear gradient for its circular head, black ellipses for eyes, and a thick arc for the mouth. Two smaller arcs form dimples, positioned symmetrically on either side of the mouth. The code defines reusable arc generators using `d3.arc()`, applies rounded corners via the `cornerRadius` option, and composes the face from separate React components, including a dedicated `Eyes` component.

Oct 14, 2021

Loading thumbnail…

Smiley face 1

The example draws a yellow smiley face on an SVG canvas. A yellow circle with a black stroke forms the head, and two solid black circles serve as eyes. The mouth is a thick arc generated with the `d3.arc()` generator, using inner and outer radii and start and end angles to create an upside-down U shape. The React component renders SVG elements while importing the `arc` function from D3 v7 for the path definition.

Oct 11, 2021