stepper example

100%

stepper example

✓ Published0🌍 Public

Last edited Feb 28, 2017

Created on Feb 28, 2017

This example demonstrates a stepped navigation interface with nine clickable links, where each step triggers an animated text message in the SVG below. The code uses d3.js v4 to manage the active and target step states, and `d3.select` and `transition().duration()` to fade the text in and out. The interaction model uses a "target" class to compute the next step via `Math.sign`, supporting bi-directional stepping. Rendering relies on SVG elements and CSS classes for styling and highlighting.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

sketch

This example demonstrates a jQuery plugin called `stepper` that manages step-by-step navigation through an ordered list of items, visually highlighting the active step while dimming inactive ones. The interface shows a sequence of seven steps with Previous and Next links, allowing users to move forward or backward through the list by clicking those controls or double-clicking a specific step to activate it directly. The code uses the jQuery library to implement custom event-driven behavior, binding handlers for activation, deactivation, and navigation events. The plugin manipulates CSS classes (`active` and `inactive`) to provide visual feedback, relying on the loaded Google-hosted jQuery version rather than any data source or rendering library.

DDylanFM

74% match

Loading thumbnail…

sketch

This example presents a step-by-step navigation interface where clicking a link updates the active step label. The page uses jQuery to handle the click events and a custom router function with `setInterval` to detect hash changes and synchronize the highlighted list item. The rendering approach is a simple HTML ordered list with CSS styling for the active state, and the code relies on Google's AJAX API loader to load jQuery. No data visualization or animation is shown beyond the step highlighting.

DDylanFM

71% match

Loading thumbnail…

Click Transition

Clicking the SVG triggers a transition that removes some circles and recolors the rest. Eight circles initially render in a vertical line; a click updates the data to four circles, causing the removed circles to slide rightward before disappearing while the remaining circles turn blue. Built with D3 v4, the example uses a reusable `d3.transition` with a linear ease, `.exit()` for removal, and `.attr('cx', 600)` to animate the exit path. The `d3.selectAll` and `.data()` binding drive the update, with delays staggered via `function(d, i)` callbacks.

CCoreyBurkhart

70% match

Loading thumbnail…

Gist 7330771

This example demonstrates how D3 transitions make data joins easier to follow by animating the entry, update, and exit states of SVG text elements. It shows a sequence of randomly selected alphabet letters that change every 1.5 seconds, with entering letters sliding down from above, exiting letters dropping below, and updated letters gliding horizontally to their new positions. The code uses D3’s selection joins with key functions, `transition.attr` and `transition.style` to animate positions and opacity, and relies on SVG text elements rendered in a single group. The data is a shuffled subset of the alphabet, sorted and re-joined with each interval.

11wheel

70% match

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

69% match

Loading thumbnail…

Hello Cercles

A red circle moves through a square path in five animated steps around a central group of four static circles in green, blue, pink, and orange. Clicking either the red circle or a black rectangle triggers its sequential journey via chained `transition` calls that update `transform` attributes. The example demonstrates D3.js v5 selections, SVG rendering, and local ES6 module imports for displaying a text message.

Zzeyneb.mhamedi@gmail.com

69% match

Loading thumbnail…

CDF test!

This example demonstrates an interactive text slide animation on an SVG canvas. It shows a message that shrinks and is replaced by an arrow symbol when clicked. The code uses d3.js to append a text element and a path, then links the text to the path via a `textPath` with a `startOffset` attribute. A click event triggers a transition that animates the `startOffset` to slide the text out of view, then swaps the text content after the animation ends. The rendering uses SVG and d3 transitions with a duration of 750 milliseconds.

CCBasis

69% match

Loading thumbnail…

Movements/Actions

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.

Kkau91

69% match