Kaitlyn Boyle

@kaitlynboyle·8 public vizzes

Loading and Parsing CSV Data Ep 13

This example demonstrates loading and parsing the CSS Named Colors CSV dataset from a GitHub gist. It displays the data's size in kilobytes, row count, and column count in a pre-formatted text container. The code uses D3 v7's `d3.csv` function to fetch and parse the remote CSV file, then accesses the parsed data's `length` and `columns` properties. It also references `d3.csvFormat` to compute the data's byte size.

Jan 2, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between car acceleration and horsepower using a scatter plot, with tooltips displaying car model names. Built with the Vega-Lite API, it registers Vega and Vega-Lite, then fetches automobile data from a CSV via d3.csv. The visualization uses semi-transparent filled points, custom axis styling, and a dark color scheme to improve readability, rendered as an SVG that fits the full browser window.

Dec 28, 2021

Loading thumbnail…

Loading data with react and d3

This example demonstrates how to load and display a summary of a CSV dataset using React and D3. It fetches the CSS named colors dataset from a GitHub gist via D3’s `csv` utility, stores the result in React state with `useState` and `useEffect`, and renders a formatted message showing the file size in kilobytes, row count, and column count. The visualization shows the loading process in a plain text `<pre>` element, relying on React’s rendering and lifecycle management.

Dec 28, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas. The visualization uses React state to track the cursor’s X and Y coordinates, updated via the `onMouseMove` event handler, and re-renders the circle’s position. The SVG and ReactDOM render the circle, with the initial position set to the canvas center.

Dec 28, 2021

Loading thumbnail…

Fork of Smiley Face Part 4

A grid of randomly generated smiley faces is rendered, each face varying in stroke width, eye position and size, mouth width, and mouth radius. The code uses React components to structure the SVG elements, while D3's `arc` generator creates the curved mouth path. D3's `range` function defines the grid count, and random values from the JavaScript `Math.random` determine each face's unique properties.

Dec 27, 2021

Loading thumbnail…

homework smiley face

A simple smiley face rendered as a static SVG graphic. The face is composed of a large outlined circle for the head, two eyes with colored pupils, and a mouth drawn using a d3.arc path with a thick stroke. The code uses React to create the SVG elements and d3.arc to define the mouth’s curved shape. The face also includes decorative lines for hair and additional details, all positioned using SVG coordinates.

Dec 27, 2021

Loading thumbnail…

Smiley Face Part 2

A yellow smiley face is drawn with SVG circles for the head and eyes, and a D3 arc path for the mouth. The code uses React to render the SVG elements and d3.arc to compute the mouth’s curved shape, with explicit angle ranges and inner/outer radii. The face is centered using a translated group, and the head and eyes are styled with fixed stroke widths and radii. The visualization is purely a static geometric composition, with no interaction or data-driven updates.

Dec 27, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows the first stage of constructing a smiley face, displaying only a yellow circular head with two black eye outlines on an SVG canvas. The static SVG elements are defined directly in the HTML, with React 17 handling the page structure via UMD builds of `react` and `react-dom` from unpkg. The rendering relies purely on SVG circles with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, while the embedded YouTube video demonstrates the intended progression. The face remains incomplete, lacking a mouth and pupils.

Dec 27, 2021