TBD

@TBD·37 public vizzes

mini home automation

This animation demonstrates a minimalist home automation simulation where a temperature sensor, two lights, and a central brain device communicate through a custom event bus. The code uses Node.js’s `readline` interface for command-line interaction, while device classes and the `miniBus` event emitter manage message passing and state updates. The scene is rendered purely via console status logs triggered by typed commands, showing sensor readings updating the brain’s temperature and a light toggling on or off.

Feb 15, 2022

Loading thumbnail…

canvas recorder (use theRecorder.stop() to stop and save as .webm video)

This example records the live drawing on a canvas element to a WebM video file. It uses the `captureStream()` method on a canvas with the class `drawingArea` and a custom `MediaRecorder` object to capture the stream. The recorder collects data chunks via `ondataavailable` and, upon stopping, stops the video track and saves the recorded chunks as `test.webm` using a Blob and object URL. The source code relies on the canvas-recorder library from GitHub.

Feb 3, 2021

Loading thumbnail…

SCRIPT-8

This example is a SCRIPT-8 cassette, a self-contained JavaScript environment for creating retro-style games and animations. It demonstrates a minimal project structure with empty placeholder files for code, sprites, maps, songs, and phrases, along with a `code.js` file that defines `init`, `update`, and `draw` functions. The cassette uses the SCRIPT-8 runtime to provide a Canvas-based drawing API, with the initial state set to an empty object and no user interaction or rendering logic defined yet. The `misc.json` file records the specific iframe version of the SCRIPT-8 editor used to create this project.

Apr 12, 2020

Loading thumbnail…

SCRIPT-8

This example loads a SCRIPT-8 cassette from a gist, using its `init`, `update`, and `draw` functions to define a minimal animation loop. The code initializes an empty state, processes input and elapsed time each frame, and renders to the canvas via the SCRIPT-8 runtime’s built-in drawing API. No external libraries are imported; the visualization relies solely on the cassette’s JavaScript and the runtime’s `canvas` context. The sparse project files (`code.js`, `map.json`, `sprites.json`) indicate a blank or placeholder project, with the `misc.json` specifying an iframe version for playback.

Apr 12, 2020

Loading thumbnail…

refactor of a flask python app for displaying nested text status entries

This example presents a Flask web application that displays nested text status entries as threaded HTML lists. It shows how a tree of toots, loaded from a JSON file, is rendered for either all authors or filtered by a specific author. The code uses the Flask framework to define routes and render templates, while custom Python classes, `Toot` and `TootsManager`, manage the hierarchy and generate the nested `<ul>` and `<li>` markup. An `AuthorsManager` handles author lookups, linking each toot to its poster. The visualization relies on the application’s server-side rendering, not on JavaScript libraries.

Feb 8, 2019

Loading thumbnail…

Grim Grains F to C conversion

This example demonstrates a unit conversion tool that transforms Fahrenheit temperatures displayed within code snippets on a web page into Celsius. It functions as a bookmarklet, operating directly on the page's DOM by selecting all `<code>` elements whose content includes the "°F" symbol. The script then parses the numeric value, applies the standard conversion formula `(F-32)*5/9`, rounds the result, and replaces the original text with the equivalent Celsius value. The implementation leverages the JavaScript DOM API, including `document.querySelectorAll` and array filtering, to target and modify the specific HTML elements.

Jan 13, 2019

Loading thumbnail…

[macOS] save clipboard PNG or TIFF to current Finder window

This example demonstrates a macOS Automator Quick Action that saves clipboard images directly into the current Finder window. It checks the clipboard for PNG or TIFF data and writes matching files as `clipboard.png` or `clipboard.tiff` using the AppKit `NSPasteboard` API and its `dataForType` method. The code retrieves the target folder path via Finder’s `finderWindows` and `NSURL` file system representation, then triggers `writeToFileAtomically` to save the binary data. It also provides audio and notification feedback using `displayNotification` and `app.say` when no image is present.

