Skip to main content
100%

Fatboy: Endless Wall listener

✓ Published0🌍 Public
Aantichaos
Last edited Oct 11, 2015
Created on Oct 11, 2015

This example tracks clicks on post images in an endless-scrolling blog feed and sends the interaction to a data layer. The code listens for click events on `a.link-post img` elements, then extracts the post’s publication date, image URL, link href, and title from the parent attributes and the image’s `alt` text. It pushes these fields as an `EWclick` event into `dataLayer`, enabling analytics tools to record each click with its associated metadata. The implementation relies on jQuery for event binding and attribute access, with no visual rendering or charting libraries involved.

AI-generated description

Similar vizzes

Loading thumbnail…

JS Bin

The visualization is a dog image selector that displays a photo of a dog when a user clicks its name in a list. Each click makes the corresponding image visible, while hiding all others, and inserts a caption with the dog's name above the image. The page uses plain JavaScript with `addEventListener` for click handling, `classList.add` to toggle the `active` class, and `createElement`/`insertBefore` to manage the caption. No external libraries are used; the images are loaded from static Flickr URLs via `img` tags.

KKacieW
56% match
Loading thumbnail…

Gist b7e664bfb668a567497d

An interactive audio visualization displays frequency data from a podcast episode as scattered points and a waveform on a black canvas. D3.js drives the animation loop, while the Web Audio API’s `AnalyserNode` captures frequency bins in real time. Two layered canvas contexts render fading frequency bars and a moving line, with colors shifting based on overall audio intensity. Clicking a button starts playback of the Serial podcast audio file, synchronizing the visualization with the sound.

11wheel
52% match
Loading thumbnail…

Gist 518525

This example visualizes the JavaScript events bound to elements on a page, showing their frequency and the element types they target. It uses jQuery’s `.data(‘events’)` to inspect registered handlers, then binds a global listener to all those event types via `.bind()` on the `html` element. As events fire, the code increments per-event and aggregate counts, logging each target’s `nodeName` into arrays for later analysis. The underlying data comes from live user interactions on the rendered DOM, providing a real-time snapshot of event activity without any external dataset.

DDylanFM
51% match
Loading thumbnail…

JS Bin

This interactive dog clicker displays a list of dog names and images, allowing users to select a dog and click its photo to increment a visible click counter. Clicking the "Admin Change" button reveals a form for editing the selected dog’s name, image URL, and click count, with save and cancel options. The interface is built with plain HTML, CSS, and vanilla JavaScript, using DOM manipulation methods like `createElement`, `addEventListener`, and `classList.toggle` to manage the view and form interactions.

KKacieW
51% match
Loading thumbnail…

Gist 2d272134b57b02eb8cdd0c5904249591

This example tests the archival fidelity of a web page by loading a series of images and scripts that mimic dynamic behavior, including DOM manipulation, AJAX requests, and delayed updates. It uses JavaScript’s `XMLHttpRequest` to fetch remote images and replaces them via base64 data URLs, while `setTimeout` and scroll events trigger asynchronous content changes. The page is rendered within an iframe by the pywb web archiving tool, with a banner and rewrite layer applied. The visualization demonstrates how archived sites handle live interactions and resource loading over time.

NN0taN3rd
51% match
Loading thumbnail…

Medium Post Earnings

This example shows a letter frequency bar chart with earnings and view counts from a fictional data CSV. The chart visualizes counts across letters, with bars that highlight when clicked. Built with React and D3 v7, it uses `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for axes, and `ResizeObserver` to adapt to container size. Clicking a bar toggles its selection, changing fill color and opacity.

NNita
51% match
Loading thumbnail…

simple buzzPost listener

This example demonstrates a minimal event-listener setup that subscribes to a live message stream and logs each incoming event to the browser console. It shows how a single JavaScript file can establish a real-time connection to a remote hub using the native EventSource API, which handles the server-sent events protocol. The code defines a fixed channel list—alfa, bravo, and charlie—via the URL string, then attaches an `onmessage` handler to print every message object as it arrives. No visualization or data transformation occurs; the focus is purely on the listening and logging mechanism.

Aandrew-psch
50% match
Loading thumbnail…

JS Bin

A clickable list of dog breeds and scenes displays a corresponding image and a click counter. The interface presents eight dog photos from Flickr, each paired with a name. Selecting a name turns it green and loads the associated picture; clicking the image increments and displays its specific count. The code uses vanilla JavaScript with DOM manipulation via `document.createElement` and `addEventListener` to handle the interactions, storing data in a JavaScript object model.

KKacieW
50% match