Rotate svg

100%

✓ Published0🌍 Public

Last edited Sep 10, 2024

Created on Aug 23, 2024

This example demonstrates a basic D3.js starter template, where a single SVG path element, the propeller, is animated to rotate 720 degrees over seven seconds. The rotation is achieved using D3's transition and `attrTween` API, which interpolates the SVG transform attribute. The code specifically uses `d3.select` to target the SVG element and `d3.interpolate` to create the tween function, showcasing a minimal yet effective use of D3's animation capabilities.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Propeller

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.

AAsrar Al Qassem

78% match

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

78% match

Loading thumbnail…

Simple transition in v7

A blue circle transitions horizontally across a wide SVG canvas in this minimal demonstration of d3-transition. The circle moves from the left edge to the right over four seconds, using a chained `transition()` with a `duration(4000)` call after initial attributes are set. The example uses d3.v7 to select the body, append an SVG element, and define the circle’s fill, radius, and starting coordinates before applying the animation. No data source is involved; the code directly specifies all visual properties and the animation target position.

Dd3noob

73% match

Loading thumbnail…

First D3

A minimal D3 example demonstrates a single SVG circle moving across a 500-by-500 canvas in a three-step animated sequence. The circle initially appears at coordinates (50,50), then transitions horizontally to (150,50), drops vertically to (150,200), and finally returns to its starting x-position. The animation uses chained `transition()` calls with a 1500-millisecond duration per step. The code builds the SVG scene using `d3.select("body").append("svg")` and `attr()`, relying on D3 v3 loaded from the d3js.org CDN within a plain HTML page.

227-12-95

73% match

Loading thumbnail…

d3 Animation

This example demonstrates a single-circle animation using D3 transitions. The visualization shows a red-outlined circle that starts at the left side of an SVG canvas and moves downward while changing its fill color to green over one second. The code appends an SVG element sized to the browser window, creates a circle with initial x-coordinate 200, then chains a transition with a 1000-millisecond duration to animate the y-coordinate, radius, and fill style. It uses D3 v6's `selection.transition()` and `transition.attr()` methods within a minimal HTML page.

MMTR

73% match

Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor

72% match

Loading thumbnail…

transitions

This example animates a set of circles as they move and resize across a wide SVG canvas. Five circles, each driven by values from a static JavaScript array, shift their horizontal, vertical, and radius properties over a four-second duration. The code uses D3's `select()` to append the SVG and builds the animation with the `transition()` API, chaining `.duration()`, `.attr()`, and opacity settings. The circles are rendered as semi-transparent blue shapes, with the initial data divided by a constant factor within the external data module.

NNita

72% match

Loading thumbnail…

Simple transition chaining in v7

This example uses chained `transition()` calls in d3.v7 to animate a single SVG circle through three sequential stages. The circle first slides horizontally from left to right, then expands its radius, and finally changes its fill color from blue to red, with each transition lasting 4000 milliseconds. The animation is built entirely with D3’s selection and transition API, applying attributes like `cx`, `r`, and `style` through `.attr()` and `.style()` methods. The code appends the circle directly to the body via an SVG element, with no external data source.

Dd3noob

72% match