TerryZ7

@TerryZ7·5 public vizzes

Fork of Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas, serving as a simple interactive pointer. The visualization also loads CSS color data from a CSV file and renders each row as a pie-shaped arc, with the arc’s fill matching the color’s hex value. Built with React hooks for state management and D3’s `csv` and `arc` utilities, the example uses an SVG path for every data point to create a static, colorful display alongside the interactive follower.

Jul 8, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a concise summary of a CSV dataset loaded from a remote URL, showing the file size, row count, and column count in a large preformatted text block. The visualization uses D3 v5’s `d3.csv` method to fetch and parse the CSS Named Colors data, then formats the results with `d3.csvFormat`. The code also includes commented-out alternatives using `fetch` with async/await and a pyramid-of-doom pattern, highlighting different approaches to asynchronous data loading in JavaScript.

Jul 1, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face follows the mouse cursor across an SVG canvas, with its circular head and facial features drawn in React and D3. The face tracks pointer movement via React state and an `onMouseMove` event, while D3’s `arc` function defines the smile shape. The implementation uses reusable SVG circle elements, fixed dimensions of 960 by 500 pixels, and a 20-pixel stroke for the head outline. The example demonstrates integrating React’s component state with D3’s geometry utilities for interactive visualization.

Jul 1, 2021

Loading thumbnail…

CssColor

This example presents a web page that displays the text "Hello HTML" in enormous 13em type, centered on a plain white background. It fetches a CSV file containing CSS color data from a GitHub gist using JavaScript's `fetch` API and logs the raw text to the browser console. The page demonstrates a minimal setup using HTML, CSS, and JavaScript, though the fetched data is not yet visualized on screen.

Jul 1, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays two identical cartoon faces, each composed of a yellow circle with black outline, two eyes, and a curved mouth. The faces are rendered using React components that structure the SVG elements, with D3’s arc generator used to create the mouth path. The center of each face is positioned at the SVG’s midpoint via a group transform, and facial features like eye radius and mouth size are controlled through component props.

Jul 1, 2021