Erik Sundahl

@esundahl·3 public vizzes

Image

This example displays a small group of vertical bars in an SVG element, each a different color and height. The bars are rendered as SVG `<rect>` elements with explicit `x`, `y`, `width`, and `height` attributes, and the SVG `transform` attribute applies `scale(1, -1)` to flip the coordinate system so the bars to appear to grow upward from a baseline. The chart uses inline CSS to set the page title and a large message font, while the data values themselves are hardcoded in the markup.

Dec 4, 2022

Loading thumbnail…

Bouncing Balls

Fifteen circles bounce in a sinusoidal wave across a dark background. Each ball follows a vertical, sine-based path at a fixed horizontal interval, with its vertical position shifting over time to create a flowing, animated pattern. The visualization uses D3.js version 7’s `select`, `range`, `scaleOrdinal`, and `schemePastel2` to generate a pastel color palette for the circles. The animation is driven by a JavaScript `setInterval` timer, updating the circles’ `cy` attributes at roughly 60 frames per second via D3’s `.join()` API.

Nov 20, 2022

Loading thumbnail…

Bars

Fifteen vertical bars of varying heights animate smoothly against a dark background, each pulsing up and down in a wave-like pattern. The bars shift in height based on a sine function, producing a continuous, flowing motion that changes over time. Using D3.js v7, the visualization renders SVG rectangles with a band scale for positioning and an ordinal color scale with pastel tones, while a `setInterval` loop drives the animation at 60 frames per second.

Nov 20, 2022