Movements/Actions

100%

Movements/Actions

✓ Published0🌍 Public

Last edited Jun 19, 2019

Created on Jun 18, 2019

This example demonstrates interactive SVG animations for exploring user-driven movements and actions. Users can click and hover over rectangular elements to trigger color changes and animated transitions, such as moving a rectangle across the canvas or modifying bar heights and positions. The visualization uses D3 v5 with transitions, event handling, and a JSON data file containing country rankings over time. The code employs `d3.transition`, `d3.easeLinear`, and D3's data-binding methods to update elements dynamically.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel

78% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates interactive D3 transitions on SVG shapes, starting with static blue, red, and yellow elements before a button triggers animated rectangles that move to random coordinates and change colors based on an array of six color objects. It uses d3 v4, including `selectAll`, `data`, `enter`, `merge`, and chained `transition()` calls with `.duration()`. The code binds data to newly appended rectangles, animating their x/y positions and fill colors, illustrating data joins and update patterns.

KKristianaaron

77% match

Loading thumbnail…

TD1

Three circles—green, blue, and red—sit in a row on a gray SVG canvas. Clicking a rectangle starts a two-second animated transition that moves the red circle diagonally downward, followed by a second transition returning it horizontally. The red circle also turns black on mouseover, while the green circle responds to hover via a CSS class. Built with D3 v5, the example demonstrates selections, event handlers, and chained `transition.attr` calls, with no external data source.

LLauranJade

76% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This interactive example demonstrates the incremental process of building and animating SVG shapes with D3.js. A button triggers a sequence that creates, moves, and recolors rectangles with smooth transitions. Using d3 v4, the code binds an array of color objects to SVG `rect` elements via `selectAll` and `.data()`, then applies `transition()` and `duration()` to animate their positions and fills. Static blue, red, and yellow shapes provide visual context while the dynamic data-driven rectangles demonstrate the enter, merge, and update pattern.

MMandyMeindersma

76% match

Loading thumbnail…

transition exploration -- first trials with transitions

A sequence of chained SVG transitions animates rectangles, lines, ellipses, and polygons through shifting colors, stroke widths, positions, and shapes, including skewing, translation, and corner rounding. Built with D3 v6 in a React-accessible setup, the code uses `selection.transition().duration()` to chain staggered state changes on each element. The visual explores how interpolated attributes like `fill`, `stroke`, `transform`, and `points` evolve over time, producing a choreographed, abstract composition on a blank canvas.

MModalMBS

76% 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

76% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This interactive example demonstrates how to add, remove, and transition SVG shapes in D3 v4. Clicking the "Run d3 code" button appends a new green rectangle, assigns it a random y-position, and uses `transition().duration(500)` to animate it horizontally. It also binds an array of color objects to a data join, creating multiple colored rectangles via `selectAll().data().enter().append()`, each with a matching fill and an animated x-position. The underlying static SVG contains basic shapes like rects and a circle with explicit stroke and fill attributes.

MMandyMeindersma

76% match

Loading thumbnail…

D3 Workshop: Part 2 - SVGs and d3 Transitions

This example demonstrates how to animate SVG elements with D3 v4, showing a static red circle and blue rectangle alongside small rectangles that jump to random positions and colors when a button is clicked. It illustrates data joins by binding an array of color objects to newly appended rectangles, then transitions them with `d3.transition()`. A `setInterval` loop continuously updates the rectangles' positions and fills using random values from the data array, while the initial static shapes remain unchanged. The code uses `selection.enter()`, `merge()`, and chained `.attr()` and `.style()` methods for smooth animations.

AAndrewMcKernan

76% match