sketch

100%

✓ Published0🌍 Public

Last edited Jan 13, 2010

Created on Jan 13, 2010

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.

AI-generated description

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

83% match

Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu

65% match

Loading thumbnail…

HTML+CSS jotdown notes misc

This example shows a GitHub-style file listing row where not-yet-loaded text is indicated by grey skeleton screen placeholders. Skeleton loading blocks replace commit message and timestamp content using CSS `clip-path` insets and a background gradient with a looping `skeleton-loading` animation. The markup is structured with ARIA roles for grid rows and cells, and an inline SVG octicon folder icon renders the directory indicator. The code demonstrates a pure HTML+CSS technique for improving perceived performance without JavaScript.

GGerHobbelt

65% match

Loading thumbnail…

Fork of Mouse Follower & Path Drawer

This example demonstrates a React application that uses D3.js to render an interactive node-link diagram. Users click on circles (nodes) to select them; clicking a second node creates a black line (link) between the two, allowing for the construction of a custom graph. The SVG rendering approach uses React state to manage the lists of nodes and links, with individual circle elements responding to `onClick` events. The code also tracks a currently selected node, highlighting it in green, and uses a UUID generator for unique node identifiers.

Mmohamed el haddadi

64% match

Loading thumbnail…

D3 PJAX

This example demonstrates a PJAX-style navigation interface where clicking links updates the page content without a full reload, using the browser’s History API to manage the back and forward buttons. The code defines a `pjax` function that attaches click handlers to all `ul li a` links, calls `history.pushState` with the target URL, and loads the new page fragment via `d3.html`. It replaces the content of `#main` with the corresponding element from the fetched document and re-applies the link handlers. A `popstate` listener loads the previous state when the user navigates backward or forward.

Mmbostock

63% match

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

63% match

Loading thumbnail…

Untitled

This example demonstrates a single-page reference guide for Chrome DevTools, organized into sections covering the Network tab, Console, Debugger, and common error-handling practices. It uses the `routie` hash router to map URL fragments to corresponding sections, logging each route change to the browser console via `console.log`. The page is built with plain HTML and vanilla JavaScript, featuring anchor links for navigation and a "Back to top" link for each section.

LLaurens

63% match

Loading thumbnail…

HTML Starter

This example demonstrates the D3 general update pattern for animated transitions in an SVG scene. It renders a bowl of fruit where apples and lemons appear, change type, and disappear at timed intervals. The visualization uses React, D3 v5's `scaleOrdinal` for color and radius mapping, and the `select` API to manage enter, update, and exit states for circles and text labels.

EEmma

63% match