css animation

100%

✓ Published0🌍 Public

Last edited Jan 7, 2017

Created on Jun 14, 2018

This example demonstrates a CSS-based animation of a string of holiday lights, created entirely with D3.js and vanilla JavaScript. It shows a row of glowing, diamond-shaped bulbs alternating between blue and orange, with each color pulsing on and off in a staggered rhythm. Clicking any bulb removes it by fading it to black, using D3’s `transition` and `style` methods to animate opacity and disable the CSS keyframe animation. The page generates 75 bulbs via a `for` loop, while D3 selects all elements to bind click handlers. The rendering relies on CSS `@keyframes` for the pulse effect and D3 v4 for interactivity.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

71% match

Loading thumbnail…

dashed arrays

A single spiral path and a separate red dashed curve are layered on a light background, both given a soft drop shadow through an SVG filter. The spiral is animated to rotate continuously, while the red curve uses CSS `stroke-dasharray` and `stroke-dashoffset` keyframes to make its dashes appear to flow along the path. The example demonstrates how CSS animations can drive SVG stroke effects, with the rotating spiral and moving dashes creating a dynamic, kinetic composition. The code relies on D3 v4 only to set the SVG dimensions; all visual styling and animation come from CSS.

PPatrick Wojda

71% match

Loading thumbnail…

Untitled

A grid of 4,002 small square divs cycles through a continuous color animation, shifting from light gray to steel blue, then to orange, and back to light gray. The page uses D3 v4 with `d3.interpolateRgb` for color transitions and `d3.active` to manage chained, repeating transitions with random delays. The example demonstrates modular JavaScript with ES6 imports, including a promise-based `getCars` function and data filtering from a JSON array, though the grid itself relies solely on D3's selection and transition methods.

Jjesramyep1263

70% match

Loading thumbnail…

Animation Practice

A blue div demonstrates chained D3 transitions, changing background color to green, fading to transparent yellow, then returning to full opacity over three 3-second stages. Using D3 v7’s `transition`, `duration`, and `style` methods within `index.js`, the animation runs on page load via `main()`. The example shows basic sequencing without data, relying on SVG-free DOM manipulation and the `d3.select` API.

Aadventuresenglish.info@gmail.com

70% match

Loading thumbnail…

Fork of D3 Transitions with animation

This example showcases D3 transitions animating a set of circles that drift randomly across a dark blue background. Six colored circles enter, move, and shrink away using staggered slow and fast transition speeds with an easeLinear timing function. The visualization uses d3.select and d3.transition APIs from the D3 v7 library to manage enter, update, and exit selections, moving circles to new random coordinates while adjusting their radii for a dynamic, fluid effect.

Oownerofthesoul0000@gmail.com

70% match

Loading thumbnail…

D3 Transitions

This example demonstrates how D3 transitions animate circles across a light green canvas, with circles entering at zero radius and expanding to their final size, while updates move and resize smoothly. The code uses `select`, `transition`, and `easeLinear` from D3 v7, applying a slow 2000ms enter transition with staggered delays and a faster 500ms update transition. A key function on `d.id` drives the enter, update, and exit selections, with exits shrinking back to zero before removal. The six circles have predefined positions, radii, and hex color fills.

SSubhendu Karmakar

70% match

Loading thumbnail…

Transition Speed Test

This example demonstrates the speed of D3’s transition engine by animating a 48×48 grid of small square divs from white to black. Clicking the button triggers a one-second transition on all 2,304 elements simultaneously, changing their background-color and outline-color. The code uses d3.select, d3.range, and transition().duration().style() to apply the animation, responding to a click event on a button. The grid is rendered as HTML divs styled with CSS floats, and the transition is built entirely with D3 v3, avoiding jQuery or CSS-only approaches.

Mmbostock

69% match

Loading thumbnail…

Cluster layout

A blue square animates from 200 to 500 pixels wide after a one-second delay, then turns red when clicked. The example demonstrates D3 transitions and event handling using `d3.select` and the selection’s `.transition()`, `.delay()`, `.duration()`, and `.on("click")` methods. The page uses D3 version 4.2.2, loaded from a CDN, with inline CSS styling for the square’s dimensions and background color. No data is loaded; the visualization relies entirely on programmatic style changes to illustrate basic interactive animation.

FFrissAnalytics

69% match