Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Bis Circles with D3

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
91% 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
85% 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
84% 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
83% 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
81% 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
80% match
Loading thumbnail…

Fork of Hot Circles

Animated circles in vivid colors pulse and drift across a black canvas, blending via screen mode for luminous overlaps. The visualization reads a static CSV dataset of circle positions and radii, rendering each as an SVG element with a 2-second growth transition. D3’s selection joins handle enter, update, and exit states, while `transition` with `easeLinear` animates movement and resizing. Data coordinates drive the layout, with opacity set for subtle layering.

Bbianca cheng costanzo
80% match
Loading thumbnail…

Fork of Fork of D3 js part 2

A looping animation shows a row of circles moving in a sine-wave pattern across the screen, with each circle’s vertical position and radius oscillating based on a time parameter. The number of circles also varies smoothly between five and fifteen. The visualization uses D3 v7’s `select`, `range`, and data join to bind generated data to SVG `<circle>` elements, updating them every frame via `setInterval` and a custom `vizData` function. The rendering is pure SVG without additional JavaScript libraries.

GGautier DAVID
79% match