bookmarklet

100%

✓ Published0🌍 Public

Last edited Dec 2, 2014

Created on Dec 2, 2014

This bookmarklet overlays a small, always-on-top widget on any web page, displaying two live performance metrics: AngularJS watcher counts and digest timings. The widget presents each metric as a scrolling bar chart, paired with a numerical readout showing the current, minimum, and maximum values. A click toggles the display between the two metrics. The code tracks AngularJS scope watchers and digest execution time by intercepting the `$digest` function, styling the graphs with inline CSS and updating them on every digest cycle.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 Bookmarklet

This example demonstrates a bookmarklet that injects D3.js into any webpage by appending a dynamically created script element to the document head. The code specifically loads D3 version 3 from the d3js.org CDN using the `document.createElement` and `document.head.appendChild` APIs. It shows how to enable D3 functionality on pages that do not already have it, making the library available for future interactions. The bookmarklet relies solely on this script injection mechanism, with no additional data or visualization logic included.

Mmbostock

58% match

Loading thumbnail…

JS Bin

A donut chart displays browser market share percentages for five browsers, with animated arcs that grow from zero to their final values over one second using `transition.attrTween` and `d3.interpolate`. The chart, built with D3 v3 and SVG, renders colored slices via `d3.layout.pie` and `d3.svg.arc`, with labels positioned at arc centroids appearing after a delay. A legend of rounded color swatches identifies each browser. The dark-themed widget also uses CSS drop shadows for visual depth.

EEndNight95

57% match

Loading thumbnail…

JS Bin

This example demonstrates a live counter that updates every second, displaying the number of elapsed seconds in the browser and the console. It uses RxJS’s `Observable.timer` to emit sequential integers, which are mapped to formatted strings. The resulting data stream is subscribed to by two effects: a DOM effect that writes the text into a `#app` container, and a console effect that logs each message. The code separates the main data stream from its side effects, following a simple functional reactive programming pattern.

JJaxonDvl

56% match

Loading thumbnail…

JS Bin

A donut chart displays browser market share percentages for IE, Chrome, Safari, Firefox, and Others, rendered as animated SVG paths that grow outward from the center. The visualization uses d3.layout.pie with a pad angle and d3.svg.arc to construct the rings, with d3.scale.category10 assigning colors per category. Upon loading, each path transitions over one second via transition.attrTween, interpolating from zero angles to its final slice, while a legend and percentage labels fade in afterward. The chart is styled with a dark widget background and drop-shadow filter from the accompanying CSS.

JJn1532

56% match

Loading thumbnail…

Observable JS Demo

This demo shows the Observable JS runtime running inside a plain HTML page using the `@hpcc-js/observable-md` library. It loads a `.ojs` file containing markdown, a generator that emits a ticking counter at 1-second intervals, and an imported brushable scatterplot from `@d3/brushable-scatterplot`. The user’s selection on that plot is displayed as a live JSON preview. The page resizes dynamically via the `Observable` API’s `resize()` and `lazyRender()` methods.

GGordonSmith

56% match

Loading thumbnail…

Stopwatch

A digital stopwatch displays elapsed time in hours, minutes, and seconds, updating every second with a monospace font. The page uses D3.js selection and formatting APIs—specifically `d3.select` and `d3.format`—to update the text content of the body element. A `setInterval` callback increments a counter each second, and the formatted time is rendered as a colon-separated string.

CCurran Kelleher

55% match

Loading thumbnail…

JS Bin

This example visualizes browser market share percentages as a donut chart, with animated arc segments and a delayed legend appearing after the initial render. The chart uses D3 v3’s `pie` layout and `arc` generator to create the donut, while `transition.attrTween` animates each arc’s expansion from zero to its final angle. The code explicitly binds data from an inline array of browser names and percentages, and uses `d3.scale.category10` for colors. A drop shadow filter on the SVG container and a styled widget frame are also present, with the legend and percentage labels added via `append` and `text` elements.

663anp3ca

55% match

Loading thumbnail…

fps-meter

A minimal performance gauge displays the current frame rate of an animated visualization. An on-screen counter updates continuously, showing frames per second as a single number. The code uses a custom `d3.timer` loop to record timestamps, stores the last fifteen in an array, and calculates the average frame duration. D3.js and lodash support the selection, styling, and array operations, while the rendering is a simple fixed-position HTML `<div>` with monospace text. The example provides a live, lightweight diagnostic without additional charting.

11wheel

55% match