100%

Fork of Fork of Circles with D3

✓ Published2🌍 Public

Last edited Aug 27, 2025

Created on Aug 27, 2025

This example animates a set of colored circles and lines on a pale green background. The circles grow from a radius of zero to their target sizes, while the lines draw themselves from their starting coordinates to their final endpoints. The visualization uses D3.js v7, with all SVG elements created and animated through D3's selection join operation. The `animateCircles` and `animateLines` functions leverage D3's `.transition().duration(1000)` API to smoothly interpolate the circle radii and line x2/y2 attributes over one second.

AI-generated description

D3 Visualization with Animatable Lines and Circles

This visualization demonstrates animatable SVG elements using D3.js. Both circles and lines are animated on load, with circles growing from radius 0 and lines drawing from their starting point to their ending point.

The line elements have animatable x2 attributes (x-axis coordinate of the line ending point) as specified in the task.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Circles with D3

A fixed full-screen visualization renders seven multi-colored circles on a soft green background. Each circle’s position, size, and color come from a hard-coded data array, drawn using D3’s data join and `attr` methods. A `setInterval` then drives a continuous animation, using D3 transitions with a 1000-millisecond duration to shift each circle’s center and radius in a smooth sine/cosine wave pattern. The result is a lively, looping motion that continuously warps the static layout.

BBismark Kofi Owusu Sarfo

90% match

Loading thumbnail…

Fork of Fork of Circles with D3

A collection of colorful, semi-transparent circles of varying sizes are arranged across a pale green canvas, with a large black circle at the center. A green planet orbits this central circle along a dashed gray path, while star-shaped paths are rendered using a custom function that calculates polygon coordinates. The visualization uses D3.js version 7 with its `select` and `join` methods to declaratively build the SVG elements, and employs `requestAnimationFrame` to animate the orbiting planet.

BBismark Kofi Owusu Sarfo

88% match

Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aadamsnothere@gmail.com

87% match

Loading thumbnail…

Fork of Circles with D3

Seven colored circles of varying sizes and neon hues sit fixed on a pale green field, each gently orbiting its anchor point in a slow circular drift. The animation is driven by a continuous timer from the `d3-timer` library, updating each circle’s position with sine and cosine functions every frame. The visualization uses D3 v7’s `select` and join operations to efficiently create and update the SVG circles, with data defined inline as hardcoded coordinates, radii, and fill colors.

JJose Morales

87% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to render a static collection of seven colored circles on an SVG canvas. The code employs the D3 General Update Pattern with `selectAll`, `data`, and `join` to bind an array of objects containing x, y, radius, and fill properties to circle elements. A light green background is applied via inline styles, and each circle uses a semi-transparent opacity value. The visualization demonstrates dynamic attribute assignment through arrow functions and method chaining within a `main` export function.

Bbharathavulapati@gmail.com

87% match

Loading thumbnail…

Fork of Circles with D3

Seven colored circles, each 15 pixels in radius, rest in a horizontal line at the bottom left of a mint-green canvas. Hovering over any circle smoothly animates it into an evenly spaced orbit around the screen’s center, using an ease transition over one second; hovering again returns it to its original spot. The example demonstrates D3 v7’s `select().join()` for SVG element creation and stable keyed data binding, alongside `on('mouseenter')` event handling and the `transition().attr()` API for position tweening. All seven circles—red through violet—exist in a fixed dataset.

BBen Trantanella

86% match

Loading thumbnail…

Fork of Circles with D3

This example shows a playful arrangement of overlapping circles, each with a distinct color and radius, set against a pale green background. The visualization uses D3 v7 to create and style SVG circle elements from a hardcoded array of data objects containing x, y, radius, and fill values. The code employs D3’s general update pattern with `selectAll` and `join` to bind this data, then chains `.attr` methods to apply each circle’s position, size, color, and a uniform opacity for a blended, layered effect.

22005ckv@gmail.com

86% match

Loading thumbnail…

Fork of Fork of Fork of Circles with D3

This animation shows a network of colorful circles bouncing and colliding within the viewport, with each circle containing a simplified African map outline and smaller star shapes that move independently. The visualization uses D3 v7 to render and update SVG paths via smooth frame-by-frame animation, while custom JavaScript functions handle boundary detection, collision resolution, and velocity reflection for both circles and stars. The code defines geometric path data for the continental shapes and star polygons, then manages the physical interactions entirely through manual position updates rather than D3’s physics simulation APIs.

BBismark Kofi Owusu Sarfo

86% match