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.
AI-generated descriptionShape 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').
Comments
Sign in to join the discussion.