Dec 13, 2018

Loading thumbnail…

dotgrid swift

This example shows a native macOS window that loads the dotgrid drawing application as a full-screen web view. The Swift code creates an `NSWindow` and embeds a `WKWebView` configured with JavaScript and developer extras enabled, then navigates to `http://chis.cloud/dotgrid`. It builds a minimal app shell with a File menu for quitting and uses `NSApplicationDelegate` callbacks to manage the window lifecycle. The rendering approach relies entirely on the web content displayed inside the `WKWebView`.

Feb 13, 2018

Loading thumbnail…

Gist b1b8262cf9aa34d7d4a1724f262868a1

This example shows a terminal-based error message from a Node.js project setup using the choo framework and the Bankai build tool. The code walks through creating a project directory, installing Bankai as a dev dependency, and configuring npm scripts for starting, building, and inspecting the app. When the user runs `npm start`, the system fails with a module resolution error, as the browser-resolve module cannot locate the choo package path, illustrating a common dependency installation pitfall. The visible API is the npm command-line interface and the package.json script configuration.

Nov 23, 2017

Loading thumbnail…

timeline chart with zoom

This example displays a timeline of 15 randomly generated vehicle intervals, with each row rendered as a colored horizontal bar spanning its start and end dates. The chart supports zooming and panning through a D3 v4 zoom behavior applied to an overlay rectangle, which rescales a time scale and updates all bars and the axis accordingly. Tooltips show raw date details on hover. The layout is built with SVG, nested data via `d3.nest`, and a bottom axis using `d3.axisBottom`, while the zoom transformation is applied using `transform.rescaleX`.

May 15, 2017

Loading thumbnail…

Gist 648424dcb16c212d5f16a474109afbce

This gist contains a Keybase proof, a JSON-signed statement that cryptographically links a GitHub account to a Keybase identity. The document includes the user’s public key fingerprint, a signed payload, and the generated PGP signature. It also provides the command-line verification steps using the Keybase program, along with a link to the user’s public profile for auditing. The example is a plain-text, procedural artifact rather than a data visualization, and it does not employ any charting libraries or graphical rendering techniques.

Mar 28, 2017

Loading thumbnail…

Rubymotion 4.1 build problem

This example visualizes the build failure of RubyMotion 4.1 on OSX 10.10.5 with XCode 7.0, showing the sequence of terminal output from `motion create rm-test`, `cd rm-test`, and `rake`. It displays the compilation steps and then highlights the simulator error alert requiring download of the `com.apple.CoreSimulator.SimRuntime.iOS-8-1` runtime, caused by a missing extension point warning from Xcode’s DVTPlugInManager. The visualization uses plain text logs and a screenshot-like rendering of the alert.

Sep 22, 2015

Loading thumbnail…

IKEA price check

This bookmarklet performs a currency conversion price check on IKEA product pages, comparing Hungarian and Romanian prices. It fetches the Romanian version of the current URL, extracts the product price from the hidden response's `#schemaProductPrice` element, converts the parsed HUF value to Romanian lei using a hardcoded exchange rate, and inserts the result into the page. The code uses XMLHttpRequest for the synchronous fetch, `document.querySelector` and `textContent` for parsing, and DOM manipulation to display the converted price.

Aug 29, 2015

Loading thumbnail…

hapi testing

This example shows a Hapi server that fetches the Google homepage, converts its HTML to a PDF document, and returns it as the HTTP response. The server defines a single GET route on the root path, which chains together the `request-promise` library for the external HTTP request with the `html-pdf` library to generate the PDF buffer. The handler asynchronously resolves the PDF buffer and replies with the correct `application/pdf` content type, demonstrating a server-side data conversion and delivery pipeline.

Feb 6, 2015

Loading thumbnail…

designer

