rippls

100%

✓ Published0🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

A field of colorful expanding circles animates continuously across the screen, with each circle growing from a small point until it fades and disappears. The visualization uses D3.js v7’s `d3.interval` to spawn a new circle every 100 milliseconds, while `d3.timer` drives the animation loop that increments each circle’s radius and updates its stroke opacity. Randomly positioned circles are colored using `d3.interpolateRainbow`, and the rendering is done via SVG circle elements appended to the document body. The example demonstrates a particle system built entirely with D3’s timing and selection APIs.

AI-generated description

Unlocking P5.js with hot reloading!

This example is copied from the P5: Functions example. Several modifications were required to make it work in VizHub with hot reloading:

Since VizHub uses ES modules, we can't rely on the P5 globals (like setup and draw), and we can't rely on the way P5 usually runs and interprets those.
Therefore in index.js, some setup is required to import P5 and manually execute the Sketch.
To support hot reloading, we store the sketch instance on the container DOM element, and remove the old one if it's present.
The sketch is defined in sketch.js as an ES module that exports a function that accepts the container element. This was required so that we can call use the P5 parent function to tell it to attach the canvas to our container element.
Within the sketch, we can't reference functions like createCanvas and background because we are using ES modules and not globals. However, we can "simulate" globals by extracting those functions from the p5 instance p! Since those internally reference this, we need to use bind to make sure that they work properly. If you need more p5 functions, you can follow the same pattern used here.
Finally, we need to attach our setup and draw functions to the p5 instance.

I've tried to make this setup mimic regular P5 in the internals as much as possible. It should, in theory, be possible to copy the code from any P5 example straight into this template. Just make sure to:

Set up .parent on the canvas
Extract the p5 instance functions you need
Attach your setup and draw functions

Magically, this all works pretty well with VizHub's hot reloading, so you can use Alt+drag to edit numbers and see the rendered graphic update instantly.

Enjoy!

MIT Licensed

Similar vizzes

Loading thumbnail…

expanding-circles

Expanding circles continuously appear across the screen, growing from tiny dots to large rings with random fill and stroke colors. The animation generates a new batch of circles every second, each positioned on a grid spanning the full viewport. The code uses D3’s selection, data join, and chained transitions with `transition.attr('r')` to animate radius, while leveraging `d3.shuffle` to randomize drawing order. The SVG rendering relies on D3’s `append` and `translate` helpers from the d3-starterkit, with colors generated by a custom `randColor` function.

11wheel

76% match

Loading thumbnail…

OMG Particles!

A mouseover-driven particle burst fills the screen with expanding, fading rings. Each pointer movement inserts a new circle into the SVG, which grows over two seconds and fades away, creating a trail of colorful, overlapping ripples. The example uses D3.js v3, with a transition on the circle’s `r` and `stroke-opacity` attributes, and generates hues via `d3.hsl`. The background is a static SVG rectangle that captures pointer events.

Mmbostock

76% match

Loading thumbnail…

rippls

Three concentric circular targets, each composed of nested gray rings, appear on a light gray background, drawn with P5.js. The sketch computes each ring's size and shade by dividing the target's diameter into equal steps, creating a gradient from dark at the center to light at the edges. Using the P5.js API, the code binds functions like `createCanvas`, `ellipse`, and `fill` to the instance, then attaches `setup` and `draw` to render the static composition once. The visualization demonstrates how to structure a P5.js sketch with ES modules and hot reloading in a container-based environment.

Nnagasai.mandalapu@gmail.com

75% 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

75% match

Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita

75% match

Loading thumbnail…

Select D3 L4

A set of circles animates in a sine-wave pattern across the screen, with each circle’s vertical position and radius fluctuating over time. The visualization uses D3’s `select` and `range` functions to generate data and bind it to SVG circle elements via `join`. A `setInterval` loop updates the data every 60th of a second, recalculating each circle’s `cx`, `cy`, and `r` attributes based on a changing time variable. The animation runs continuously, creating an organic, flowing motion.

Mmaciekawsq@gmail.com

75% match

Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock

75% match

Loading thumbnail…

Fork of D3 Starter

This example shows a continuously animated field of colored circles that oscillate vertically in a sine-wave pattern while subtly shifting their fill colors. It demonstrates a simple dynamic scatterplot with real-time updates driven by a timer interval. The visualization is built with D3 version 7, using the `d3.select` API to append an SVG canvas, `d3.range` to generate up to 2,000 data points, and data joins to bind circle elements to changing values. Circle positions and RGB fill colors are recalculated from the sine of the current time step, producing a smooth, wave-like motion across the display.

AAlexanderShaw

75% match