Skip to main content
Start free

Send feedback

Tell us what works and what could be better. We read every submission.

Send feedback

Tell us what works and what could be better. We read every submission.

A

amundo

@amundo·71 public vizzes

Loading thumbnail…

SLUB Dresden Leipziger Adreßbuch manifest

This visualization manifests the SLUB Dresden Leipziger Adreßbuch index, showing the years 1830–1903 with each year’s PDF file size. It uses a manifest.json file to track download progress, OCR status, and Wikimedia Commons uploads for each year’s address book. The code employs d3.forceSimulation to position year nodes, with data sourced from the SLUB Dresden digital library.

Mar 6, 2026
Loading thumbnail…

WebCOLD 04

WebCOLD 04 demonstrates interactive font-size control using a custom HTML element called `superSlider`. Two sliders adjust the title and subtitle font sizes of a preview block in real time, displaying the current value in a readout. The custom element, defined via `customElements.define`, wires up range inputs to update CSS `font-size` properties and includes reset buttons. The example uses no external libraries, relying on native DOM APIs like `querySelector` and `MouseEvent`.

Jan 18, 2024
Loading thumbnail…

Resources for learning Kaboom.js

This gallery example is a markdown document that aggregates links and notes for learning the Kaboom.js game development library. It catalogs official resources, including the main site, GitHub releases, and Twitter account, alongside community tutorials from Replit, Ania Kubow, and Ourcade. The file lists specific video tutorials and accompanying code demos, such as a Snake game on Replit and a Mario clone using version 0.5.0. It also references supporting tools like Piskel for pixel art, jsfxr for sound effects, and Kenney.nl for free game assets, with the content organized as a plain-text reference list.

Aug 4, 2021
Loading thumbnail…

Gist 1adbdacf6a95cfacb3cca1647ed20f39

This example shows every paragraph element on a page highlighted with a thick red border, transforming a plain HTML document into a visual checklist of text blocks. The script uses the standard Document Object Model (DOM) API, specifically `document.querySelectorAll('p')`, to select all paragraph nodes, then applies an inline CSS style via `p.style.border` with a `4px solid red` value. The rendering approach is direct DOM manipulation, with no external libraries or frameworks involved. The effect is immediate and static, permanently altering the appearance of each paragraph until the page is refreshed or the style is changed.

Jul 28, 2021
Loading thumbnail…

a simple parser for simple eaf files

This example parses ELAN annotation files into structured sentence data, extracting media references, time-aligned annotations, and translation tiers from the XML. It uses the DOM `querySelectorAll` API to navigate the EAF structure, building a time-slot index for resolving timestamps. The parser sorts sentences chronologically and merges referenced annotations with their alignable counterparts. It demonstrates a lightweight approach for converting EAF files into JSON-ready objects for further visualization or analysis.

Jul 3, 2020
Loading thumbnail…

Star Wars Opening Crawl (HTML/CSS/JS)

This visualization recreates the iconic Star Wars opening crawl using HTML, CSS, and an SVG logo. The page begins with the classic “A long time ago...” introduction text, followed by the yellow Star Wars logo rendered as an SVG path, which then fades into a scrolling text crawl that recedes into the distance. The data source is a gist by author amundo, and the effect is achieved through CSS transforms and animation on the HTML sections.

Jul 2, 2020
Loading thumbnail…

sample svg with 2 "layers"

This example shows two text labels, "layer 1" and "layer 2," positioned on an SVG canvas to demonstrate the use of separate group elements for organizing distinct layers. The SVG is rendered with explicit `<g>` tags, each containing a `<text>` element styled with Times New Roman and centered anchor points. The file uses standard SVG APIs, including `viewBox`, `width`, `height`, and inline presentation attributes for font size, fill, and stroke. It is a simple static illustration of layer-based structuring in SVG, with no interactive or dynamic behavior, and the data source is the hand-authored markup itself.

Dec 6, 2019
Loading thumbnail…

loading a pdf and rendering a page with pdf.js

This example shows a single page of a PDF document rendered into an HTML canvas element. The code loads `helloworld.pdf` using pdf.js, retrieves the first page, and scales it by a factor of 1.5 before drawing it with the page’s `render` method. The canvas dimensions are set directly from the scaled viewport, and the rendering context is passed to pdf.js’s render API, producing a rasterized image of the page.

Oct 27, 2018
Loading thumbnail…

Happy Gilmore

This example transforms an XML movie collection into a styled HTML list using XSLT. The stylesheet matches the root `<collection>` element and iterates over each `<movie>`, extracting the title, year, and genre with `xsl:value-of`. The output is a tan-background page with unordered lists per movie, styled via embedded CSS in the `<style>` block. It demonstrates client-side XML-to-HTML conversion through the `movies.xsl` stylesheet, relying solely on XSLT 1.0 template matching and `xsl:for-each` loops—no JavaScript libraries are involved.

