John A. Dodge

@JPixelByte·5 public vizzes

Big Brother Animated Stop Watch

A large digital stopwatch displays elapsed minutes and seconds in a glowing green monospace font, with the seconds digits pulsing between two shades of green. The two colon separators are transformed into cartoonish eyes whose pupils track the mouse cursor, smoothly following its movement across the screen. Built with D3.js v6 for time formatting and DOM selection, the animation relies on CSS keyframes for the color shift and JavaScript event listeners to calculate pupil positions via trigonometric functions.

Nov 22, 2025

Loading thumbnail…

Sunset and Sunrise Mountains

This example shows an animated day/night cycle over a mountain landscape, with a sun and moon that alternate positions and colors while the sky and terrain shift between daylight and nighttime palettes. The scene uses SVG gradients and paths to render the terrain, with JavaScript controlling state-based color transitions and toggling animated birds during the day and wolves at night. Static night mode introduces randomized lightning strikes and a flashing white overlay. The code uses DOM manipulation with `getElementById`, `querySelectorAll`, and the Web Animations API pattern of `setTimeout` for timed effects, while sound elements are triggered via HTML5 audio.

Nov 1, 2025

Loading thumbnail…

Fork of Adil-Sunrise and Sunset

This animated sunrise-and-sunset scene uses an SVG radial gradient sky and two linear-gradient landscape layers on a 960×500 canvas. The sky and landscape colors cycle through aliceblue, indigo, and steelblue over a 15-second loop, while the sun’s vertical position oscillates between 250px and 350px via SVG `<animate>` elements. The code relies on native SVG gradients and SMIL animations, with no JavaScript libraries, and renders entirely in the browser as vector graphics.

Nov 1, 2025

Loading thumbnail…

Fork of CV: Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying sepal length against sepal width for 150 flowers. Users can click individual data points to highlight them in yellow, with transitions animating the visual feedback. The React application uses D3 v7 methods like `scaleLinear`, `axisBottom`, and data joins to render axes and circles as SVG elements. A background iris flower illustration, decorative flower pot, and ornamental "SEEDS" text overlay enhance the visualization's aesthetic appeal.

Nov 1, 2025

Loading thumbnail…

Animated Stop Watch

An animated digital stopwatch displays hours, minutes, and seconds in the Share Tech Mono font, with the final two digits cycling between grass green and tree green. The time is generated live with d3.format; two pairs of eyes sit between the colons, and JavaScript tracks mouse position to move their pupils via CSS transitions. The animation uses keyframes for the color shifts and runs on a black background for contrast.

Oct 14, 2025