Gist 46260

100%

✓ Published0🌍 Public

Last edited Jan 13, 2009

Created on Jan 13, 2009

This example shows a set of hoverable links that reveal hidden text spans when the mouse enters or leaves each link. The code uses jQuery’s `.hover()` method to toggle the visibility of the corresponding `.hoverable span` elements, with the text initially hidden via `.hide()`. The data is embedded directly in the HTML structure, and the interaction is driven by standard jQuery event handlers rather than any visualization library. The rendering approach relies on simple DOM manipulation, with no canvas, SVG, or external data sources involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 280440

This visualization demonstrates a custom hover effect for navigation links, where each link reveals a small dot marker on its left side. The effect is implemented using CSS pseudo-elements, specifically `:hover:before`, which injects the dot image via the `content` property. The dot is positioned absolutely using `top: 6px` and `left: 4px` relative to the link, and the rule applies only when the user hovers over the link. No JavaScript or data libraries are involved; the example relies purely on CSS styling. The `gistfile1.css` file contains the styling, and the dot image is loaded from an external path.

CCaged

73% match

Loading thumbnail…

linked-hover

Linked-hover displays two line charts drawn side by side from randomly generated data, each with 100 points. Hovering over a circle in either chart emphasizes the corresponding point in both charts by enlarging it and adding a blue stroke, while also updating the URL hash to reflect the selected index. The visualization uses D3.js v3 for SVG rendering and axes, with lodash helpers for data manipulation. The linked selection is driven by mouseover events and a shared setHover function that applies transitions to all circles, ensuring synchronized highlighting across charts.

11wheel

69% match

Loading thumbnail…

Untitled

Gray placeholder text blocks sit centered on the page as transparent spans, hiding their content until hovered, when the text turns black on white. The CSS defines a fixed 480-pixel width and a gray background with invisible text, while the HTML supplies repeated lorem ipsum paragraphs inside a single span. Hovering any span reveals its lettering. The example relies solely on plain HTML and CSS, with no JavaScript libraries, to demonstrate a simple interactive reveal effect for a block of dummy copy.

TTBD

68% match

Loading thumbnail…

Mouseenter

A nested set of semi-transparent rectangles demonstrates the practical difference between D3’s mouseenter/mouseleave events and the standard mouseover/mouseout events. Each time the mouse enters a group, a text label with the event name (e.g., "mouseenter" or "mouseover") fades in at the cursor position, while moving between nested rectangles triggers only the mouseover/mouseout pair. The code attaches these four handlers to a recursively nested SVG `<g>` element, uses `d3.mouse` for cursor coordinates, and animates the labels’ opacity to zero via D3’s `transition`. A polyfill is mentioned for browsers without native mouseenter support.

Mmbostock

67% match

Loading thumbnail…

MouseOverMyColorIS

Twenty semi-transparent circles scatter randomly across an SVG canvas, each filled with a distinct color from D3’s `d3.scale.category20` palette. Hovering over any circle triggers a native browser tooltip via an appended SVG `<title>` element, displaying that circle’s specific color name. The example uses D3’s data join to bind randomly generated coordinates and radii, then appends circles and their tooltips. It demonstrates adding interactive title elements directly within D3 selections, with no additional libraries beyond the core `d3.js` script.

BBAvlino

66% match

Loading thumbnail…

Gist 364813

This example implements a custom jQuery autocomplete widget with animated show-and-hide behavior. It uses `jQuery` methods such as `fadeTo`, `stop`, and `show` to control the visibility of a suggestion box, while handling keyboard navigation for arrow keys, tab, and enter. The code fetches suggestions via JSONP requests, renders them as list items, and tracks the selected index with `data`. Stippling effects—fade-in and fade-out—are applied through custom functions, though the code notes issues with animation state confusion. The source is a JavaScript file from a gist.

XXXX

64% match

Loading thumbnail…

Link anatomy

This interactive HTML page dissects a URL into its semantic components—protocol, host, port, pathname, search, and hash—by displaying each part as a clickable span. Hovering over a component highlights it with a tooltip label, while clicking sets the page’s hash to that component’s ID, updating the browser location. The implementation uses jQuery for click handling and CSS pseudo-elements for tooltips, with a fixed example URL hardcoded in the markup.

Aabernier

63% match

Loading thumbnail…

Gist 10297417

This example shows a Jupyter notebook template that hides input cells and reveals them on demand when a user clicks an output area, using jQuery to toggle visibility. The notebook’s rendered HTML is styled so code and text are centered, with hidden prompts and a custom font size for code blocks. The template extends the base HTML exporter and relies on jQuery’s `slideToggle` to animate the display of input sections, while CSS controls layout and typography. It demonstrates a reusable approach for converting notebook content into an interactive, cleanly formatted web page.

Aakeshavan

63% match