Johnny Dodge

@captainwhitebeard·5 public vizzes

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This chart displays global coronavirus death trends over time for each country, with cumulative deaths plotted on a logarithmic scale. A Voronoi overlay, built with d3-delaunay, enables hover detection to highlight the active country's line in black while graying out others. The visualization uses React with d3.v5 for scales and line generation, rendering SVG paths. Data comes from the Johns Hopkins COVID-19 dataset.

Feb 27, 2023

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This visualization displays the cumulative global COVID-19 death toll over time, with each country represented as a line on a logarithmic scale. A Voronoi overlay, generated using `d3.Delaunay` and the `voronoi()` method, creates clickable regions around plotted points to enhance interaction. The chart is built with React and renders paths and axes using D3 v5’s `line()`, `scaleTime()`, and `scaleLog()` functions. Data is sourced from the Johns Hopkins Coronavirus Dataset, loaded via D3’s `csv()` and parsed with `timeParse()`.

Feb 27, 2023

Loading thumbnail…

Sol Lewitt Project

This example generates a geometric abstraction inspired by Sol LeWitt, layering horizontal and vertical striped rectangles over an SVG canvas. Two circular masks create a contrast where a central white circle reveals the full pattern, while the surrounding area inverts it. Using D3’s `select` and `range`, it appends over one hundred rect elements per axis, with widths and heights derived from window dimensions. The SVG `mask` elements, defined with white and black circles, control visibility, producing a precise, grid-based visual composition.

Feb 14, 2023

Loading thumbnail…

Fantastic Sunrise Sunset SVG Animation

A circular sun rises and sets over layered mountain silhouettes in an endless 15-second loop, while the backdrop and landscape colors shift between aliceblue and indigo to simulate day and night. This SVG animation uses SMIL `<animate>` elements on radial and linear gradient stops and on the sun’s `cy` attribute, producing a continuous cycle without JavaScript. Two irregular polygon paths and a curved Bézier path compose the terrain, filled with animated gradients from the inline `<defs>` section.

Feb 13, 2023

Loading thumbnail…

Fork of Fork of SVG Animation Playground

A demo shows a dark, space-themed scene with two SVG images, “GETIT” and “RIGHT,” and a spinning, fading “IN BLACK AND WHITE” byline, all animated in a looping 3D perspective effect. The code uses CSS keyframe animations (`getit`, `right`, `spin-letters`, `move-byline`) with transforms like `scale`, `translateY`, `translateZ`, and `rotateY`, applied to inline SVG images and HTML text spans. It relies on CSS `perspective` and `transform-style: preserve3d` for depth, with media queries adjusting font size for smaller screens. The background is a fixed starfield image from cssanimation.rocks, and the SVG assets are hosted as GitHub gists.

Feb 26, 2022