AustinSkrobar

@AustinSkrobar·4 public vizzes

Loading Data with D3

This example demonstrates how to load and summarize a CSV dataset using D3 within a React application. It fetches CSS named colors data from a GitHub gist via `d3.csv` and displays the file size in kilobytes, row count, and column count as plain text. The summary is computed with `d3.csvFormat` and rendered in a `<pre>` element, while the message updates once the asynchronous data loading completes. The visualization highlights a simple, text-based approach to data loading feedback.

Apr 3, 2022

Loading thumbnail…

Smiley Face Part 1

A grid of fifteen randomly generated smiley faces demonstrates reusable React components for SVG visualization. Each face uses a yellow background circle with a radial gradient stroke, offset eyes, and an arc-based mouth drawn via d3.arc. The React components BackgroundCircle, Eyes, Mouth, and FaceContainer accept numeric props for controlling dimensions and positioning, while index.js generates random values using d3.range and Math.random. The faces render as SVG within a fixed-width viewport, showcasing composable visualization primitives.

Apr 1, 2022

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor as it moves across a full-screen SVG canvas. The visualization updates the circle's position in real time using React's `useState` and `useCallback` hooks with an `onMouseMove` event handler. The code combines React 16.9 with D3.js v7, rendering solely through SVG elements without any data source, demonstrating interactive state-driven graphics.

Mar 30, 2022

Loading thumbnail…

Untitled

This example shows an unfinished attempt to construct a smiley face, with only a single malformed circle element present on an otherwise blank SVG canvas. The code relies on a basic HTML structure with an embedded `<svg>` tag, though a misspelled `<cirlce>` element means no shape actually renders. The project references a YouTube tutorial titled "Let's Make a Face," indicating it is a work-in-progress lesson on building facial features with SVG primitives. No external JavaScript libraries or data sources are used, and the rendering is limited to static SVG markup without any interactivity.

Mar 26, 2022