Sep 4, 2018
Loading thumbnail…

Gist b35c133ccbf70e92f9f6a88f717829c3

This interactive tool converts orthographic transcriptions into a different written form using a user-supplied conversion table. It tokenizes input text by splitting on spaces, then applies a series of find-and-replace rules defined as tab-separated grapheme pairs in a textarea. The conversion uses JavaScript’s `String.normalize` with the NFD form to decompose characters before matching, and `RegExp` with a global flag to replace all occurrences of each pattern. Results are written to the page’s DOM via `innerHTML`, with each token appended as plain text followed by a space.

Mar 10, 2018
Loading thumbnail…

Media Objects

This example demonstrates a flexible media object layout using CSS Grid, showcasing nested, flipped, and flexible image column variations. The layout arranges an image, title, content, and optional footer in a responsive grid that adapts at 600px breakpoints, with float-based fallbacks for older browsers. It includes placeholder images and lorem ipsum text to illustrate the component’s behavior.

Nov 6, 2017
Loading thumbnail…

paper text area

Styled like a sheet of ruled notebook paper, this interface presents a text area for free-form typing. The paper effect is created with layered CSS gradients and radial backgrounds, while a red margin line and punched holes reinforce the stationary look. The `<textarea>` element is styled with the Handlee font and a transparent background so the ruled lines show through. The page uses plain HTML and CSS, with no JavaScript libraries, and includes a footer crediting the original pen by Marc Malignan.

Sep 20, 2017
Loading thumbnail…

My Test Video

This example shows a video element playing an MP4 file while its audio is amplified to twice the normal volume. The page loads a local video and applies the amplification through the Web Audio API, using `AudioContext`, `createMediaElementSource`, and a `GainNode` to boost the signal. The `createAmplifier.js` script defines a function that connects the video’s audio source to a gain node set to a multiplier of 2, then routes it to the destination. The interface relies on standard HTML5 `<video>` controls, with no external visualization libraries beyond the browser’s native audio processing.

Aug 18, 2017
Loading thumbnail…

tiny slides

A tiny slide deck runs entirely in one HTML file. Each slide is a `<section>` element inside the `<main>` tag, with CSS `display:none` hiding all but the first slide. The script listens for `keyup` events and uses `insertAdjacentElement` to move the first or last section to the opposite end of the container, shifting which slide is visible on right or left arrow presses. The presentation wraps around, and the entire implementation—HTML, CSS, and JavaScript—stays under 100 lines, using only the native DOM API and vanilla event listeners.

Jan 13, 2017
Loading thumbnail…

Trie.js - super simple JavaScript implementation

This example shows a trie data structure implemented in plain JavaScript, demonstrating how words are inserted, searched, and retrieved by prefix. The code defines `TrieNode` and `Trie` classes with methods for `insert`, `contains`, and `find`, where `find` recursively collects all words matching a prefix. The implementation uses the standard trie operations of traversing child nodes via a hash map and tracking word endings with an `end` flag. The console output verifies the results for the words "hello" and "helium", showing the expected prefix matches.

Nov 20, 2016
Loading thumbnail…

IPA data

The visualization maps International Phonetic Alphabet (IPA) consonant symbols onto a scatterplot organized by place of articulation (x-axis) and manner of articulation (y-axis), with points colored by voicing. The data comes from a gist by amundo and includes columns for name, voicing, place, manner, IPA letter, X-SAMPA, and consonant/vowel classification. Each consonant is plotted as a point, with the IPA symbol used as the label, allowing viewers to compare how sounds are distributed across articulatory categories. The placement by place and manner makes it easy to see clusters of similar sounds, while the voicing is encoded through color to distinguish voiced and voiceless variants. The chart reveals the full typology of consonants represented in the dataset, from bilabial to glottal places of articulation and from plosives to trills.# IPA Data This visualization displays the International Phonetic Alphabet (IPA) consonant inventory, plotting each sound according to its articulatory properties. The chart maps consonants along two key dimensions—place of articulation (from bilabial to glottal) and manner of articulation (from plosives to approximants)—with each point colored by voicing (voiced vs. voiceless). The dataset contains 80+ consonant symbols, including rare and complex articulations like ejectives, implosives, and aspirated plosives, offering a comprehensive view of human speech sounds. Interactive features allow viewers to explore the full IPA chart and hover to see each phoneme's letter, name, and SAMPA encoding. The visualization reveals patterns in phonological systems, such as how certain manners of articulation are more common at particular places of articulation.

Feb 5, 2016
Loading thumbnail…

learning d3 lines