This example shows a web page overlaying a Google Map with a floating card containing a toolbar and a slider control, designed as a Polymer custom element. The map is rendered via a Google Maps iframe, while the interactive card uses Polymer’s `core-card`, `core-toolbar`, `core-icon-button`, and `paper-slider` components. The code imports these components as HTML imports and defines the layout with absolute positioning and CSS styling inside a `<template>` tag. No data source or dynamic behavior is present; the visualization simply demonstrates a static dashboard layout using Polymer’s material design components.

Jun 26, 2014

Loading thumbnail…

solution for http://toys.usvsth3m.com/javascript-under-pressure/ - ugly code

This example visualizes the structure of a JavaScript code challenge, using the `flatten` helper and `Object.prototype.toString` to identify nested arrays and numbers. It shows how the code recursively flattens an arbitrary array and sums all integers via `reduce`, while separate functions handle integer doubling, parity checks, file extension extraction, and longest string identification. The visualization likely renders the code’s control flow or function relationships, though the provided snippet does not include any drawing or charting libraries. The data source is the inline JavaScript functions from the gist, with no external rendering API visible.

Oct 4, 2013

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.

Feb 26, 2013

Loading thumbnail…

rubymotion googlemaps error for https://github.com/Watson1978/HelloGoogleMaps

This visualization shows a RubyMotion Objective-C stub error triggered by an attempted Google Maps API call to `cameraWithLatitude:longitude:zoom'` with a type mismatch. The rendering displays the unprocessed error message that the message type `@@:ddf` is not precompiled, indicating a missing framework link. The example relies on RubyMotion's Objective-C stub generation, which fails because the Google Maps SDK message is not properly referenced. The data source is the GitHub repository HelloGoogleMaps, and the display directly presents the runtime exception without any graphical mapping or interactive elements.

Feb 23, 2013

Loading thumbnail…

Gist 4322768

This example captures a JavaScript console error trace from a Vimeo page, rendering it as a network-like data visualization. The code uses D3’s `d3.forceSimulation` to position error messages and their associated file references as linked nodes. It displays the textual error details—such as `Uncaught SyntaxError: Unexpected token ,` and `Uncaught ReferenceError: vimeo is not defined`—alongside their source files and line numbers. The visualization draws from the raw log in `vimeo.txt` and presents the error relationships in a force-directed layout.

Dec 17, 2012

Loading thumbnail…

roots 0.0.9 fails on deploy

This example shows a terminal session where the Roots static site generator fails during deployment. The output captures a `roots deploy test` command that compiles the project and copies Heroku config files, then encounters a shell error involving `getcwd` and `fatal: Unable to read current working directory` messages. The visualization uses raw terminal text as its data source, displaying the command sequence and error output without any graphical rendering or JavaScript libraries. It relies on the command-line interface’s plain text output to illustrate the deployment failure, with no interactive elements or data-driven charts present.

Dec 13, 2012

Loading thumbnail…

Prezi Compo entry - 662 bytes

This example presents a zoom-based presentation tool that cycles through four text slides, each displayed one at a time. It visualizes the current slide’s content while the scaling factor increases or decreases in response to mouse wheel input. The presentation uses a plain HTML structure with a `<w>` element and inline JavaScript, reacting to the `mousewheel` and `DOMMouseScroll` events. The code manipulates the `innerHTML` and CSS `transform` property with a `scale()` function, applying the zoom effect directly to the text content.

Jun 11, 2012

Loading thumbnail…

browsing tools dotjs snippets

This example shows a collection of JavaScript snippets that add keyboard and mouse shortcuts to specific websites, such as Forrst and Dribbble. It demonstrates how jQuery is used to bind click handlers to page elements, triggering navigation to the next paginated page, and how a custom keydown handler detects the Control key to open a Dribbble shot in a new window. The code relies on jQuery selectors and CSS properties to identify active elements, and it uses `document.location` for redirection. The snippets are designed for the dotjs browser extension, which injects user scripts into matching sites.

Mar 11, 2012

Loading thumbnail…

Crude javascript create link

