Donna Perygin

@dperygin·5 public vizzes

MouseFollower

A React component uses the useState hook to track the mouse position and renders this data as an SVG circle that follows the cursor. The circle’s cx and cy attributes update directly from the clientX and clientY coordinates captured by the onMouseMove event on an SVG element. The example demonstrates a minimal interactive visualization with React and SVG.

Mar 4, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 in a React application. It displays a summary of the CSS Named Colors dataset, showing the file size in kilobytes, row count, and column count. The code uses `d3.csv` to fetch and parse the data asynchronously, then accesses the parsed data’s `length` and `columns` properties. Alternative approaches using `fetch` with `async`/`await` and `d3.csvParse` are also included but commented out.

Feb 28, 2021

Loading thumbnail…

Donnas Fork of Smiley Face Part III

This example draws a classic smiley face using React and D3.js. The visualization shows a yellow circle with black stroke, two dark eyes, and a curved mouth formed by an arc path. The code uses ReactDOM to render SVG elements, while the D3 `arc` API defines the mouth’s semicircular shape with specified inner and outer radii and angle range. All shapes are positioned relative to the center via SVG transforms.

Feb 28, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of “Let’s Make a Face Part I” shows a partially completed smiley face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The rendering uses inline SVG elements—circle tags with explicit cx, cy, r, fill, and stroke attributes—positioned manually at fixed coordinates. The head is centered at (480, 250), while the eyes sit at (350, 180) and (600, 180). The result is a static, minimal illustration generated directly in the HTML document without any JavaScript libraries or dynamic data.

Feb 27, 2021

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page demonstrates an empty document structure with a title element. The example uses no external libraries or JavaScript APIs, containing only the basic `<html>`, `<head>`, and `<body>` tags. It serves as a starting point for building interactive visualizations, with no data sources or rendering logic present. The page is intentionally blank, offering a bare foundation for further code additions.

Feb 26, 2021