Propeller

100%

✓ Published1🌍 Public

Last edited Feb 29, 2024

Created on Feb 28, 2024

Forked from Windmill

A motorless propeller spins continuously on a grey background, its three blades and central hub rotating around the center of an SVG canvas. The blades use a red-to-black linear gradient, while the hub is a plain yellow circle. The rotation is driven by D3.js v6’s `transition.attrTween`, which interpolates the group’s `transform` attribute to increment the angle by 360 degrees per second with `d3.easeLinear`. No data source is involved; the visualization demonstrates a purely procedural animation.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Propeller2

A rotating three-blade propeller is visualized with D3.js, rendered as SVG shapes over a grey background. The visualization shows a central black hub with three silver blades and yellow tips spinning continuously. The rotation is achieved using D3’s `transition.attrTween` with a linear easing function, updating the group’s `transform` attribute by incrementing the rotation angle by 360 degrees per cycle and recursively restarting the animation on end. The code uses D3 v6 to append circle and rectangle elements, constructing the propeller geometry via explicit coordinate attributes.

AAsrar Al Qassem

93% match

Loading thumbnail…

windmill rotating

The windmill rotates its four black blades continuously against a dark blue sky, with a green ground and gray base completing the static scene. Five small bird shapes fly once across the sky from left to right and then disappear. The D3 v7 code builds the SVG with explicit shape attributes, then uses `transition.attrTween` with `d3.interpolate` to create the infinite blade rotation, while the birds rely on a simple duration-based transition. Animation is driven entirely through D3's transition system without external data.

Nnagasai.mandalapu@gmail.com

72% match

Loading thumbnail…

Spinny

This example visualizes a classic “spinny” loading icon using D3.js version 3. It shows a rotating ring of ten small circles that continuously spin around the center of the screen. The circles are positioned using sine and cosine functions based on a linear angle scale, with their radii varying from larger to smaller around the ring. The animation is driven by `d3.timer`, which updates the rotation attribute of a group element each frame, incrementing the angle by a fixed amount. The visualization uses SVG for rendering and relies on D3’s data join to bind an array of numbers to the circles.

CCurran Kelleher

71% match

Loading thumbnail…

D3 spinner

This example shows a minimalist loading spinner rendered as a single animated arc that rotates continuously around a circular track on a pale green background. The animation uses D3 transitions with a 20-second duration, where `transition.attrTween` interpolates the arc’s `endAngle` from 0 to 2π, and an `on("end")` callback restarts the spin indefinitely. The code builds the shape with `d3.arc()`, setting outer and inner radii relative to the container size, and positions it via an SVG `<g>` transform.

SSubhendu Karmakar

70% match

Loading thumbnail…

Sailing

A serene sea scene rendered with SVG and animated using D3.js v6. The visualization depicts a sailboat with a brown hull, green triangular sail, and mast, floating on a deep blue ocean with white wave circles oscillating vertically via chained transitions with sinusoidal easing. Clouds drift horizontally across the sky using linear transitions, while simple black bird shapes flap through the air. The code constructs the scene procedurally, generating wave data with `d3.range` and `Math.sin`, and animates all elements using D3 transitions with recursive callbacks for infinite looping.

AAsrar Al Qassem

70% match

Loading thumbnail…

Fork of D3 spinner - 2

A circular loading spinner animation comprises ten evenly spaced blue dots arranged around a light blue SVG canvas. The dots rotate positions and vary their radius and opacity based on a rotating array of angles, creating a wave-like pulse effect. The code uses D3.js selection methods, including `data` joins with enter and update handling, alongside `d3.interval` to trigger periodic rotation of the dataset. All rendering is done via SVG, with parametric circle equations computing each dot’s coordinates.

SSubhendu Karmakar

69% match

Loading thumbnail…

Spinner with d3-component

This example demonstrates how to display a spinner while data is loading and replace it with a bar chart after a simulated fetch. It uses d3-component’s conditional rendering to switch between components, with a local timer driving the spinner’s rotation based on elapsed time. The visualization is rendered as SVG, using D3 transitions with a bounce ease to animate bar heights.

CCurran Kelleher

68% match

Loading thumbnail…

circles

Three concentric circles rotate continuously around a shared center, with red and green fills determined by radius and blue radial lines indicating rotation. The visualization uses D3 version 6 to append SVG `circle` and `line` elements inside `g` groups, updating their `transform` style via a JavaScript `setInterval` timer. A CSS `@keyframes` animation on hover triggers an additional 360-degree rotation. The code demonstrates D3’s declarative selection and merging API with `d3.select`, `enter`, and `merge` on an SVG canvas sized to viewport dimensions.

MMTR

68% match