A text area accepts typed integer pairs, and each line of input becomes a point in a two-dimensional path rendered as an SVG line graph on a dark background. The visualization updates live on every keystroke, using D3’s `d3.svg.line` to map coordinates and appending a `path` element to the SVG canvas. The code also displays the raw SVG `d` attribute of the generated path in a paragraph below, making the underlying vector data visible. Data is parsed from whitespace-separated integers in the textarea, and the path is redrawn from scratch on each input event.

Sep 26, 2015
Loading thumbnail…

Very Simple IndexedDB Example

This example demonstrates basic IndexedDB operations, including database creation, object store setup, index management, and data retrieval. It shows how to open a database named “MyDatabase” and create an object store with a keyPath of “id” and a compound index on name fields. The code adds two records with nested name objects and then queries them both by primary key and by index lookup, logging results to the console. It uses the native IndexedDB API with cross-browser fallbacks, including the IndexedDBShim for unsupported environments.

Apr 30, 2015
Loading thumbnail…

poor man's dom selection

This example demonstrates a lightweight DOM selection utility that queries elements and normalizes the result into an array. It shows how `querySelectorAll` returns a `NodeList`, which the code converts using `[].slice.call` when multiple matches exist, while preserving a single element as-is. The `find` function accepts an optional scope parameter to limit the search, defaulting to the global `document`. This plain JavaScript approach avoids external libraries, offering a simple alternative to jQuery-style selectors for projects that need minimal dependency overhead.

Feb 23, 2015
Loading thumbnail…

a simple function to export a JSON file

This example demonstrates a minimal JavaScript function that triggers a browser save dialog for any JSON data, producing a downloadable file with a user-specified name. The code converts the input data into a formatted string using `JSON.stringify`, wraps it in a Blob with the `application/json` MIME type, and creates an object URL via `URL.createObjectURL`. It then programmatically clicks a temporary anchor element with a `download` attribute and cleans up the element afterward. The function accepts arbitrary data, such as arrays or text, as shown in the comment example `saveJSON([1,2,3], 'anArray')`.

Nov 22, 2014
Loading thumbnail…

Do we really need an event emitter?

This example shows how to replace event-emitter libraries like WildEmitter with native browser APIs. It defines a Vocab model that dispatches a custom `addToVocab` event via `dispatchEvent(new CustomEvent(...))` on the global `window` object, and a VocabView that listens with `addEventListener`. The code demonstrates that `addEventListener` and `dispatchEvent` work globally without needing an emitter instance, using only vanilla JavaScript and DOM events.

Nov 2, 2014
Loading thumbnail…

A first pass at rendering wavesurfer.js annotations as WEBVTT

This example converts a JSON array of audio annotations—each with start and end times and optional notes—into WebVTT subtitle cues. It defines a `WebVTT` constructor that formats timestamps from seconds into `HH:MM:SS` and builds cue blocks with the `annotation2cue` method. The sample data contains Japanese text notes, including lines from "Rashomon," which become cue content. The conversion runs through `forEach` over the JSON and logs the resulting WebVTT string to the console, demonstrating a lightweight, dependency-free approach to generating subtitle files from structured annotation data.

Oct 23, 2014
Loading thumbnail…

counting things in javascript

A short JavaScript snippet counts word frequencies from a fixed string of text, using the array `reduce` method to tally occurrences and building a plain object that maps each word to its count. The example demonstrates a minimal functional programming pattern for aggregating categorical data, with the source data being a literal sentence split into an array of words. The output is logged to the console, showing a frequency distribution where repeated words like “pease” and “porridge” appear with higher counts than unique terms. No external libraries are used; the code relies solely on native JavaScript array and object methods.

Oct 19, 2014
Loading thumbnail…

Gist 7f789f99d7069a4220ed

This example demonstrates a minimalist MVC architecture built with Cranium, a custom library that uses Underscore.js for utility functions and jQuery-like DOM selection. It shows how a model, view, and controller interact: user clicks on increment or alert buttons trigger controller methods, which update the model, and the view re-renders an Underscore template displaying the counter value. A separate todo example illustrates model changes notifying the view to re-render its checkbox and title template. The code relies on Cranium’s Events system for model-view communication and DOM event binding.

Jul 18, 2014
Loading thumbnail…

Oaxaca map

The map displays the municipalities of the Mexican states of Oaxaca, Puebla, and Guerrero, with each municipality rendered as a dark polygon that highlights orange on hover. State boundaries appear as solid white lines, while municipality boundaries use thinner, semi-transparent white strokes. The visualization uses D3.js to load TopoJSON data and projects it client-side with a conic conformal projection, applying rotation, centering, and scale to position Mexico appropriately. Municipality and state boundary meshes are drawn from the TopoJSON topology, and hovering over a municipality reveals its name via a tooltip.

May 7, 2014
Loading thumbnail…

Gist 11333614

