ants_garden

100%

✓ Published0🌍 Public

Last edited May 15, 2017

Created on May 11, 2017

Two identical SVG ants wander randomly across the screen. The scene shows how D3 can import and duplicate vector graphics from an external XML file, using `d3.xml` to load the ant artwork and `document.importNode` to clone it. Each ant is a separate data object tracked with position, angle, and speed; a `d3.timer` drives their movement while `d3.selectAll` and `.attr("transform")` update the SVG transforms. Hovering over either ant pauses its motion, and moving the mouse away resumes it. The visualization relies on SVG animation and the MIT-licensed source from BrunoDumas.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Ruler and ants problem

A line of red and black circles moves across an SVG ruler, bouncing off the edges and each other. The simulation uses D3 v6 with `d3.select` to manage the SVG and `d3.axisBottom` with `d3.scaleLinear` for the ruler. A `setInterval` updates positions every 70 milliseconds; collisions reverse velocities when circles overlap.

GGiorgi Eufshi

73% match

Loading thumbnail…

SVG Swarm

Five hundred steel-blue circles drift in a simulated swarm, their velocities and positions updated each frame with a simple particle model. D3.js v3 binds the data to SVG circle elements, translating each via the `transform` attribute and scaling its radius based on velocity. A `d3.timer` callback drives the animation, while a live FPS counter in the page header reports the update rate. The visualization compares SVG rendering performance against a canvas-based alternative, using D3's linear scales to map the particle coordinates to pixel space.

Mmbostock

67% match

Loading thumbnail…

Bees

This example presents an animated SVG scene where 20 bee-like figures move randomly across an 800×600 canvas. Each bee consists of a yellow circular body and two gray wings that continuously flap using `d3.interpolateString` within a recursive `transition.attrTween` loop. The bees’ positions are updated every 10 seconds via chained `transition` calls with `easeLinear`, selecting random coordinates from the viewport. The scene uses D3 v6 to build and animate the SVG elements directly within HTML, with no external data source.

AAsrar Al Qassem

66% match

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel

65% match

Loading thumbnail…

Untitled

A tiny SVG viewport shows 1,000 randomly placed circles bouncing and wrapping around its edges, with a live frames-per-second counter in the corner. The animation runs through `d3.timer`, updating each circle’s `cx` and `cy` attributes based on randomized velocity values. All rendering uses SVG elements and D3’s data join, with positions recalculated on every tick to keep the motion continuous.

KKanishk Mamgain

65% match

Loading thumbnail…

Untitled

This example demonstrates a full-screen, animated visualization built with SVG, showcasing a dynamic network of connected particles. The scene uses D3.js’s `d3.forceSimulation` to compute particle positions and link forces, while SVG circle and line elements render the nodes and edges. The simulation runs continuously, with the nodes gently drifting and repelling each other against a dark background. The code relies on standard SVG attributes and D3’s selection methods, with the `overflow: hidden` CSS rule ensuring the canvas remains edge-to-edge without scrollbars.

MMelissa Prax

65% match

Loading thumbnail…

Untitled

A cluster of 100 circles, each colored by one of four categories, moves under a force-directed layout in an animated SVG scene. D3's `d3.layout.force` continuously updates node positions, while a custom tick function applies directional offsets based on node index to separate groups into distinct clusters. Clicking or dragging any circle adds random jitter, causing the clusters to scatter and then re-form. The visualization uses D3 v3 with React, fading the entire SVG in over one second on load.

CCO18323

65% match

Loading thumbnail…

D3 selection exploration

This example demonstrates how D3’s data join and selection mechanism dynamically updates an SVG scene in real time. An animated set of circles shifts vertically based on a sine wave, with their count oscillating between five and fifteen as time progresses. The code uses `d3.select`, `d3.range`, and `.join('circle')` to bind incoming data to SVG elements, updating positions each frame via `setInterval`. Data is generated procedurally from a mathematical function rather than an external dataset.

PPetrescu Alexandru

65% match