Skip to main content
SimilarExport ZIP
100%

D3 Tutotial Video 5 Viz Project #1: Hammer Dodge/Goren Hammer (SASUKE)

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

This example shows a set of gray hammer-like shapes swinging from a fixed point, with each hammer rotating back and forth at varying angles and speeds. The animation uses D3 v7 with an SVG rendering approach, where `setInterval` drives a 60fps update loop, passing time-based data to a custom `vizData` function. The code generates five hammers from a `makeData` function that uses `Math.sin` to compute rotation transforms, and appends rectangles and circles to group elements within the SVG canvas.

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
75% 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
72% 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
72% match
Loading thumbnail…

D3 Tutotial Video 5 Viz Project #2: Wavy Bars

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.

CCasualWanderer20XX
71% match
Loading thumbnail…

3. D3

This example shows a group of ten to fifteen animated circles moving in a smooth, wave-like pattern across the screen, with their vertical positions and radii oscillating sinusoidally over time. The visualization is built with D3 v6 and rendered as SVG elements, with new circle properties updated 60 times per second using a `setInterval` loop and the data join pattern `selection.selectAll().data().join()`. The `makeData` function generates the dynamic coordinates using D3’s `range` helper, while the `vizData` module handles the attribute updates for `cx`, `cy`, and `r`.

SSubhamChhetri
67% match
Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle
67% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple animated visualization of fifteen circles moving horizontally across an SVG canvas. Each circle’s vertical position follows a sine wave, creating a wavy pattern that updates every second. The code imports `select` and `range` from D3 v5, builds the SVG with `select('body').append('svg')`, and uses `setInterval` with the `.join('circle')` operation to update the circle positions. The data for each frame is generated on the fly with `range(15).map(...)`, and `console.log` outputs the sine value. The rendering is SVG-based with no external data source.

HHannah Zong
66% match
Loading thumbnail…

D3 Selection Exploration - Homework

An interactive animation displays a dynamic set of circles that periodically change position, radius, stroke color, and stroke width. The D3.js library (version 7.8.2) is used to select SVG elements and update their attributes in a continuous loop. Data is randomly generated within each frame of the animation, which runs at 60 frames per second. The circles move horizontally and vertically based on sine and cosine functions, creating a fluid, wave-like motion across the canvas.

Aajoua
66% match