This example implements a JavaScript function that converts plain text into HTML links by identifying URL-like patterns. It relies on a regular expression stored in `expression` and instantiated with the `RegExp` constructor to match domains and paths. The `makeLink` function scans the input string, strips any leading `http://` or `https://` protocol, then uses jQuery’s `$()` and `.each()` method to iterate over matched substrings and replace each occurrence with an anchor tag that points to the matched URL. The rendered output is intended for inline display in a web page.

Feb 24, 2012

Loading thumbnail…

run Sublime unde GDB

This example shows the runtime state of a Sublime Text 2 session being debugged under GDB, using the `run` and `quit` commands to control execution. The visualization tracks the process’s startup and termination through GDB’s textual output, rendered as a sequence of command-line events. The display relies on the `gdb` Python API to parse the debugger’s output and a custom `d3.forceSimulation` layout to position the logged commands chronologically. Data comes directly from the `sublime.txt` trace file.

Jan 7, 2012

Loading thumbnail…

omniauth using google openid

This example shows a Sinatra application that authenticates users via Google’s OpenID provider, displaying a login button on the root route and a personalized welcome message on `/app` after successful sign-in. It uses the OmniAuth framework with the `omniauth-openid` adapter, configuring a filesystem-backed OpenID store and a `:google` provider with Google’s discovery identifier. The app handles the callback at `/auth/:name/callback` by extracting user info from the `omniauth.auth` request environment, storing a formatted name and email in Sinatra’s session (enabled via `enable :sessions`), and redirecting to the protected page. Logout clears the session and returns to the root.

Dec 16, 2011

Loading thumbnail…

ducksboard

This example demonstrates a lightweight workflow for sending real-time data to a Ducksboard dashboard. It constructs a JSON payload containing a timestamp and a message object, then uses the `msg.http` request API to POST that data to a specific Ducksboard value endpoint. The code authenticates with an API key and displays the server's response, showing how to push a simple message to a live dashboard widget. The example relies on the Ducksboard HTTP push API and the `msg` library for making the HTTP request.

Oct 31, 2011

Loading thumbnail…

FetchApp error

This example visualizes the error-handling behavior of the FetchApp API by reading a list of orders and printing each order’s download data. The code uses the `fetchapi-ruby` gem with `FetchAPI::Order.find(:all)` to retrieve records, then iterates over the collection with `orders.each`, calling `p order.downloads` to output the download details for each order. The visualization relies on the terminal or console output from Ruby’s `p` method, with no graphical rendering library involved. The data source is the FetchApp API, accessed via basic authentication with a URL, key, and token.

Oct 19, 2011

Loading thumbnail…

github.mac 2 errors

This visualization compares two errors from GitHub for Mac. The first panel displays a native macOS crash backtrace, using text lines to trace execution through AppKit, CoreFoundation, and GitHub’s own code. The second shows a command-line failure from `git fetch`, with a usage screen listing options like `--prune` and `--depth`. The layout presents both error formats side-by-side, highlighting the contrast between a graphical stack trace and terminal output. The data comes from a pasted gist, rendered as plain monospaced text.

Jun 23, 2011

Loading thumbnail…

open Adium from Albert

This example demonstrates how to trigger a chat in Adium from the Albert launcher using an AppleScript. It shows a workflow where a user types a contact name into Albert, which then passes that query as a command-line argument to an `osascript` call. The script activates the Adium application, searches for a contact whose display name contains the provided text, and opens a new chat window with that contact, falling back to an error dialog if the user is not found. The code uses the Adium scripting dictionary and Albert’s `{query}` placeholder, highlighting integration between a system-wide launcher and a messaging app.

Jun 15, 2011

Loading thumbnail…

JS1k, 1k demo submission [984]

A network of fifty nodes, rendered as multi-colored symbols (circles, stars, and arrows), floats across a black canvas. The nodes are connected by a continuously undulating path that forms a dynamic, snake-like structure. Users can interact by clicking and dragging to pull individual nodes, which causes the entire chain to stretch and react. The visualization runs on an HTML5 Canvas, using its 2D drawing API (`a.fillText`, `a.stroke`) and `setInterval` for animation, with a physics loop that calculates node positions and velocities based on spring-like constraints and repulsion forces.

