Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Jjesramyep1263
Last edited Apr 13, 2020
Created on Apr 13, 2020

A vertical column of 50 circles animates across an SVG canvas, cycling horizontally in a loop. The circles are colored along a dark-to-light scale using `d3.scaleLinear` with HSL interpolation, creating subtle banding. D3 v4 selects the SVG, appends the circles, and chains `transition` calls with staggered `delay` and recursive `on("start", repeat)` to move each circle from left to right and back, demonstrating fundamental DOM manipulation and animation.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

Fifty circles, one per vertical position, traverse the SVG horizontally in a looping animation. Using d3.scalePoint for y-coordinates and d3.scaleLinear with HSL interpolation for fill colors, each circle transitions across the width, then snaps back and restarts via d3.active and nested transitions. The page initially displays “Loading…” before an unrelated JavaScript module (getCars, generateReport) asynchronously populates a message element with a filtered car report, though that data does not affect the visualized motion.

Jjesramyep1263
88% match
Loading thumbnail…

Untitled

Two circles move left to right across an SVG canvas, tracing a sine wave vertically as they travel. A black line connects their current positions, forming a dynamic segment that shifts with each animation frame. The visualization uses D3’s `select`, `range`, and `join` methods to update circle attributes, while `setInterval` drives the animation loop and a custom `drawLine` function appends and removes the connecting line. Randomly generated array manipulation is also present but unused in the final rendering.

Ssubratanp
83% 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
83% match
Loading thumbnail…

Untitled

Three semi-transparent circles overlap on a dark SVG canvas, with brown, steelblue, and green fills at 50% opacity. The circles are positioned so their intersections create blended secondary colors, demonstrating basic transparency and layering effects. The visualization uses D3.js v3 to append SVG circle elements directly to the document body, with fixed pixel coordinates for the center points and radii. The rendering is entirely client-side, with no external data source, and the geometric composition is hardcoded in the script.

YYashasvi Koul
83% match
Loading thumbnail…

Untitled

This visualization generates a dense packing of animated circles that grow from the center of an SVG canvas. Using a quadtree data structure to optimize collision detection, the algorithm iteratively places new circles in the largest available gaps, gradually increasing the number of candidate positions per circle. The code uses `d3.quadtree()` for spatial indexing and SVG `circle` elements with `transition()` animations to scale each circle's radius from zero. The process continues for 25,000 circles, with fill opacity randomly varied between 50% and 100%, creating an organically growing, space-filling composition.

Ppoppy
83% 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
83% match
Loading thumbnail…

Untitled

Three circles of different sizes and colors are rendered in an SVG, each labeled with its corresponding node name and filled with a diagonal stripe pattern. The visualization uses D3 version 3 to bind data from a JSON array containing node positions, radii, labels, and colors. The code appends a pattern definition to the SVG defs and creates two overlapping circles per node: a solid color base and a striped overlay, with text positioned relative to each circle’s radius.

MMokshithabhi
82% match
Loading thumbnail…

Untitled

Five circles in a horizontal row show a small dataset of numeric values, sized proportionally and shaded with a sequential color scale from light to dark green, with each value labeled beside it. The code uses D3 v4’s data join to bind an array of five numbers to SVG group elements, then appends circles and text. Circle radii are scaled by the data value, and colors come from a hardcoded array, while dimensions are set directly on the SVG.

DDavid-Wong110723
81% match