SynWurm

100%

✓ Published1🌍 Public

Last edited Nov 30, 2023

Created on Nov 27, 2023

SynWurm generates an animated, colorful visual composition using D3.js. It displays a dynamic set of interconnected circles, lines, and rectangles that move and change size over time. The animation is driven by a timer that updates a continuously changing dataset. The SVG rendering uses `selectAll` and `join` to efficiently update the positions, sizes, and colors of these geometric elements, creating a fluid, evolving pattern. The code generates new data points using a sinusoidal function and D3's `range` utility, with color assigned via a random color generator.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

ZenWurm

ZenWurm is an animated abstract visualization featuring a flowing chain of green circles and red squares that undulate across the screen. The shapes move and resize continuously, driven by a time-based sine wave pattern that creates a mesmerizing, organic rhythm. The animation is built with D3's data join method (`join`) to update SVG elements at 60 frames per second, while a `setInterval` loop increments a time variable used in the `makeData` function to generate new positions and radii for each shape, all rendered with SVG styling.

Aadventuresenglish.info@gmail.com

82% match

Loading thumbnail…

ZenWurm 2.0

ZenWurm 2.0 presents an abstract, animated composition of circles and rectangles that continuously morph in position, size, and color. The piece uses D3.js to bind data to SVG elements, updating their attributes in a recursive loop that simulates organic, wandering motion. The data generation, handled by a custom function, produces varying counts of shapes whose coordinates and radii are driven by sine waves. Element colors change independently at different intervals, creating a dynamic, multi-hued visual experience.

Aadventuresenglish.info@gmail.com

81% match

Loading thumbnail…

wuzTsoid

This example generates a dynamic, animated scatter of circles and rectangles that pulse and drift across the screen. The visualization uses D3's `selectAll` and `join` to bind data produced by a custom `makeData` function, which calculates positions and radii based on a time variable `t`. The shapes are rendered as SVG elements, with randomly colored circles and fixed red rectangles, and the animation loop updates them at irregular intervals using `setInterval` and JavaScript timing. The data changes continuously, creating an evolving abstract composition.

Aadventuresenglish.info@gmail.com

77% match

Loading thumbnail…

Worm-5

A growing chain of circles undulates across a violet background, its length and radius expanding over time. The animation uses a repeating interval to update a dataset, repositioning each circle along a sine wave while shifting its fill color from green toward darker tones. Built with D3 v7, the code generates data procedurally via `dataMaker.js` and renders SVG circles with chained `.join()` calls in `vizMaker.js`, applying animated attributes for x, y, radius, and fill. Strokes remain white for contrast.

YYiorgos Bagakis

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

74% match

Loading thumbnail…

Fork of D3 selection exploration - Wavy Animation

A continuous sine wave of circles animates across the screen, with vertical positions oscillating and the number of circles subtly fluctuating between around 95 and 105 in a smooth, looping motion. The visualization uses D3.js’s `select`, `range`, and `selectAll().join()` APIs to bind simulated data to SVG circles, updating positions every frame via a `setInterval` callback. Each frame regenerates an array of x/y coordinates using trigonometric functions, directly manipulating the `cx` and `cy` attributes of the rendered SVG elements at 60 frames per second, creating a fluid, wavy effect.

SSidney Oluoch

73% match

Loading thumbnail…

D3 selection exploration

Ten animated circles form a sine wave pattern across the screen, with their vertical positions shifting continuously to create a smooth undulating motion. Using D3 v7's `select` and `range` functions, the code binds an array of ten data points to SVG circle elements via the `join` method, updating each circle's `cx` and `cy` attributes every frame at 60 frames per second. The example demonstrates both the data-join pattern and the newer `join` syntax as an alternative to the older `enter`/`merge` approach, with the animation driven by a `setInterval` timer that increments a time variable.

SSidney Oluoch

73% match

Loading thumbnail…

Wave animation with d3

This example animates a dynamic wave of circles that continuously change in number, position, and radius across the screen. The visualization uses D3 v7’s `select` and `range` functions to generate positional data based on a cosine function, with a time variable `t` incrementing every frame. The circles are rendered as SVG elements and updated via D3’s `join` pattern, which efficiently manages enter, update, and exit selections. The animation runs at 60 frames per second using `setInterval`, creating a smooth, oscillating motion that responds to the evolving data.

Sserebryanaya.n@gmail.com

72% match