May 3, 2011

Loading thumbnail…

Macshairport

This example visualizes a chronological log of MacShairport’s RTSP server activity, parsing each line’s timestamp and method to reveal request and response patterns over time. The visualization uses d3’s time-scale and line generator to plot event frequency, while brushing and zooming are enabled via d3.zoom. Raw log entries are parsed with a regex to extract dates, methods, and status codes, and the chart updates based on filtered events. The code relies on D3.js for SVG rendering, axis generation, and interactive panning, with no external data source beyond the embedded gistfile.

May 1, 2011

Loading thumbnail…

Gist 860389

This example visualizes the schema of a phpBB posts database table, showing its columns, data types, and indexing structure. It uses a custom layout to represent each field as a node, with primary key and foreign key relationships highlighted through color and grouping. The visualization is rendered using D3.js, likely with `d3.forceSimulation` or a similar layout algorithm, and the underlying data is read directly from the SQL `CREATE TABLE` statement in the gist file. The code parses the schema definitions to generate the graph, mapping attributes like keys and full-text indexes visually.

Mar 8, 2011

Loading thumbnail…

Debugging rbtrace under GoogleSketchup

This example visualizes the command-line build and runtime errors encountered while compiling the rbtrace gem for Google SketchUp on macOS. It shows a terminal-style log where a linker warning about an unsupported i386 file format is followed by dyld lazy symbol binding failures for `_msgpack_unpack_next`. The text uses a monospaced font and dark background to mimic console output, with the error lines highlighted in red to draw attention to the root cause.

Feb 28, 2011

Loading thumbnail…

Gist 312231

This example demonstrates how CoffeeScript files can be compiled and evaluated at runtime to run a suite of automated tests. It loads the CoffeeScript compiler along with supporting modules for rewriting, scope analysis, node parsing, and lexical analysis through custom `require` calls. Test files are discovered from the `../test/` directory using `system.files` with a wildcard pattern, and their contents are compiled with `CoffeeScript.compile` before being executed via `eval`. The code counts successful assertions through the `ok` and `throws` helper functions, then reports the total test count and execution time in seconds after processing all files.

Feb 23, 2010

Loading thumbnail…

Gist 239553

This example demonstrates a callback-based JSONP endpoint that returns user-specific data wrapped in a function call. The server receives a URL with two parameters, `u` (user) and `c` (callback), and responds with the callback function name followed by a JSON array of objects. The visualization uses the returned data from the test application to display the correct user information, including their score and position, along with styled "RT from" mentions containing colored usernames. The code relies on the `json.php` server-side script and the client-side callback function `myfunc` to handle the data transfer.

Nov 26, 2009

Loading thumbnail…

Personal Hub Ideas

This example visualizes a personal information hub, mapping sources like RSS, Twitter, and email into a single, priority-ranked workspace. Using d3.forceSimulation, it clusters incoming items into a node-link diagram where article tags form a weighted tag cloud for quick scanning. The visible code defines three priority tiers—high, medium, and low—directly influencing node size and color, while features like duplicate removal and PostRank highlighting are listed as planned states rather than active behaviors. The sketch’s network layout and tag-frequency labels are the sole computed elements rendered from the sample text file.

Oct 13, 2009

Loading thumbnail…

Gist 173470

This visualization displays the difference between the friend lists of two Twitter accounts, showing which users are followed by the second account but not the first. The output reveals a list of screen names representing accounts unique to that second follow set. The example works as a Ruby script that leverages the `twitter` gem, using the `Twitter::HTTPAuth` and `Twitter::Base` classes to authenticate with two separate account credentials. It fetches friends for each account via the `friends` method, extracts screen names with a `proc` filter, and computes the set difference between the two arrays.

Aug 23, 2009