Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Circles with D3

✓ Published0🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Aug 27, 2025
Created on Aug 27, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
89% match
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
87% match
Loading thumbnail…

Fork of Fork of Circles with D3

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.

BBismark Kofi Owusu Sarfo
86% 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
85% match
Loading thumbnail…

Fork of Fork of Bis Circles with D3

A compact D3.js animation renders three distinct geometric shapes—a star, a tree, and a skyline silhouette—as closed line drawings on a cream background. Each shape expands outward from its center using chained `transition()` calls, and hovering over the star thickens its stroke via `mouseenter` and `mouseleave` events. Five additional decorative stars float and animate independently. A separate, interactive line chart displays Trump's tariff rates over time for nine African countries, reading data from a local CSV file and using `scaleTime`, `scaleLinear`, and `line` to draw the series.

BBismark Kofi Owusu Sarfo
85% match
Loading thumbnail…

Fork of Circles with D3

This example displays a scatter of seven colorful circles of varying sizes over a large central circle containing a simplified African continent outline. The visualization uses D3 v7 with a `ResizeObserver` to redraw responsively, and the continent is drawn as a hand-coded path computed from the center circle's coordinates. Circle positions and radii are hardcoded as static data, with `.join()` and `.attr()` methods managing SVG element updates. The central circle uses a light fill with dark stroke, while the data circles render semi-transparently on a pale green background.

BBismark Kofi Owusu Sarfo
84% match
Loading thumbnail…

Fork of Bis Circles with D3

This D3 v7 visualization animates three shape-based silhouettes—a star, a tree, and a skyline—constructed from connected line segments. A central black star is surrounded by five smaller gold stars that float continuously, while the tree and skyline use distinct colors. The code uses D3's `select`, `join`, and `transition` APIs to draw lines, apply hover effects, and animate expansion from the center, with a visible star-orbit animation.

BBismark Kofi Owusu Sarfo
84% match
Loading thumbnail…

Fork of Circles with D3

This visualization displays a collection of colorful circles arranged on a light green background, creating a playful, abstract composition reminiscent of a field of confetti. Using D3.js v3, the code creates an SVG canvas sized to its container, then applies data-driven attributes to render each circle with specific x, y coordinates, radius, and fill colors, including various shades of orange and yellow. The `select`, `selectAll`, `data`, and `join` methods manage SVG element creation, while opacity is uniformly set to 0.708 across all circles, giving the overall image a slightly translucent, layered appearance.

PParth Shroff
84% match