henryspradlin

@henryspradlin·9 public vizzes

Bruck Vis V1

This visualization demonstrates the Bruck algorithm’s data redistribution steps using an interactive step selector. A 10×10 grid of colored circles, rendered as SVG via D3 v6 and React, displays initial colors, a data rotation phase, and a communication phase. The dropdown menu controls which step’s color array is applied to the dots. The code explicitly builds position and color arrays, mapping them to circle attributes with D3 selections.

Aug 14, 2021

Loading thumbnail…

Menus With React

This example shows a pet selector built with React, where a dropdown menu displays six pet options and the current selection is reflected in the interface. It demonstrates how React’s `useState` hook manages the selected value, while a reusable `Dropdown` component (defined with `props` for options, `id`, `selectedValue`, and `onSelectedValueChange`) renders a native `<select>` element. The code uses ReactDOM to mount the app to the `#root` element, with labels and select styled via CSS for large text.

Aug 11, 2021

Loading thumbnail…

Fork of Bowl of Fruit - D3 Update (With Labels)

This example demonstrates a dynamic fruit bowl visualization where apples are eaten and replaced with lemons over time, with labels showing each fruit’s type. Using D3 v7’s data joins and `transition()`, circles and text elements update smoothly, while `scaleOrdinal` maps fruit types to colors and sizes. The SVG rendering animates changes triggered by `setTimeout`, showing enter, update, and exit selections as the dataset mutates.

Aug 2, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML" at a massive 13em font size, centered on the page. It demonstrates a minimal setup combining HTML, CSS, and JavaScript in a single document, with the styling applied directly in a `<style>` block. The code logs "Hello JavaScript!" to the browser’s developer console, showcasing basic script execution. It relies on native web APIs—no external libraries—and serves as a bare-bones starter for HTML-based projects.

Jul 30, 2021

Loading thumbnail…

Bowl of Fruit - D3 Update

This example demonstrates a dynamic fruit bowl visualization, where colored circles representing apples, lemons, and oranges enter, exit, and change type over time. It showcases D3’s data-join pattern with key functions, using `selection.data()`, `.enter()`, `.merge()`, and `.exit()` to handle updates. The code applies smooth `transition()` animations for position, radius, and fill color, mapping fruit types to colors and sizes via `scaleOrdinal`. SVG circles are rendered in an HTML page using D3 v7, with data mutations triggered by timed `setTimeout` calls.

Jul 21, 2021

Loading thumbnail…

2020 Tutorial - Face

A grid of eighteen identical cartoon faces fills the viewport, each rendered as a yellow circle with black stroke, two eyes, and a mouth shaped like a half-annulus. The example demonstrates how to build reusable SVG components in React, composing `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` into a `Face` component. It uses D3's `arc` generator to define the mouth path and `range` to produce the array of faces. Each face is drawn with fixed parameters for eye offset, radius, and stroke width.

Jul 8, 2021

Loading thumbnail…

Making a Bar Chart

This visualization displays the population of the top 10 most populous countries, based on 2020 estimates from the United Nations World Population Prospects. A bar chart uses horizontal bars with linear scaling for population values and band scaling for country names. The chart is rendered as SVG using D3 v7, with axes generated via `axisLeft` and `axisBottom`. Population data is loaded from a CSV file and parsed using the `csv` method.

Jul 2, 2021

Loading thumbnail…

D3 Face twisty eyebrows

A yellow circle face with black stroke holds two black eyes and a smile-shaped mouth. Its thick black eyebrows rotate inward and outward in a looping animation, tilting up and down around their centers. The piece uses D3.js v7 with SVG elements, applying chained `transition()` calls to animate the `transform` attribute of each eyebrow line over two-second intervals. The mouth is drawn as an arc path using D3's `arc()` generator.

Jun 28, 2021

Loading thumbnail…

D3 Face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and a half-circle mouth. The eyebrows animate by moving upward over two seconds and then returning to their original position. The visualization is built with D3 v7, using SVG shapes within a root group, and the mouth is drawn with the `d3.arc` path generator. The animation relies on chained `transition().duration()` calls, offering a simple, playful demonstration of D3's selection and transition methods.

Jun 28, 2021