This interactive zoomable partition visualization displays a hierarchical dataset of the Flare visualization toolkit's code structure. The D3.js layout.partition() computes nested rectangle coordinates from a JSON hierarchy, with each rectangle colored using a categorical color scale and labeled via foreignObject elements. Users can click any rectangle to zoom into that node, triggering smooth 750ms transitions that re-scale the x and y ranges to focus on the selected subtree, with colors and labels updating accordingly.

Apr 26, 2014
Loading thumbnail…

page

This example shows a form for collecting lexical data about a word, with fields for a keyword, orthographic form, phonetic transcription, and a comment. It uses a Bootstrap horizontal form layout within an HTML page, and jQuery selectors (e.g., `$('#airplane .inputWord')`) to read values from the inputs into a JavaScript object. The code then outlines assembling multiple word objects into a `lexicon` array for eventual JSON export, referencing the FileSaver.js library for saving the result.

Apr 19, 2014
Loading thumbnail…

Gist 9863493

This example assembles a multi-section Markdown document into a unified report and renders it in several output formats. It shows how a single source file can be converted to HTML, PDF, DOC, ODT, and standalone Markdown using the Pandoc document converter. The build script runs `assemble.sh` to concatenate numbered section files into `masters.txt`, then invokes Pandoc with options for section numbering, a table of contents, and custom CSS styling. The PDF output uses XeLaTeX with Georgia and Helvetica fonts, while the HTML version embeds a custom JavaScript template.

Mar 29, 2014
Loading thumbnail…

JS function to change links like <a href="something.wav">sound</a> so that they play when clicked

This example shows a JavaScript function that converts links to .wav audio files on a page into click-to-play controls, so users can listen without leaving the page or losing the link’s context. The code selects all anchor elements whose `href` ends with `wav` using `document.querySelectorAll`, then creates a new `Audio` object for each link and assigns the link’s URL as the audio source. It attaches a `click` event listener that prevents the default navigation behavior and calls `audio.play()` to start playback. The approach uses the native Web Audio API and DOM event handling, with no external libraries.

Mar 19, 2014
Loading thumbnail…

A simple depunctuator with and without regexes

This example demonstrates a simple text-cleaning function that removes unwanted characters from strings, using two sample sentences to show the before-and-after effect. The code defines a `depunctuate` function in Python, which iterates through each character of the input and builds a new string by excluding any letters found in a provided `badletters` set. It uses basic string concatenation and a `for` loop, with no external libraries. Two print statements call the function: the first strips punctuation like periods and exclamation marks, while the second removes digits and commas from a numeric phrase.

Mar 18, 2014
Loading thumbnail…

futzing with python encodings.

This example demonstrates how Python 2.7 handles Unicode strings when serializing to and from JSON. It shows a dictionary of Ethiopic syllable names being written to a file with `json.dumps`, which escapes the characters into `\u1234`-style sequences, and then reloaded with `json.load` to recover the original Unicode objects. The process highlights the round-trip fidelity of the `json` module, even though the intermediate file appears “escape-y,” and the code also uses `unicodedata.name` to fetch character names.

Mar 11, 2014
Loading thumbnail…

Gist 8626002

This scatterplot shows the relationship between word length and vowel count across the unique words in U.S. presidential inaugural addresses. Each point represents one word, with word length on the x-axis and the number of vowels per word on the y-axis, revealing a general upward trend. The visualization uses matplotlib’s `scatter` function, with data derived from the NLTK `inaugural` corpus, counting vowels via a list comprehension over the characters in each word. The plot is labeled with axis titles and a descriptive title, and displays the raw distribution without any trend line or aggregation.

Jan 26, 2014
Loading thumbnail…

This is a simplistic comparison of pronoun frequencies in (a) the Brown corpus under the 'news' category and (b) the whole of the Reuters corpus.

This visualization compares pronoun frequency distributions between the Brown corpus news category and the entire Reuters corpus using simple text-based star bars. The code loads both corpora via the NLTK `brown` and `reuters` modules, computes `FreqDist` objects for lowercase words, and prints a row per pronoun where each star represents a fixed count (10 for Brown, 200 for Reuters) followed by the raw frequency. The output reveals stark contrasts, such as "it" and "its" dominating Reuters while "he" and "his" are more prominent in Brown news, with zero occurrences of "I" in both datasets.

Jan 23, 2014
Loading thumbnail…

Gist 8583392

This example displays the frequency of personal pronouns in the Brown Corpus news category as a crude text bar chart. Using NLTK, it loads the news texts, tokenizes them, and applies `FreqDist` to count lowercase pronoun occurrences. The output prints each pronoun followed by a row of asterisks, where every asterisk represents 20 occurrences, alongside the raw count. The visualization intentionally uses a simple, non-graphical format, showing relative frequencies such as “he” dominating with 642 mentions and “us” appearing only 13 times.

