Ball Bounce

100%

✓ Published0🌍 Public

Last edited Jan 18, 2023

Created on Jan 11, 2023

A circle rests at the center of the screen, and the user can click and drag it with the mouse. Upon release, the ball's velocity is calculated from the drag distance and time, causing it to move and bounce off the window edges. The ball can be grabbed again mid-motion to be thrown anew. The visualization uses D3 v7’s `select`, `timer`, and event handlers on the SVG to manage rendering, with state tracked for position and momentum.

AI-generated description

Grab the circle and try to throw it. It will continue to move and bounce of walls. You can then grab it again while it is moving!

MIT Licensed

Similar vizzes

Loading thumbnail…

bouncy-ball

A lime-green circle bounces vertically inside a fixed 200-by-400 SVG canvas against a black background. The animation loops indefinitely, alternating between a quick downward fall and an upward rebound. Built with D3 v4, the bounce uses chained `transition()` calls with `ease(d3.easeQuadIn)` for the fall and `ease(d3.easeQuadOut)` for the rise, repositioning the circle's `cy` attribute between 0 and 260 pixels. A recursive `on('end', bounce)` callback restarts the cycle.

PPhilippe Rivière

77% match

Loading thumbnail…

Bouncing Balls

Ten colorful circles bounce around a canvas, affected by gravity and repelling each other when they touch. Users can click and drag any ball to fling it, with a spring-like pull force applied toward the mouse cursor. The simulation runs on HTML5 Canvas with requestAnimationFrame, using physics calculations for velocity, dampening, and collision detection between boundaries and other circles.

CCurran Kelleher

77% match

Loading thumbnail…

Bouncing Balls

Bouncing Balls demonstrates a physics simulation of colorful particles colliding and bouncing within a canvas. Clicking adds new balls to the scene. The visualization uses D3’s `forceSimulation` with `forceCollide`, `forceX`, and `forceY` to handle particle interactions, while a custom `timer` loop applies gravity and wall collision logic. Rendering is done via the Canvas 2D API, with trails, velocity lines, and arrowheads colored by speed using HSL values.

CCurran Kelleher

76% match

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.

EErik Sundahl

75% match

Loading thumbnail…

Double Harmonic

Two circles bounce between expanding and contracting in a loop, with one radius derived from a random integer and the other responding inversely to it. Built with D3 v6, the animation uses `setInterval` to regenerate data and update SVG circle attributes `r`, `cx`, and `cy` every 100 milliseconds. The `ball2radiusMaker` function toggles the second circle’s size based on whether the random value exceeds the midpoint, creating a visual counterpoint. The code reads as an algorithmic sketch inspired by Sol LeWitt’s geometric rules.

Wwgloss

69% match

Loading thumbnail…

Balls at random : Jul 29,2021

One hundred circles, each filled with a red-to-blue linear gradient, animate randomly across a black SVG canvas over five seconds. The visualization demonstrates basic D3 v6 selection, data binding, and transition methods, using `d3.select` to append an SVG and `transition().duration()` to move each circle’s `cx` and `cy` attributes. The circles, with a radius of 20 and 80% opacity, also receive a gradient stroke via the `url(#svgGradient)` reference. No external data is involved; positions are generated from `Math.random()` multiplied by each index.

NNita

69% match

Loading thumbnail…

Let's make a rolling ball with D3.js

This example demonstrates how to build a rolling ball animation using D3.js v5 with SVG rendering. The code constructs a circular graphic with alternating black and orange arc segments using the `d3.arc` generator, then applies transitions to rotate the entire group element. While the primary ball design is commented out, the active code adds a simple paragraph element styled with red text, showing basic SVG selection and manipulation. The implementation imports `select` and `arc` from D3 and includes a custom text measurement utility for calculating string dimensions.

AArnaud Gbaguidi

69% match

Loading thumbnail…

D3 selection and Exploration

A collection of animated circles moves across the screen, their positions and sizes oscillating in a wave-like pattern over time. The visualization demonstrates dynamic data binding and updates in D3 v7, using `select`, `range`, and the `.join()` method to create and modify SVG circle elements at 60 frames per second. The animation is driven by `setInterval`, recalculating each circle's x-coordinate, y-coordinate, and radius based on sine functions that incorporate a continuously incrementing time variable.

DDonald Bagwell

68% match