Skip to main content
SimilarExport ZIP
100%

sketch

✓ Published0🌍 Public
DDylanFM
Last edited Jan 13, 2010
Created on Jan 13, 2010

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.

AI-generated description

Similar vizzes

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
83% match
Loading thumbnail…

Gist 305339

This example demonstrates a reusable jQuery plugin pattern for encapsulating a custom visualization or interaction, applying it to selected DOM elements with configurable defaults. The code defines a `PluginClass` that initializes on plugin call, using `$.fn.extend` and `$.extend` to merge user options with defaults. It shows the structural scaffolding for a visualization module, though it contains no actual rendering logic or data-binding calls. The implementation relies on jQuery’s event and DOM utilities, with the plugin returning `this` to support method chaining, a common convention for jQuery-based visual components. The source is a single JavaScript file from a gist, focusing on code organization rather than visual output.

DDylanFM
66% match
Loading thumbnail…

step by step form

This example demonstrates a multi-step form with a visual progress tracker. The form uses a numbered list of four steps, with the active step highlighted in purple, and each step displays as an animated sliding fieldset. The code uses vanilla JavaScript event listeners to navigate between fieldsets, storing input values in a Map array. CSS animations (`showme` and `hideme`) control the slide transitions, while the progress bar is built with styled list items and counters. The final review page displays all collected data as text before submission.

KKacieW
65% match
Loading thumbnail…

Gist af897f78753e7f850cce144cb3a1ce26

This example demonstrates a Sketch plugin interface with synchronized slider, input field, and stepper controls that all adjust the same numeric value. The code uses Objective-C with Apple's Cocoa and JavaScriptCore APIs, including `MOJavaScriptObject` for bridging JavaScript callbacks. It loads a user interface from a NIB file via `loadNibFile` and `NSBundle`, and shows how `sliderChange`, `inputChange`, and `stepperChange` actions keep the three widgets in sync. The `clickHello` method invokes a JavaScript function through `callFunctionWithArguments`, connecting the native UI to scripted behavior.

KKevinGutowski
64% match
Loading thumbnail…

Sequence explorer - visitor flow

This example shows a sequence explorer visualization that tracks visitor flow through events, using a Sankey-style diagram where nodes represent event steps and paths represent transitions between them. It demonstrates how to include free-floating nodes by adding an invisible dummy event, here named a space, which appears as a hidden node on the y-axis. The code uses the D3 v4 library with a custom `sequenceExplorer` plugin, loading data from a JSON file where each link specifies source and target event positions. The `eventOrder` API arranges the visible events (C, B, A) while the dummy event is pushed to the top, and CSS rules hide its nodes and paths. A dummy path with a large value ensures proportional scaling of all other nodes and paths.

EEE2dev
60% match
Loading thumbnail…

Hello stimulusjs

This example demonstrates a simple interactive slideshow and greeting form built with Stimulus and D3. It shows how Stimulus controllers manage UI state, such as navigating between emoji slides with next/previous buttons, and how user input in a text field triggers a D3-powered greeting. The slideshow uses `data-controller`, `data-target`, and `data-action` attributes to bind behavior, while D3’s `d3.select` updates the page text. The slide visibility is toggled via CSS classes, and the current index is stored in Stimulus’s data map. The code relies on the Stimulus application and controller classes, plus D3 for DOM manipulation.

PPhilippe Rivière
60% match
Loading thumbnail…

sequence explorer - with events not connected to the next one

This example shows a sequence explorer visualization where individual events are displayed as horizontal bands that do not connect from one step to the next, emphasizing discrete stages rather than continuous flow. The chart uses D3 v4 and the custom `sequence-explorer.v20.min.js` library, with data loaded from embedded CSV-like text blocks. It renders nodes as rectangles and paths with varying stroke widths based on frequency values, while the CSS rule `path.lsx1.ltx1 { stroke: none; }` hides all vertical segments, making only horizontal transitions visible. The code initializes the chart via `sequenceExplorer.chart().showNodeLabels(false)` and binds it to a `div` using `.call()`, with a sample dataset containing frequencies for drinks like beer and cider across three time steps.

EEE2dev
59% match
Loading thumbnail…

Sequencer

This interactive music sequencer combines a piano keyboard with an 8-step programming grid for composing rhythmic patterns. The interface displays a grid where users toggle cells to activate notes and adjust playback tempo, while playback animates a highlight moving across the steps. React manages the application state and handles user interactions, while SVG renders the grid and keyboard with dynamic colors indicating programmed notes versus currently playing ones. The audio component generates sine wave sounds in real-time through the Web Audio API, creating immediate auditory feedback for each programmed step.

CCurran Kelleher
59% match