Jan 23, 2014
Loading thumbnail…

A couple of changes to example4.html from this great article by Jos Dirksen (http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound) are sufficient to get it running in Firefox Aurora.

This example visualizes the frequency spectrum of live audio input, displaying animated bars that respond to the sound’s amplitude and frequency. It works by using the Web Audio API’s `AnalyserNode` to capture real-time data, then rendering the waveform with Canvas 2D drawing. The code includes compatibility fixes for Firefox and Chrome, switching from `createJavaScriptNode` to `createScriptProcessor` and from `noteOn` to `start`. The visible rendering loop updates bars based on the analyser’s frequency data, driven by a `requestAnimationFrame`-style callback.

Sep 21, 2013
Loading thumbnail…

Gist 5986840

This example demonstrates a minimal Python script that sorts an array of node objects by the `nodename` attribute. It shows how to reorder JSON-structured data before any visualization or further processing occurs. The code defines a small dataset containing two nodes, “foo” and “bar,” and uses the built-in `json` module to print the original and sorted representations. It relies on the standard Python `list.sort` method with a lambda function as the sorting key, directly mutating the `nodes` list and updating the `data` dictionary. The example illustrates a simple preprocessing step common in data-driven visualization workflows.

Jul 12, 2013
Loading thumbnail…

What .edu sites exist that are anagrams of UCSB?

This visualization shows which of the 24 possible four-letter permutations of “UCSB” correspond to existing .edu websites. It tests each anagram by making HTTP requests, then lists the URL alongside a boolean “True” or “False” indicating whether the site resolves. The underlying script, written in Python 2.7, uses `itertools.permutations` to generate all orderings and the `requests` library to probe each hostname, catching `ConnectionError` exceptions to mark unreachable domains. The output is plain tab-separated text, displaying only successful anagrams like `ucsb.edu`, `uscb.edu`, `csub.edu`, and `scbu.edu` as valid.

Jul 5, 2013
Loading thumbnail…

unit circle

A particle traces the unit circle while projecting its x- and y-coordinates onto separate cosine and sine waveforms, revealing the trigonometric relationship between circular motion and sinusoidal waves. Using D3.js, the visualization samples the sine and cosine functions to generate the circle path and dynamically updates the wave lines as the particle moves. The code employs `d3.svg.line` for path generation and a linear scale to map sample indices to pixel positions, with a time-driven animation loop updating the particle and waveforms.

Mar 21, 2013
Loading thumbnail…

Export CartoDB GeoJSON to TopoJSON.

This example demonstrates how to render TopoJSON geographic data as an SVG map using D3. It loads a world dataset pre-converted from CartoDB GeoJSON format and draws country polygons with a Mercator projection. The countries are styled with a light gray fill and white strokes, using D3’s geo path and TopoJSON utilities. The map is displayed in a narrow Bootstrap container, with the visualization sized at 960 by 1160 pixels.

Mar 12, 2013
Loading thumbnail…

i'm trying to load a json file with some metadata in it

This example demonstrates loading metadata from a JSON file into a JavaScript application for later lookup by file identifier. The code defines a `Metadata` object that uses jQuery’s `$.getJSON` to fetch `metadata.json` and store the array of recording details. It relies on the Underscore.js `_.where` function to filter records by `file_id` during lookup. The application initializes `Metadata` and prepares to retrieve individual entries, such as `hil001`, which include fields like language, filename, and speaker. The visualization shows how external data can be structured and accessed for subsequent display or analysis.

Mar 1, 2013
Loading thumbnail…

OMG Particles!

A single particle expands from the mouse position each time the pointer moves, growing from a tiny point to a large circle while fading out over three seconds. The animation uses D3.js transitions with an easing function and a categorical color scale to assign each particle a distinct stroke color. Circles are appended to an SVG canvas and automatically removed after the transition completes, creating a trail of expanding rings that respond to mouse movement.

Dec 18, 2012
Loading thumbnail…

Gist 7571798

This example shows a file-reading utility that loads either image or text files into the browser using the HTML5 File API. It creates a FileReader instance and wraps its asynchronous operations in a jQuery Deferred object, returning a promise that resolves with the file’s content. For images, the reader uses `readAsDataURL` to produce a base64-encoded data URL; for all other file types, it uses `readAsText` to retrieve the raw string. The code handles load and error events, rejecting the promise on failure.

Dec 4, 2012
Loading thumbnail…

Finding reduplicated words in a wordlist

This example scans a wordlist for reduplicated words—words whose letter pairs repeat—by analyzing bigram frequency. It computes the median frequency of all bigrams in each word and prints the word if that median equals 2, indicating a likely reduplication. The Python script uses `collections.Counter` to tally bigrams, a custom `median()` function, and `fileinput` to read lines from standard input. The output is a filtered list of words, showing a simple text-based visualization of the detected pattern.

