Skip to main content
SimilarExport ZIP
100%

Fork of Bis Circles with D3

✓ Published1🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Aug 27, 2025
Created on Aug 27, 2025
Forked from 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.

AI-generated description

Shape Silhouettes Visualization

This D3 visualization arranges shapes to form recognizable silhouettes: a star, a tree, and a skyline. Small gold stars hover around the big central star.

How it works

The visualization creates three distinct shapes using connected lines:

  • Star: A black star positioned in the center of the canvas with 5 smaller gold stars orbiting around it
  • Tree: A green tree silhouette in the left portion
  • Skyline: A city skyline made of buildings in the right portion

Each shape is created by defining key points and connecting them with lines to form the silhouette. The small stars perform a continuous floating animation around the big star.

Trump Tariff Visualization

To show the Trump tariffs visualization instead, change the call in index.js to viz(container, 'tariffs').

MIT Licensed

Similar vizzes

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

Fork of Circles with D3

This example creates an animated night sky using 200 randomly positioned stars and five larger planets rendered as SVG circles. Each star twinkles by continuously varying its opacity through a recursive transition loop, while the planets maintain a constant opacity. The visualization uses D3.js’s `select`, `join`, and `transition` APIs to bind data arrays containing position, radius, and color properties, with attributes like `cx`, `cy`, `r`, and `fill` set dynamically. A radial gradient background simulates deep space.

Ssamozarif@gmail.com
82% match
Loading thumbnail…

Fork of Circles with D3

This example is a fork of the "Circles with D3" visualization. It displays seven semi-transparent circles, each with a unique color and position, rendered on a light green background. The code uses the D3.js library, specifically the `select` and `join` functions, to create and update SVG elements. The circles' properties—center coordinates, radius, and fill color—are defined in a static data array and applied via chained attribute methods, resulting in a static, colorful composition.

AAustin Tanksley
82% match
Loading thumbnail…

Fork of Circles with D3

A static visualization of seven circles in a cream-colored container uses a custom palette of muted colors like charcoal gray, burnt orange, and beige. The circles are connected by thin, semi-transparent lines, and larger ones are framed with rounded rectangles. Rendered with D3 v7, the code uses `select`, `join`, and attribute setters like `.attr` to draw geometric shapes from hard-coded data arrays, demonstrating basic SVG construction without animation or interaction.

KKal
82% match