Skip to main content
SimilarExport ZIP
100%

D3 Tutotial Video 5 Viz Project #2: Wavy Bars

✓ Published0🌍 Public
CCasualWanderer20XX
Last edited Sep 13, 2025
Created on Sep 13, 2025

Animated wavy bars fill the browser window, with each bar's height, vertical position, and opacity oscillating over time to form a flowing wave pattern. The visualization runs a continuous animation loop, updating every 60th of a second using JavaScript's `setInterval`. The D3 library's `select`, `selectAll`, and `join` methods bind data to SVG `rect` elements, while a custom `makeData` function generates the wave values using trigonometric sine functions. The bars animate across the full viewport width, with D3 7.9.0 handling all rendering and data updates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Tutotial Video 5 Viz (using functions to separate code)

Fifteen circles orbit in a smooth, looping dance, their opacity pulsing in a rhythmic wave as they trace overlapping circular paths. The animation is generated using D3 v7, with the `select` and `range` functions creating and updating SVG circle elements. Position and opacity values for each frame are computed from trigonometric functions based on an incrementing time variable, with data binding handled through `.data()` and `.join()`. The visualization runs on a fixed 60 FPS interval, showcasing a simple procedural approach to generative animation.

CCasualWanderer20XX
81% match
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.

EErik Sundahl
80% match
Loading thumbnail…

D3 Tutotial Video 5 Viz

A pulsing ring of fifteen translucent circles animates in a looping orbit around a central point. The visualization demonstrates D3.js’s declarative join operation, where each frame’s data array maps to circle positions and opacity values derived from trigonometric functions. Using `selectAll('circle').data(data).join('circle')`, the code updates circle attributes at 60 frames per second through `setInterval`, with a time variable `t` incrementing to drive continuous motion. The SVG rendering fills the browser window, showcasing dynamic, data-driven animation without user interaction.

CCasualWanderer20XX
79% match
Loading thumbnail…

Fork of D3 Tutotial Video 5 Viz (adding modules)

A circular swarm of 15 dots orbits a central point, with each dot’s opacity oscillating between transparent and fully opaque as the animation updates 60 times per second. The visualization uses D3 7.9.0’s `select`, `range`, and `selectAll` APIs to render SVG circles, with position and opacity derived from sine and cosine functions of an incrementing time parameter. Data is generated procedurally in `makeData` and passed to the `vizData` renderer, which updates circle attributes via D3’s join operation.

CCasualWanderer20XX
77% match
Loading thumbnail…

Viz - Bar - transition

The example visualizes ten vertical bars whose heights are determined by random-value pairs, with each bar showing both a base value and an incremental second value. Every two seconds, a new random dataset replaces the old one and the bars smoothly animate to their updated heights. Built with D3 v4 and the viz.js library, the code constructs the chart using `viz.bar()` and triggers updates via `bar.data()` combined with a `transition()` call on an SVG group element. The bars themselves are styled with a steelblue fill, and the entire process loops continuously using `setInterval`.

NNPashaP
77% match
Loading thumbnail…

Fork of D3 selection exploration - Wavy Animation

Ten points move in a wavy sinusoidal pattern across an SVG canvas, their vertical positions oscillating over time to create a smooth, continuous animation. The visualization demonstrates D3's `selectAll` and `join` API for updating existing SVG circle elements with new data on each frame. The code uses `d3.select`, `d3.range`, and a `setInterval` callback running at 60 frames per second, incrementing a time variable to drive the sine wave. The rendering relies on SVG circles with attributes for position and radius, producing a minimal, abstract motion study.

SSidney Oluoch
77% match
Loading thumbnail…

DataViz Starter

This example uses D3.js to create an animated abstract visualization. It renders a series of vertical bars that move horizontally across the canvas, with each bar containing an SVG path symbol. The code uses D3's `select`, `range`, and `symbol` APIs to generate the graphics, and a `setInterval` function to drive the animation. A mask is applied to the SVG elements, and the fill colors of the bars and symbols invert based on their index position.

Mm.rafayfaisal@gmail.com
76% match
Loading thumbnail…

D3 Selection Exploration

This example demonstrates dynamic SVG circle generation and animation using D3 v7. An array of circles, generated from a sine-based function, continuously updates position and radius to create a flowing wave effect. The code uses D3's `select`, `selectAll`, `data`, and `join` methods to bind new data and manage enter/update/exit cycles. An interval-driven animation loop calls `vizData` at 60 frames per second, with data created by `makeData` using D3's `range` utility. The visualization runs in an HTML page with no external data sources.

Aa0x0
75% match