Nov 27, 2012
Loading thumbnail…

wondering about top-level persistence of a netsted object in backbone

This example demonstrates a nested Backbone.js data model where a `Text` model contains a `SentenceCollection`, while the top-level `TextCollection` persists to `localStorage` via `Backbone.LocalStorage`. The code shows `Text` initializing its own `SentenceCollection` in the model’s `initialize` method, but leaves `Sentence` and `SentenceCollection` without any persistence layer, prompting a question about whether to override `Sentence.save` to hand data upward. It uses Backbone’s `Model.extend` and `Collection.extend` to define the hierarchy, illustrating the challenge of persisting nested collections through a single top-level store.

Sep 30, 2012
Loading thumbnail…

Gist 3716410

This visualization is an interactive emoji cheat sheet, presenting a categorized list of emoji codes for people, nature, and objects. It displays the emoji and its corresponding text code in a grid format, allowing users to quickly reference and identify emoticons. The page uses plain HTML and CSS for layout and styling, with JavaScript handling click events to copy emoji codes to the clipboard. The content is sourced from a static text file listing emoji names and categories.

Sep 13, 2012
Loading thumbnail…

trying to make a nested collection

This example shows a Backbone.js model for a single sentence, which is parsed from an external JSON file containing transcription, translation, and a list of words with morpheme and gloss data. The sentence model creates a nested collection of words, and the code defines a text collection that stores sentences using the Backbone.LocalStorage adapter. The application initializes by fetching a sentence from the data source and parsing its word components into the nested structure, though the visualization of this nested collection is not implemented in the provided code.

Sep 9, 2012
Loading thumbnail…

Gist 3681441

This visualization shows a live feed of sentences that are added to a collection, with each new sentence rendered as a separate element on the page. The code uses Backbone.js to manage a `sentences` collection, binding events like `add` and `reset` to render the items. A `sentenceKeyup` handler triggers transliteration of typed input, and `createOnEnter` adds new sentences when the user presses Enter. The rendering relies on Backbone’s view system, updating the display whenever the collection changes, while `sentences.fetch()` loads initial data from the server.

Sep 9, 2012
Loading thumbnail…

Gist 3679500

This example demonstrates a Unicode character name lookup error and its resolution through Python’s `unicodedata` module. It shows that passing a two-character string like "ɬʼ" to `unicodedata.name` raises a `TypeError`, while each individual character—"ɬ" and "ʼ"—successfully returns its official Unicode name. The code uses the `unicodedata.name` API interactively in a Python shell, with the traceback illustrating the failure mode and the subsequent successful calls. The rendering approach is plain text output from the Python interpreter, highlighting the module’s requirement for a single-character input.

Sep 8, 2012
Loading thumbnail…

playClip

This example demonstrates a custom method for playing a specific segment of an HTML audio element. It defines `HTMLAudioElement.prototype.playClip`, which takes a start and stop time, sets the current playback position, and uses `setTimeout` to pause the audio after the desired duration. The code relies on the native Web Audio API and DOM methods like `querySelectorAll` to select an audio element and trigger playback. It shows how to extend built-in browser objects for reusable time-based audio control.

Sep 1, 2012
Loading thumbnail…

look up names of characters in text

This example maps the characters of UTF-8 text to their Unicode names. Reading input from standard input, the script decodes the text and iterates through each letter, using Python’s `unicodedata.name` to retrieve the official character name and printing it alongside the character, its code point in hexadecimal, and a Unicode escape sequence. Characters without a name are silently skipped. The output is written to standard output with UTF-8 encoding via `codecs.getwriter`.

Jun 11, 2012
Loading thumbnail…

image

This example is a simple image-labeling tool that lets a user load an image into an HTML canvas, add a caption as text, and save the resulting composite as a PNG. The interface provides a file input for selecting an image, a text field for entering a caption, and buttons to apply the caption or open the saved PNG in a new window. The code uses the Canvas 2D API’s `drawImage` and `fillText` methods to render the image and text, and `toDataURL` to export the canvas content.

Apr 4, 2012
Loading thumbnail…

Swimlane using d3.js

This visualization presents a time-based swimlane chart built with D3 v2, showing project tasks across multiple horizontal lanes. The main chart displays colored rectangles for each item, with green indicating past tasks and gray representing future ones, while a blue vertical line marks today's date. A smaller overview chart below provides a zoomed-out context with a brush for selecting a time range, which updates the main chart's x-axis accordingly. The layout includes two levels of time axes (daily and monthly/weekly labels) and lane labels on the left, with the mini chart enabling navigation and filtering of the detailed view. Data is generated by the randomData.js script, which creates lanes and items with start/end dates, handling overlap by stacking items into sublanes.

Apr 2, 2012
Loading thumbnail…

letters.py - command line tool to look up the name of Unicode characters in a text

The tool reads UTF-8 text from standard input and prints each character’s Unicode name, its code point in hexadecimal, and a JSON-style escape sequence. It uses Python’s `unicodedata.name` to look up names, `sys.stdin.read` to capture input, and `codecs.getwriter` to ensure UTF-8 output. Characters without a defined name are skipped silently. The output is displayed as a line per character, showing the letter, name, hex code, and escaped form.

Mar 2, 2012
Loading thumbnail…

Gist 5383571

This example presents a web-based API for accessing Malaysian Member of Parliament profile data, exposing endpoints to list all MPs or retrieve a single MP by ID. Built with Bottle’s routing and SQLAlchemy’s ORM, it queries an SQLite database populated from ScraperWiki. The `/mp/api/list/` endpoint returns all records as JSON dictionaries, while `/mp/api/view/` filters by an `id` parameter using a SQLAlchemy select. Data originates from the scraperwiki source `malaysian_mp_profile`. The server runs locally via Bottle’s `run` function with debugging enabled.

Nov 5, 2011
Loading thumbnail…

Gist 1305262

This visualization maps the distribution of Besemah-language text lines extracted from a source file. It uses Python’s `collections.Counter` to count the occurrence of each line, then renders the data as a visual plot, likely showing frequency or positional patterns. The code reads a UTF-8 encoded `Texts.txt`, splits it into lines, and filters for lines starting with `\tx` (excluding the bare marker), building a list of Besemah lines for analysis. The rendering approach is not specified in the visible code, but the example demonstrates text-data parsing and counting using standard Python libraries.

Oct 21, 2011
Loading thumbnail…

Add a prefix to all the filenames in a directory

This example demonstrates a simple file-renaming script that adds a prefix to every text file in the current directory. The code uses Python’s `glob` module to collect all filenames ending in `.txt` and then applies `os.rename` to prepend the string `brad_` to each file. The process is iterative, renaming files one by one in place, with no rendering or data visualization involved.

Oct 20, 2011
Loading thumbnail…

events

This example demonstrates how Backbone.js handles keyboard events within a textarea. Typing in the text field triggers a callback that logs a message to the browser console, showing event binding in action. The code defines a `PasteView` model that attaches `keyup`, `keydown`, and `keypress` handlers using Backbone’s `events` hash, with jQuery managing DOM interaction and Underscore providing utility functions like `bindAll`. No data source or rendering is involved—the focus is purely on event-driven interaction.

Aug 26, 2011
Loading thumbnail…

unescape hex entities in html

This example demonstrates how to unescape HTML entities using Python's `sgmllib` and `htmlentitydefs` modules. It converts named and numeric character references (like `&amp;`, `&#169;`) into their corresponding Unicode characters, with special handling for common typographic entities (e.g., `&rsquo;`, `&copy;`) that are mapped to ASCII approximations when the `UNICODE_SNOB` flag is disabled. The code includes support for hex and decimal character references, handles unknown entities gracefully, and integrates entity unescaping into HTML attribute parsing. A companion `openanything.py` module provides a flexible HTTP/file/string input stream opener.

May 14, 2011
Loading thumbnail…

A simple tool for finding the highest scoring words with a scrabble rack

This tool finds and displays the highest-scoring words playable from a given Scrabble rack. It reads a system dictionary file, filters words to those that can be spelled with the rack’s letters, and ranks them by their Scrabble letter values. The output is a plain-text list of scores and matching words, sorted ascending. The code uses Python’s built-in file iteration, string methods, and list comprehensions, with no external visualization libraries. It demonstrates a simple algorithmic approach to word scoring and rack-based filtering.

Mar 30, 2011
Loading thumbnail…

Convert a SVG path to a Polygon by sampling the path, but also including all control points in the result. See http://phrogz.net/SVG/convert_path_to_polygon.xhtml

This example converts an SVG path into a polygon by sampling points along the path’s total length using `getTotalLength()` and `getPointAtLength()`, while also including every original control point from the path’s `pathSegList`. The code iterates through path segments, adding both sampled points and segment endpoints to a polygon element. It relies on native SVG DOM APIs, such as `SVGPathSeg` and `createElementNS`, to build the resulting polygon’s `points` attribute. The approach ensures the polygon preserves the path’s shape and all its defining vertices.

Feb 27, 2011
Loading thumbnail…

Minimal example of data handling in Backbone.js

This example demonstrates basic Backbone.js data binding and view updates using inline HTML input fields. It shows how models, collections, and views interact when editing text labels or adding new items, with a log panel displaying each sync operation. The code uses Backbone.Model, Backbone.Collection, Backbone.View, and Backbone.sync, along with jQuery for DOM manipulation and underscore.js templates for rendering. The fake sync method simulates server persistence by assigning temporary client IDs to newly created models.

Nov 18, 2010
Loading thumbnail…

an incomplete program for looking for cross-linguistic "minimal pairs" involving English flapped coronals and Spanish [r] between English and Spanish

This visualization searches for cross-linguistic “minimal pairs” between English and Spanish by identifying English words with intervocalic /t/ or /d/ (flapped as [ɾ]) that, when the consonant is replaced with “r,” form a valid Spanish word. It uses the CMU pronouncing dictionary for English phonetic transcriptions and a Spanish wordlist, applying a regular expression pattern to locate the flappable consonants. The code defines functions like `process_cmu_dict()` and `rhoticize()` to parse the dictionary and perform the substitution, then prints matching English words. The example highlights a phonetic mapping strategy without rendering graphics, focusing on textual data processing.

Nov 6, 2010
Loading thumbnail…

Gist 614119

This example processes interlinear linguistic annotation from standard input, splitting each line into words and glosses to build a structured data array. It uses Node.js `process.openStdin()` and `stdin.on('data')` to read chunks, with a `trim` function to clean whitespace and `extractLines` to split text by newlines. The code logs each line to the console, demonstrating a simple text-parsing workflow for linguistic data.

Oct 6, 2010
Loading thumbnail…

Gist 612909

This visualization displays interlinear glosses for an Indonesian sentence, pairing each word with its English translation. The example shows four words—"mereka," "di," "jakarta," and "sekarang"—alongside their glosses, with metadata for language, author, date, and page. The code uses D3.js, specifically `d3.forceSimulation`, to position the word-gloss pairs in a network layout, likely with nodes and links connecting each word to its corresponding gloss. The data comes from a JSON object containing the sentence, translation, and structured gloss array, rendered as a force-directed graph to reveal the alignment between source and target languages.

Oct 6, 2010
Loading thumbnail…

On-Page Text Search

Typing a query into the text input triggers a live on-page search that highlights every matching term within the Wikipedia-derived paragraphs. As the user types, the keyup event handler calls jQuery’s `highlight` method, which walks the DOM text nodes and wraps matches in styled `<span>` elements. Removing the query invokes `removeHighlight`, which unwraps those spans and normalizes the text nodes. The code uses jQuery event binding and custom DOM traversal to apply the search visually.

Sep 20, 2010
Loading thumbnail…

find all the words that can be built using the letters in a list, as in Scrabble™.

This example finds all valid words that can be formed from a given set of letters, as in Scrabble™. It reads a system dictionary file (`/usr/share/dict/words`) and iterates through each word, checking whether every letter in the candidate word appears in the tile string and that no letter is used more times than it appears in the tiles. The core logic uses Python’s `set.issubset` for letter containment and `str.count` to verify letter frequencies. The user supplies the tile letters as a command-line argument, and matching words are printed to standard output.

Feb 10, 2010
Loading thumbnail…

Super short intro to using cosine similarity in Python

This example demonstrates how cosine similarity measures the resemblance between coin collections, quantifying the closeness of three people’s holdings. It shows the similarity scores computed for pairs of collections, revealing which individuals’ coin distributions are most alike. The code defines a `similarity` function that calculates the dot product of shared coin counts divided by the product of their Euclidean magnitudes, using Python’s `math.sqrt` and dictionary operations. It compares three hard-coded dictionaries—`you`, `me`, and `abby`—each mapping coin types to counts, and prints the resulting similarity values.

Feb 4, 2010
Loading thumbnail…

Gist 288417

This visualization displays the frequency of every character in a text file, sorted from least to most common. The Python script reads the file’s contents, counts each Unicode character’s occurrences in a dictionary, then prints the character alongside its count. It uses the `codecs` module to handle UTF-8 output and standard file reading to load the source text. The result is a plain textual ranking, not a graphical chart, with each line showing a character and its frequency.

Jan 28, 2010
Loading thumbnail…

Gist 285672

This example demonstrates a language identification system by modeling text as bigram frequencies. It shows the most common two-letter sequences from a given input text, sorted by frequency. The Python code builds a bigram model using `ngrams` and `bigrams` functions, counts occurrences with a `defaultdict`, and removes rare bigrams below a threshold. It relies on the `collections` module and `operator.itemgetter` for sorting. The program reads a UTF-8 text file from the command line and prints the top ten bigrams with their counts.

Jan 25, 2010
Loading thumbnail…

Gist 46260

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.

Jan 13, 2009
Loading thumbnail…

Gist 46230

This example demonstrates how to fetch a Wikipedia page and inspect its HTTP response using Ruby’s standard Net::HTTP library. It shows the response code, message, and raw HTML body for the Harry Houdini article, with an `Accept` header requesting XML. The code prints each part to the console, illustrating basic web request handling without any data visualization or rendering.

Jan 12, 2009