Skip to main content
Log in
C

Caged

@Caged·99 public vizzes

Loading thumbnail…

Getting started with spina pro message inbox.

This example demonstrates how to set up a message inbox for the Spina Pro CMS, showing a complete workflow for generating a message object and building a submission form. It uses Rails generators and Spina’s `Spina::Pro::Message` base class to define fields like `first_name`, `last_name`, and `email`, while a custom `SampleMessagesController` handles POST requests with Turbo Streams for form updates. The code relies on the `invisible_captcha` gem for spam protection and the `OOPSpam` API for spam scoring. A theme’s contact page embeds the form via a turbo frame, and routes are explicitly drawn under `Spina::Engine.routes.draw` to point to the controller’s `create` action.

Jan 7, 2025
Loading thumbnail…

Gist 1e418bc5c048fed5ef2604a1902eb735

This example demonstrates a spatial correction of a U.S. District Court jurisdiction boundary using PostGIS. It shows how an erroneous polygon (fid 57) is split into two parts, with one part merged into a neighboring jurisdiction (fid 58) and the other retained in place. The SQL uses `st_dump` to extract the polygon components, then `st_union` and `st_multi` to recompute the merged and retained geometries. The `UPDATE` statement with a `CASE` expression applies the corrected shapes back to the table, relying on PostGIS geometry functions for the operation.

Apr 1, 2020
Loading thumbnail…

keybase.md

This example shows a Keybase proof-of-ownership workflow in action, demonstrating how a GitHub user cryptographically links their identity across platforms. It uses the Keybase command-line client and the keybase.io API to generate a signed JSON object, with the signature displayed as a hexadecimal string. The visualization highlights the verification process, where the public key and merkle root are checked against Keybase’s ledger, using the `keybase id` command for lookups. The data originates from the user’s gist and the Keybase service, with rendering emphasizing the cryptographic chain of trust through the nested JSON structure.

Jan 11, 2019
Loading thumbnail…

Gist fed523040b43046b27a52290d26c4ceb

This example visualizes the structure of a small React component hierarchy through a static code excerpt, showing how typed props and event handlers are passed between parent and child components. The code uses the Flow type checker to define an `onSubmit` prop as a `Function`, with class `A` passing its `handleSomeEvent` method to component `B` via a prop. The rendering approach is purely textual, relying on the explicit Flow annotations and JSX syntax to illustrate data flow rather than any graphical output. It demonstrates type-safe callback propagation in a React/Flow environment, though no runtime visualization or data processing library appears in the snippet.

Jul 19, 2018
Loading thumbnail…

Gist 00e02b3b58b423a4b01ecef59653df29

This visualization maps population data across Wyoming towns and cities, showing each place as a dot positioned by its geographic coordinates. The size or color of each point likely encodes population, with larger urban centers like Casper and Cheyenne standing out. The visualization uses a TopoJSON file containing place geometries and population counts, rendered with the D3.js library. It likely employs `d3.geoPath` to project the coordinates onto a map and potentially uses `d3.forceSimulation` for label placement or point jitter. The canvas-based rendering approach enables smooth handling of the many small population centers.

Feb 23, 2018
Loading thumbnail…

Resources for deploying machine learning models to production systems.

This example shows a curated list of resources for deploying machine learning models to production, sourced from a GitHub gist by Caged. The visualization uses a simple, text-based layout to present linked resources, with the primary file being `machine-learning-deploy.md`. The code references a speaker deck by Alex Casalboni on cloud deployment, and the interface likely relies on standard HTML and CSS for styling rather than a dedicated visualization library. It does not employ D3.js, Canvas, or Three.js; instead, it focuses on organizing links and descriptions in a readable, static format.

Jun 1, 2017
Loading thumbnail…

Test simple

This example demonstrates a minimal HTML page with an inline script that declares a variable named `top` with a value of 1. The page displays the text "Weird window bug. look in the console," indicating that the code intentionally triggers or exposes a browser-specific behavior related to the global `top` variable. The rendering approach is plain HTML with no external libraries or data sources, relying solely on the browser’s default handling of the page. The console is the intended output location for observing the described anomaly. No visualization or dynamic data processing is present.

May 18, 2017
Loading thumbnail…

Gist d5f899183ce045f9ab18fea10c8496bf

This visualization shows the intersection of Oregon’s boundary with a grid of elevation-derived polygons, highlighting where the two geospatial datasets overlap. It uses `ndjson-join` to combine GeoJSON features from `oregon.json` and the `ned_1arcsec_g.shp` shapefile, then filters the pairs with `ndjson-filter` and the JSTS library’s `intersection` method to retain only non-empty geometric overlaps. The final `ndjson-map` extracts the matching features, revealing the spatial alignment between the state outline and the elevation grid cells. The code relies on command-line geospatial tools and JSTS for geometry operations.

Dec 21, 2016
Loading thumbnail…

Gist c42ddd2ab41e80bdaa7a1b67f55ac0d4

This visualization uses a timeline of NBA coach tenures, showing each coach’s consecutive seasons as a single continuous stint. The underlying data is parsed from a CSV file, grouping season-by-season records into multi-year stints by merging adjacent years for the same coach. The Ruby script sorts the stints chronologically and prints them as text, relying on the CSV library for input and standard array/hash operations to detect continuity. The output itself is a plain list of stints, with no graphical rendering; the visualization would require a front-end library like D3.js to draw the timeline, but the provided code only performs data preprocessing and formatting.

May 7, 2016
Loading thumbnail…

Using Ruby, sort each coach by consecutive season tenures. Some seasons have two coaches which implies that the coach was fired/removed mid-season. The result should be something like [[name, start_season, end_season], [name, start_season, end_season]] where the order is by ascending start_season.

This example visualizes the consecutive tenures of each coach from the `coaches.csv` gist, ordering tenures by ascending start season and representing mid-season firings when a season lists two coaches. It shows a clean chronological timeline of coaching stints, with each row as a `[name, start_season, end_season]` tuple, computed using Ruby’s `CSV` and `Enumerable#sort_by` to group and sort the data. The rendering relies on Ruby’s standard `CSV` parsing and array manipulation to extract and order the seasons, then outputs the structured list without external charting libraries.

May 7, 2016
Loading thumbnail…

Examples of ordered set aggregates in Postgres

This example shows how Postgres’s ordered set aggregates compute distribution percentiles for a player statistic, both globally and per season, with rounded averages alongside. The first query returns a single row with the overall average and an array of percentiles (25th, 50th, 75th, 95th), while the second groups the same computation by season, revealing how the distribution shifts slightly over time. It uses the `percentile_cont` function with a `WITHIN GROUP (ORDER BY ...)` clause, which is a native SQL aggregate, not a visualization library. The code also relies on the `round` and `avg` functions, and the output is plain tabular text, with no graphical rendering involved.

Apr 5, 2016
Loading thumbnail…

Extract the first character of each string part separated by the '-'. There can be an unknown number of potential parts.

This example demonstrates how to extract the first character of each string segment separated by hyphens, regardless of the number of segments, and concatenate them into a single output. It shows a concise SQL pattern for parsing structured text data. The query uses PostgreSQL’s `regexp_matches` function with a global flag to find all alphanumeric characters, then aggregates the results with `array_agg` and converts the array to a string via `array_to_string`. The source data, ‘Letter-1-2’, is processed to yield the abbreviated result, highlighting the reusable regex and array functions for dynamic text parsing.

Dec 26, 2015
Loading thumbnail…

Gist 6ce6b2a6ecda4579b64f

This visualization uses a Vue.js interface to display a list of city and state locations, likely from a dataset of place names. It shows a static, text-based table of these locations, with no visible map or chart. The code relies on standard DOM rendering through Vue’s template system, without additional data-viz libraries like D3 or Three.js. The rendering approach is a simple list, and the data source appears to be a CSV of location strings. No interactive or dynamic behavior is evident beyond the initial display.

Nov 16, 2015
Loading thumbnail…

Cubehelix Color Picker

The Cubehelix Color Picker displays three horizontal channels—hue, saturation, and lightness—as gradient strips, each paired with an axis. It uses D3.js to render the axes and SVG structure, while Canvas draws the color gradients. The visualization demonstrates the cubehelix color space by letting viewers compare how each channel varies independently, with the final color resulting from the combination of all three channels.

Jun 8, 2015
Loading thumbnail…

Naive dispersal of overlapping points in PostGIS

This example shows how to disperse overlapping point markers that share identical coordinates in a PostGIS database. It first groups points that occupy the same location and counts their multiplicity, then creates buffer polygons whose sizes scale with the number of overlapping points. Using a custom `RandomPoint` function, it randomly relocates each original point within its corresponding buffer, effectively separating coincident markers so all inspections become visible. The visualization relies on PostGIS spatial SQL queries—including `st_equals`, `st_buffer`, and `st_contains`—to generate the dispersal, with the random-point logic implemented in PL/pgSQL and executed directly in the database.

May 16, 2015
Loading thumbnail…

Gist ac01c91d8c9c9dd4b825

This example uses D3.js and the HTML5 Canvas API to render an interactive color picker that visualizes the HCL (Hue-Chroma-Lightness) color space. It shows a 500×500 pixel grid where the horizontal axis maps hue from 360 to 0 degrees, the vertical axis maps lightness from 0 to 100, and chroma is fixed at 35. The code uses `d3.scale.linear` to map pixel coordinates to color values, converts HCL to RGB via `d3.hcl().rgb()`, and writes the results directly to image data with `createImageData` and `putImageData`. Moving the mouse over the canvas triggers `getImageData` to read the pixel color and display its hex value in a label, demonstrating direct pixel manipulation without SVG or DOM elements.

May 11, 2015
Loading thumbnail…

Gist 61957648a96af6b4167e

This example visualizes traffic crash records from a Gist file, mapping each participant’s location and attributes onto a canvas. It uses a force-directed layout with `d3.forceSimulation` to spatially arrange points, while `d3.geoPath` renders geographic features from the included geometry. The code reads the raw text data, parses fields like crash severity and participant details, and draws small circles colored by injury severity. It also employs Canvas `getImageData` for pixel-level rendering, and transitions with `transition.attrTween` to animate point movement. The result is an interactive scatterplot-style map of incident density and participant distribution.

May 11, 2015
Loading thumbnail…

Quick feedback for municipalities working with open data

This example presents a set of practical recommendations for municipal open-data programs, illustrated through a gist of feedback notes. It shows how to improve developer experience by prioritizing complete datasets over APIs, encouraging machine-friendly retrieval, and emphasizing metadata as a first-class component. The visualization uses no charts or maps; instead, it renders the text-based guidance directly, likely via simple HTML and CSS, with no JavaScript libraries beyond perhaps basic DOM manipulation. The source is a gist by Caged, focusing on policy rather than data graphics.

Apr 13, 2015
Loading thumbnail…

Gist 652595e55960a8e04a29

This example visualizes the spatial relationships between metropolitan statistical areas and their constituent counties, townships, and other administrative geometries. The code first builds a combined geometry table using SQL, merging overlapping regions across multiple spatial layers while excluding special cases like Boston. It then renders these shapes using D3.js, likely leveraging `d3.geoPath` for projection and canvas or SVG drawing. The query explicitly handles hierarchical and overlapping geographies, prioritizing township-level detail where available and falling back to county unions for other areas. The final visualization shows how different government boundaries interlock within U.S. metropolitan regions, with the SQL preprocessing ensuring no duplicated or missing polygons.

Feb 2, 2015
Loading thumbnail…

Autoupdating graphite timeseries in d3

This example shows live-updating time-series graphs that automatically refresh their data at a regular interval. It renders each graph as an SVG with D3 scales and axes, drawing lines from Graphite’s JSON endpoint. The code uses `d3.json` for data fetching, `d3.svg.axis` and `d3.svg.line` for rendering, and a clip path to constrain the plotted area. A real-time mode triggers repeated requests using a dynamic URL that updates the time window based on the first payload’s interval.

Dec 16, 2014
Loading thumbnail…

Gist 1f8fbb4e3c5e59a3a46d

This streamgraph visualizes the rise and fall of programming language popularity on GitHub from 2008 to 2009, using a stacked area layout rendered in SVG via D3 v3. Each colored band represents a language’s share of activity per month, with the x-axis showing time and the y-axis the percentage of total activity. The data reveals how languages such as C, JavaScript, and Ruby dominate the early period, while smaller languages like Erlang, Scala, and Haskell appear intermittently, and the overall composition shifts dramatically over time as different languages gain and lose share.

Nov 6, 2014
Loading thumbnail…

Gist 0c701eddfaa4b93ee172

Two terminal sessions show failed attempts to import OpenStreetMap data into a PostgreSQL database using Osmosis, a Java command-line tool. The visualization captures log output from sequential runs of the `osmosis` command, displaying errors from Java's `java.net.ConnectException` when the database connection is refused. The first attempt fails because the `--truncate-pgsql` task receives an unexpected `port` argument, while the second fails because PostgreSQL is not running. The display highlights the pipeline's reliance on database configuration and connection handling, rendered as plain terminal text.

Oct 10, 2014
Loading thumbnail…

Plot vector points on a cropped raster image with d3.js

This example shows how to plot vector points from a GeoJSON file on top of a cropped raster image (map) using D3.js. A Mercator projection is aligned to the raster’s geographic bounds, then scaled and translated to fit the image dimensions. Supermarket locations are rendered as red SVG circles over the image.

Jul 30, 2014
Loading thumbnail…

lat/lon to tile number from http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_.28JavaScript.2FActionScript.2C_etc..29

This example demonstrates how to convert geographic coordinates (latitude and longitude) into slippy-map tile numbers, and vice versa, for a given zoom level. It shows the mathematical relationships between raw coordinate pairs and the tile grid system used by web maps like OpenStreetMap. The code defines pure JavaScript functions—`long2tile`, `lat2tile`, `tile2long`, and `tile2lat`—using the `Math` object’s trigonometric and logarithmic methods to perform the projection. No external libraries are used; the logic directly implements the Web Mercator projection formulas, enabling both forward and inverse tile-number calculations. The functions are standalone and ready for integration into tile-based map renderers.

Jul 4, 2014
Loading thumbnail…

Scoring buildings based on proximity to neighborhood features

This example visualizes building scores in Portland based on proximity to nearby amenities, assigning higher ranks to structures near supermarkets, rail stops, and parks. It shows a ranked map of buildings, with scores aggregated from overlapping amenity zones. The workflow uses PostGIS spatial SQL functions like `st_expand` and `st_intersects` to generate buffered zones, then sums scores per building via a `union` query and stores results in a new table. The rendering likely relies on a mapping library such as Leaflet or Mapbox, though the code excerpt focuses on the spatial data preparation rather than the front-end visualization.

May 24, 2014
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

May 8, 2014
Loading thumbnail…

US Federal Judicial Districts

This visualization maps US federal judicial districts, with each district filled by color and labeled with its judicial district code. The map includes county boundaries and uses an SVG renderer with D3’s geographic path generator. Clicking a district logs the number of Democratic and Republican presidential appointees serving as active judges in that district, with the underlying data prepared from a TopoJSON pipeline that merges county-level geometries into districts.

May 6, 2014
Loading thumbnail…

Gist 11520211

This example visualizes the geographic boundaries of US states and counties using a TopoJSON file that encodes land, county, and state outlines. Built with D3, it renders the map from the `us.json` TopoJSON data, which contains geometry collections for counties and states. The visualization likely uses D3's projection and path generators to draw the geographic shapes, displaying the boundaries with distinct styling for counties and states. The minimal code structure suggests a basic interactive or static map, with the data provided in a structured TopoJSON format.

May 4, 2014
Loading thumbnail…

Gist 9204169

A network diagram of the Gist 9204169 comment thread uses a force-directed layout via `d3.forceSimulation` to arrange nodes by user interaction. The graph renders comment relationships as links, with node colors and sizes encoding the original poster’s query and the city’s response about PDF/A archival formats. Data comes from the embedded `message.md` and `response.md` files, parsed into JSON. Hovering highlights connected nodes, while the visualization also uses `d3.geoPath` only for map context, though no geographic data appears. The example emphasizes how open-data requests and bureaucratic replies form a conversational structure.

Feb 25, 2014
Loading thumbnail…

Get above/below .500 point differential for NBA teams.

This example visualizes how NBA teams perform against opponents above and below the .500 win-percentage threshold, ranking teams by their point differential against sub-.500 teams across each season. The Ruby script queries a PostgreSQL database of game and team statistics, then computes average scoring margins for games versus winning and losing opponents, sorting teams by the spread between those two margins. It outputs a terminal table via the `terminal-table` gem and writes the same ranked data to CSV files. The code relies on raw SQL through the `pg` API to join game results, demonstrating a straightforward data-processing pipeline rather than interactive visualization.

Feb 9, 2014
Loading thumbnail…

Generate graphs from NBA data

The visualization generates two bar charts from NBA team statistics, each plotting point differentials against a baseline. The first chart displays each team’s overall point spread, while the second groups the same differentials into “Above 500” and “Below 500” categories for comparison. Using pandas for data manipulation and matplotlib for plotting, the code reads CSV files, sorts teams by differential, and renders bar charts with custom colors and axis labels. The output is saved as PNG images at 150 DPI, with data sourced from stats.nba.com.

Feb 9, 2014
Loading thumbnail…

Convert raw NBA JSON to CSV.

This example converts raw NBA JSON game logs into a single CSV file, first showing the transformation of nested statistics into flat, queryable rows. It reads JSON files for each season and measure type, extracting headers and parameters to build team-level records with prefixed column names like `pace_*` or `def_rating_*`. The script uses the CoffeeScript language and the Node.js `fs` and `csv` libraries, with the `csv().to.path` API to write the output. It also merges team abbreviations from a separate CSV, keying each row by team ID and season.

Feb 9, 2014
Loading thumbnail…

Sync NBA team data from stats.nba.com

A shell script named `syncteams.sh` synchronizes NBA team statistics from the stats.nba.com API by iterating over seasons from 1996–97 through 2013–14. For each season, it fetches six JSON files—Base, Advanced, Misc, Four Factors, Scoring, and Opponent—using `curl` with a URL that specifies parameters like `MeasureType`, `PerMode=Totals`, and `rowsPerPage=30`. The script checks for existing files to avoid redundant downloads, re-fetching only the latest season (2013–14) each run. Data is stored in a `data/teams/` directory organized by season, with filenames lowercased from the stat type.

Feb 9, 2014
Loading thumbnail…

NBA bully rankings 2013-14.

The visualization ranks all 30 NBA teams by their "bully" score, a metric that subtracts a team's average point differential against above-.500 opponents from its differential against below-.500 opponents, indicating how much a team feasts on weaker competition. Using data from Caged's gist, the table shows each team's above/below .500 differentials, the resulting bully factor, and total point differential, with teams sorted by this bully score. A note explains why Oklahoma City ranks last despite a positive overall differential, since they perform equally well against both good and bad teams. The display highlights how bully scores reveal scheduling and matchup tendencies beyond simple win-loss records.

Jan 26, 2014
Loading thumbnail…

Using d3-tip to add tooltips to a d3 bar chart

This example shows a bar chart of letter frequencies in English, styled with orange bars that shift color on hover. It demonstrates how to add tooltips to a d3 bar chart using the d3-tip plugin, which displays each bar’s exact frequency value on mouseover. The visualization loads data from a tab-separated data.tsv file, renders as SVG with d3.v3, and uses d3.svg.axis for the axes. The tooltip is created with d3.tip, configured with an HTML template, and attached to the chart via svg.call(tip), while mouseover and mouseout events trigger tip.show and tip.hide.

Jan 10, 2014
Loading thumbnail…

just a bookmark of random psql queries.

This example visualizes spatial relationships between neighborhoods, city blocks, and demographic data in Portland and Laurelhurst through a series of SQL queries. The code shows how geographic joins and intersections are performed using PostGIS functions like `ST_Intersects`, combining building footprints, block polygons, and census block-group data. The queries calculate race-based percentages, such as percent white and percent black, from census fields like `h7x002` and `h7x003`, while filtering for specific places and positive population counts. The gist demonstrates iterative query building for choropleth-style analysis, revealing how raw geographic and tabular data are merged to support subsequent mapping or charting in a visualization tool.

Nov 4, 2013
Loading thumbnail…

Shell script to import data into Postgres from https://www.nhgis.org. If you use this, you'll need to edit line 14 to include the census data you're importing.

This script sets up a Postgres database to hold U.S. Census block-group data, combining demographic race counts with spatial geometries. It first imports CSV race data into a table, then converts shapefiles to a uniform projection (EPSG:4326) using `ogr2ogr` and appends them via `shp2pgsql`. The code uses PostGIS for geometry support and creates a spatial index on the `geom` column. It relies on command-line tools like `dropdb`, `createdb`, and `psql`, processing files from the NHGIS source archive. The final output enables querying joined attribute and spatial data.

Oct 11, 2013
Loading thumbnail…

Portland parks

The visualization displays the geographic boundaries of parks throughout Portland, Oregon, using a TopoJSON file that encodes each park as a polygon or multipolygon. It renders these shapes on a map-like canvas, showing the distribution and relative sizes of green spaces across the city. The implementation uses D3’s `d3.geoPath` to project and draw the topology, with the data sourced from a gist by Caged. The scene relies on D3’s geographic projection and path generation to convert the TopoJSON arcs into visible, filled polygons.

Sep 20, 2013
Loading thumbnail…

Portland blockgroup TopoJSON

This example visualizes the boundaries of Portland block groups using a TopoJSON file. The map is rendered with D3, which reads the topology and converts it into SVG paths on the fly. The block groups are drawn as distinct polygon features, with each region represented by arcs from the TopoJSON topology. The geographic boundaries are likely derived from Census data, and the visualization highlights the spatial layout of Portland’s neighborhoods at the block-group level. The author, Caged, encoded the TopoJSON structure to share this map, making it easy to reuse for choropleth or interactive map projects. The display emphasizes boundary shapes rather than quantitative values, offering a clean basemap for further analysis.

Sep 19, 2013
Loading thumbnail…

Tilemill PostGIS layer subquery showing layer clipping via polygon intersection.

This example demonstrates how to clip building footprint data to a specific neighborhood boundary using a spatial intersection query in Tilemill. The visualization shows only the buildings that fall within the LAURELHURST neighborhood, with their geometries trimmed to the neighborhood polygon’s edge. The underlying SQL query joins the `buildings` and `neighborhoods` tables via PostGIS’s `ST_Intersects` function, selecting the boundary polygon as `bounding_area`. The map renders the resulting clipped layer, effectively masking out any building portions that extend beyond the neighborhood’s borders. This technique is useful for isolating features within a defined administrative or custom area.

Sep 14, 2013
Loading thumbnail…

Directly render and serve d3 visualizations from a nodejs server.

This example demonstrates how to render D3 visualizations directly from a Node.js server, showing a line chart of normally distributed sample data. The server uses Node’s HTTP module and the D3.js library to generate SVG markup programmatically, then sends it to the browser as an `image/svg+xml` response. It constructs linear scales (`d3.scale.linear`), axes (`d3.svg.axis`), and a basis-interpolated line (`d3.svg.line`) entirely on the server side. The visualization is styled with simple SVG attributes, and the data is randomly generated via `d3.random.normal`, highlighting a server-side rendering approach where all D3 computations and SVG generation occur in Node before transmission.

Sep 1, 2013
Loading thumbnail…

via:geojson.io

This example displays a single GeoJSON polygon—a rectangular region over the Pacific Northwest—on an interactive Mapbox map. The code loads the GeoJSON file via jQuery’s `$.getJSON`, then uses `L.geoJson` to add the polygon layer and automatically fits the map’s bounds to the feature. For each layer, it extracts the feature’s `properties` object and generates an HTML table, which is then bound as a popup using `bindPopup`. The visualization relies on Mapbox.js and Leaflet’s tile layer for rendering, with popups that reveal any associated attribute data.

Aug 8, 2013
Loading thumbnail…

The colors used in http://labratrevenge.com/pdx

This example visualizes the color palette from the website labratrevenge.com/pdx as a network of nodes. It shows how each hex color connects to its nearest visual neighbors in a force-directed layout, using `d3.forceSimulation` to position the nodes and `d3.drag` for interaction. Each circle’s fill is the exact color it represents, and edges are drawn as simple links between similar hues. The data is a hardcoded gist by Caged, listing thirteen hex values. The rendering uses SVG with `d3.select` and `d3.forceLink` to compute the linking, while node opacity and stroke come from standard SVG attributes. No external libraries beyond D3.js are used.

Jul 16, 2013
Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

Jul 10, 2013
Loading thumbnail…

TopoJSON via MapBox & Leaflet

This example shows a map of the United States with county boundaries rendered as vector shapes, overlaid on a zoomable and pannable MapBox tile layer. It combines D3.js and TopoJSON to load and parse county geometries from a remote GeoJSON-like file, then uses MapBox’s Leaflet-based `L.geoJson` to display them with a simple gray outline style. The map initializes at a low zoom level, and the counties are added as a single layer after asynchronous JSON retrieval, demonstrating integration between D3’s data handling and Leaflet’s mapping API.

Jun 14, 2013
Loading thumbnail…

Convert SVG's to PNGs. This works OK if the SVG's styles are inline. The SVG element must contain an xmlns attribute. Webkit also requires you specify a font size on `text` elements.

This example shows a client-side workflow for converting an inline SVG graphic into a PNG image. It first serializes the SVG element—which must carry an `xmlns` attribute—into an XML string using `XMLSerializer`, then encodes that string as a base64 data URI. The code then creates a new `Image` object and assigns the data URI to its `src` attribute before appending the image to the document body. The approach relies on the browser’s native `btoa` function and works only if the SVG’s styles are inline, and WebKit browsers additionally require an explicit `font-size` on text elements.

Jan 27, 2013
Loading thumbnail…

arduino test

This example demonstrates a live sensor-data visualization using the Firmata library to communicate with an Arduino board over a serial connection. The code establishes a board connection via `firmata.Board` and logs a message once the link is ready, though it does not yet render any visual output. The focus is on the initial data-acquisition stage, where raw input from the board would be captured and prepared for future graphical mapping. The visualization’s rendering approach remains unspecified, as the current code only handles the communication handshake.

Dec 15, 2012
Loading thumbnail…

Linear scale interpolation in Ruby based on d3.js's implementation

This example demonstrates a minimal implementation of D3.js-style linear scale interpolation in Ruby. It shows how a numeric value from an input domain is mapped to a corresponding output range using two closures: `uninterpolate_number` and `interpolate_number`. The `scale` function combines these to normalize and then rescale values, while also clamping input to the domain via a sort. The code’s output, printed with `puts`, confirms the mapping for domain [0, 500] to range [0.0, 1.0], producing 0.0, 0.5, and 1.0 for the given test points, mirroring the behavior of `d3.scaleLinear` in Ruby.

Nov 21, 2012
Loading thumbnail…

interesting quartz tricks

This example demonstrates how to draw a social-media-style post card using Core Graphics and Quartz 2D on iOS. It shows a rounded container with a gradient “Like” bar at the bottom, which includes text labels (“Like,” “Comment”) and vertical dividers, plus a placeholder for an avatar. The code uses `UIBezierPath` for shapes, `CGGradientCreateWithColors` for the bar’s linear gradient, and shadow declarations via `CGContextSetShadowWithColor`. The rendering is entirely procedural, with no external data source, focusing on manual layout and styling through Core Graphics calls.

May 8, 2012
Loading thumbnail…

quick hack experiment

This visualization demonstrates the difference between raw data points connected by a line and a calculated trend line overlaid on the same chart. It shows how a simple linear regression fits the given data sequence, with the raw path in red and the trend line in green. The code uses D3.js v2 to build an SVG visualization, mapping input data indices to x-coordinates and values to y-coordinates via linear scales. It computes the least-squares regression line by calculating the slope and intercept from the data, then renders both lines using `d3.svg.line` to create the path geometry.

Apr 14, 2012
Loading thumbnail…

Installing Graphite on OS X Lion

This example documents the step-by-step installation of Graphite, a time-series graphing tool, on OS X Lion. It shows the sequence of terminal commands and configuration changes required, from installing Python and Cairo to setting up Carbon and the Graphite web interface. The guide relies on command-line tools like `brew`, `pip`, and `python manage.py syncdb`, as well as manual file edits and symlinking. It emphasizes the expected outcome—a working Graphite Composer at localhost:8080—and warns about potential py2cairo and Cairo issues that could cause broken images.

Mar 3, 2012
Loading thumbnail…

Gist 1967223

This example visualizes the leaked plaintext password from a support email, mapping its characters and their positions through a network layout. The code uses `d3.forceSimulation` to arrange character nodes, with `d3.geoPath` absent; instead, it employs SVG paths for links and `transition.attrTween` to animate text placement. The data comes from the email’s body, parsed into individual characters and spaces, while the rendering approach highlights the password’s structure as a force-directed graph. Only the visible simulation and tweening logic appear, with no additional interactions beyond the animated layout.

Mar 3, 2012
Loading thumbnail…

Gist 1782460

This visualization shows the result of running Ruby code that attempts to load `rake/compiletask` twice, failing both times with a `LoadError` because the file does not exist. It presents a terminal session where the user first checks the MacRuby version, then tries to require the missing library, and finally verifies that `rake` loads successfully but the specific compile task file remains unavailable. The example uses the Ruby `require` method and the `rake` gem’s API to demonstrate a common error-handling scenario, highlighting the difference between loading a gem and accessing a non-existent sub-file. The data source is the literal command-line output and error messages from the user’s shell.

Feb 9, 2012
Loading thumbnail…

d3.js line chart with multiple lines and points

This example shows two multi-series line charts overlaid in a single SVG, with each line distinguished by its own path and circular data points. It demonstrates how to map linear scales to x- and y-axes, render gridlines and tick labels, and add interactive hover effects that enlarge points on mouseover. The code uses D3.js v3 APIs including `d3.svg.line()`, `d3.scale.linear()`, and selection methods like `append`, `attr`, and `on`. The data is a hardcoded array of two numeric arrays, with axes and points generated programmatically from the same scales.

Dec 30, 2011
Loading thumbnail…

Line Chart

Two small line charts, built with the D3.js library and jQuery, visualize two hard-coded data arrays of nine points each. The charts plot the data on a linear scale, with an orange line connecting circular data points. Interactive mouseover events enlarge the circles, and clicking a point logs its value and index to the browser console. The rendering includes grid lines, axis ticks, and labels, all styled with CSS. The data is hardcoded within the script, not loaded from an external source.

Dec 29, 2011
Loading thumbnail…

random shell stuff

This example demonstrates a shell-scripting workflow for scaffolding interactive data-visualization projects, showing how to automate the setup of a project directory structure and download essential JavaScript libraries. The script creates nested folders for images, stylesheets, scripts, and CoffeeScript sources, then fetches libraries such as d3.js, polymaps.js, underscore.js, and backbone.js via curl. It also generates a CoffeeScript starter file and a Rakefile with a watch task for compiling CoffeeScript to JavaScript. The visualization itself is not rendered; instead, the code focuses on environment preparation and dependency management.

Oct 4, 2011
Loading thumbnail…

My Sublime Text 2 Setup

This example shows the “My Twilight” color theme for Sublime Text 2, a customized dark syntax-highlighting scheme defined in a tmTheme file. The theme sets a dark background (#1F1F1F) with light foreground text (#F8F8F8), and defines colors for various code elements like comments, strings, keywords, and variables. It also includes a snippet for inserting a Python debugger tracepoint via the `pdb` tab trigger. The visualization likely presents the theme’s color palette and its application to sample code, alongside the snippet configuration, to illustrate how the editor appears and behaves with this setup.

Sep 16, 2011
Loading thumbnail…

Replace nested double quotes with single quotes in these CSV strings.

This example demonstrates a text-processing routine that cleans malformed CSV data by replacing nested double quotes with single quotes. It operates on two hardcoded strings containing street names and player nicknames with embedded quoted terms, such as `"Dearil "DJ""` and `"Calvert "C.J.""`. The code uses Ruby string interpolation with `%()` literals to define the input strings, then applies a regular expression to substitute the inner quote pairs. The output is not visualized but rendered as plain corrected CSV lines, showing how the transformation standardizes quote usage for downstream parsing.

Sep 13, 2011
Loading thumbnail…

neighborhood mongo

Neighborhood mongo maps Portland neighborhood polygons stored as GeoJSON in MongoDB, rendered on a zoomable, panning map. Each polygon is drawn as an SVG path using a geographic projection, with neighborhood boundaries overlaid on muted base tiles. Hovering highlights a district and reveals its name, while the geo-coordinates in the data drive the shape and position of each region. The visualization demonstrates how spatial querying and rendering of GeoJSON features can be handled directly from a MongoDB document store.

Aug 31, 2011
Loading thumbnail…

d3.js experiment - Donuts, Bars and Crime.

The visualization presents crime data across San Francisco neighborhoods for a selected year, combining donut charts for offense type distribution and bar charts for hourly incident patterns. Each donut chart displays the share of crimes by neighborhood, with the total count centered and interactive hover labels revealing specific neighborhood names and values. The bar charts beneath show the frequency of incidents across 24 hours per offense type. Built with CoffeeScript, it uses D3.js primitives including `d3.svg.arc`, `d3.layout.pie`, and `d3.scale.ordinal` for coloring, while the JSON data source is loaded via `d3.json` from the `top-neighborhoods-{year}.json` endpoint.

Aug 26, 2011
Loading thumbnail…

census block heatmap

A census block heatmap displays population or demographic counts across Minnesota’s block-level geography, using color intensity to reveal spatial density variations. The visualization loads GeoJSON feature data from `/data/mn-blks.json`, then applies `d3.scale.quantile` to bin the count values into four color classes. The map is rendered using the Polymaps library (`po.geoJson`), which projects and draws the geographic shapes, while `_.each` from Underscore assigns the appropriate CSS class (e.g., `nh q5-0` through `q5-3`) to each block element based on its quantile bucket. The coloring relies on pre-defined styles for those classes, visually encoding the counts without needing explicit pixel-level drawing.

Aug 26, 2011
Loading thumbnail…

Gist 1077277

This example shows a small donut chart that visualizes three named data points (Tom, Sally, John) with their corresponding numeric values, using a 400 by 400 pixel SVG canvas. The chart renders each slice with a distinct color from the categorical color scale, and labels each slice with its value formatted to two decimal places. The visualization is built with D3.js version 1.25.0, specifically using the `d3.layout.pie` for the pie layout and `d3.svg.arc` to define the donut's inner and outer radii. A click handler logs the data object of a clicked slice to the console. The data is hardcoded in the script, with no external source.

Jul 12, 2011
Loading thumbnail…

Gist 1057445

This example demonstrates a CSS sprite-based icon system where two distinct states—overview and demographics—are rendered as background images with active-state variations, using offset positioning to switch between icons. The code relies on Compass’s sprite helpers and a Sass `@each` loop to generate the `.icons-overview` and `.icons-demographics` classes, while manually specifying `background-position` values (e.g., `20px -70px` and `20px 12px`) to align the correct sprite icons. The active states toggle background positions via pseudo-classes like `:active` and custom classes such as `.overview_active`. The implementation uses the `icons-sprite` mixin from Compass, with the sprite file referenced from an external asset path. No data or interactive behavior is present; it purely showcases static UI icon styling.

Jun 30, 2011
Loading thumbnail…

Gist 1041566

This gist presents a customized Z shell configuration that enhances terminal productivity through Git integration, directory shortcuts, and command aliases. It shows a prompt with green user and host information, a red Git branch indicator, and a green prompt symbol, while also demonstrating autoloaded colors, history options, and key bindings. The code relies on zsh's built-in prompt expansion, the `autoload` command for module loading, and external tools like `git`. The configuration also includes functions for setting terminal titles and creating web development project scaffolding.

Jun 22, 2011
Loading thumbnail…

Gist 959844

This map visualizes a TriMet bus route (Route 6, Martin Luther King Jr Blvd) as a dense GeoJSON LineString, rendered as a geographic path. The data, sourced from a gist by Caged, traces the bus route’s path through Portland, with each coordinate pair representing a point along the route. The visualization highlights the route’s geometry, showing its turns, straight segments, and directionality from the start near Jantzen Beach. The encoding uses a simple line stroke to represent the path, with the route metadata (e.g., route number, direction) stored as properties, making it suitable for interactive mapping or transit-route analysis. The visualization emphasizes spatial patterns and route continuity rather than quantitative comparison, leveraging the GeoJSON structure to display the polyline. The design is minimal, focusing on the geographic trace of the bus line without additional visual encodings or annotations.**Gist 959844** is a simple geospatial visualization of a single transit bus route. The data, sourced from a gist by Caged, contains a GeoJSON Feature with properties describing the route (e.g., "Martin Luther King Jr Blvd", direction "To Jantzen Beach", type "BUS"). The visualization plots this LineString geometry on a map, showing the detailed path of the bus route through a series of latitude and longitude coordinates. The map provides a clear, straightforward view of the route's shape and path.

May 6, 2011
Loading thumbnail…

Gist 939947

This example shows a small social network as a circular chord diagram, mapping five people (Jane, Sue, Sally, Tom, and Bob) and their connections between slices of an inner ring. The visualization displays the network structure first, then reveals the mechanics: data is hard-coded in a JavaScript array, with each person assigned an angular band. Using D3’s ordinal scale and SVG arc generator for the ring segments, the code draws chords via the d3.svg.chord API, connecting midpoints of arcs to represent each directed relationship. Labels are placed using arc.centroid, and the entire graphic is rendered in a 300×300 SVG within an HTML page, with path styling controlled by CSS.

Apr 26, 2011
Loading thumbnail…

Gist 939901

The visualization displays a small directed graph of four people—bob, jane, sue, and tom—with their named connections drawn as curved arcs. Each person appears as a colored arc segment arranged in a circle, while the connections between them are shown as thin, curved paths that originate from the segment of the source person and end at the target person’s segment. The code builds this using an ordinal scale to map each person to an angular band, then constructs arc paths with `d3.svg.arc()` for the segments and `d3.svg.diagonal()` for the connection curves, both rendered in a centered SVG group. The data is a hardcoded JavaScript array, and the visualization uses only D3’s core SVG helpers without any simulation or layout engine.

Apr 24, 2011
Loading thumbnail…

Gist 937986

A single red donut chart fills the entire 800-by-800-pixel SVG canvas, showing five equal slices that together form a complete ring. The visualization uses D3's `d3.layout.pie` to compute the arc angles and `d3.svg.arc` with an inner radius set to 95% of the outer radius, producing a thin, ring-like donut rather than a thick pie. Each slice is filled with the same solid red color, and the data comes from a hardcoded array of five 20s in the sample.coffee file. The rendering approach relies on SVG `path` elements grouped in `<g>` elements, with the entire chart translated to the center of the canvas.

Apr 22, 2011
Loading thumbnail…

Gist 890029

This visualization maps the timestamps of Gist 890029 commits as a radial time-series layout, showing activity across days of the week and hours. It uses d3.forceSimulation to position circular nodes on a spiral, with each point encoded by day and time. The rendering relies on d3.quadtree for collision detection and a custom path generator via d3.curveLinear, while axis labels and tick marks are drawn using d3.axisTop and d3.axisLeft. The source data comes from the gist’s file list, where each line is a timestamp parsed into a Date object. Color intensity varies by frequency, and the visualization highlights daily rhythms through a stacked circular band.

Mar 28, 2011
Loading thumbnail…

d3 grouped bar

This example shows a grouped bar chart comparing weekly values across two series, distinguished by fill color (blue for the previous series and gray for the current one). The data comes from a JSON endpoint (`/trends.json`) containing arrays for weeks and months. Using D3’s ordinal scales for positioning, it renders SVG rectangles for each bar, with a color-coded layer per series and month labels placed along the x-axis. The visualization is drawn inside an SVG container sized to the page element, using D3’s selection and data-join patterns to bind the nested values.

Mar 23, 2011
Loading thumbnail…

Gist 877801

This example demonstrates a debugging session for a geospatial query on a Portland crime database using MongoDB. The visualization is not a traditional chart but rather a log of command-line interactions in the MongoDB shell, revealing a critical bug in the `geoNear` command with spherical geometry. The author, Caged, queries crime records at a specific latitude/longitude coordinate and discovers that `$centerSphere` queries return no results due to a "spherical distance would require wrapping" error, while a `geoNear` command returns records at a distance of 1.803 even for the exact same location. The gist highlights the inconsistency and potential bug in MongoDB's spherical distance calculations, where identical coordinates yield non-zero distances. The visualization would likely plot these crime locations on a map, with a note or highlight on the unexpected distance value, illustrating the importance of accurate geospatial querying and the quirks of early MongoDB versions.

Mar 20, 2011
Loading thumbnail…

Crimes within 100 yards of a Max stop 2009-2011

This visualization shows the number of crimes reported within 100 yards of each MAX station for the years 2009, 2010, and 2011, using point markers on a map. It first highlights total crime counts per station, then breaks out aggravated assaults for 2010, with a clear ranking of the top stations each year. The code uses D3’s `d3.forceSimulation` to position overlapping station labels, and `d3.geoPath` to render geographic boundaries, while crime counts are drawn from the provided gist data. Station markers and text labels are animated via D3 transitions, though the rendering stays strictly point-based rather than using heatmaps or grid overlays.

Mar 11, 2011
Loading thumbnail…

Portland, OR Crime comparison Jan 1 - Mar 1 2010 and 2011

This visualization compares crime statistics in Portland, OR for the period of January 1 through March 1 in 2010 and 2011. It shows a side-by-side bar chart for each offense type, with the two years represented by distinct colored bars, allowing for immediate visual comparison of increases and decreases across categories. The chart uses D3.js with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, rendering the bars via SVG `rect` elements. The data is loaded from a gist file using `d3.csv`, and the visualization includes interactive tooltips for precise value display, though it does not include any animation or transition effects.

Mar 8, 2011
Loading thumbnail…

Stack level too deep

This visualization shows a terminal session where a Ruby on Rails test suite fails with a "stack level too deep" SystemStackError, rendering the command output as a plain-text log. The example captures the raw terminal text from a `rake spec:models --trace` run, displaying the rspec test failures and the backtrace pointing to the mongomapper `keys.rb` library. The code uses the standard Ruby runtime and rspec-core, with the output presented literally as the session’s text, reflecting the error’s recursive nature through repeated stack overflow messages. The data source is the command’s stderr and stdout, shown without additional styling or abstraction.

Jan 29, 2011
Loading thumbnail…

Quick script to help you find and deal with old watched repos, forks and owned repos.

This script demonstrates a command-line workflow for identifying and managing stale GitHub repositories from a user’s watched list. It sorts repos into four categories—your forks, your own repos, their forks, and their repos—based on ownership and fork status, then flags those not pushed to in over eight months. For each stale repo, it prompts the user to either unwatch (via the GitHub API’s `unwatch` endpoint) or delete (requiring a two-step confirmation with a delete token). The code uses Ruby’s `json`, `time`, and `highline` gems, plus `curl` to interact with GitHub’s API v2 JSON.

Jan 4, 2011
Loading thumbnail…

Different financial breakdowns of NCAA 1A Football 2003-2010. Data from the OPE Equity in Athletics Disclosure Website

This visualization tracks the financial trajectories of NCAA Division 1A football programs from 2003 to 2010, using data from the OPE Equity in Athletics Disclosure Website. It displays spending, revenue, and profit rankings for individual teams and conferences, alongside per-player expense leaders and laggards. The data is rendered as a series of animated bar charts—one for each category and year—with bars re-sorting and re-coloring over time to reveal shifts in financial dominance, such as UCLA and Ohio State swapping the top spending spot, Texas’s revenue surge in 2004, and the SEC’s consistent conference-level leadership in spending, revenue, and profit. The chart also highlights outliers like Auburn's exceptionally high expenses per player and the persistent losses of smaller programs.

Dec 24, 2010
Loading thumbnail…

Gist 737033

This example demonstrates a MapReduce aggregation over a MongoDB collection of crime records, showing the count of crimes grouped by property name. The code first seeds a `crimes` collection with sample data, then defines a `map` function that emits each property name with a value of 1, and a `reduce` function that sums the emitted values. The MapReduce operation runs via `db.crimes.mapReduce()` and outputs the results as a JSON array using `printjson`. It uses MongoDB’s JavaScript shell API for data insertion, mapping, reduction, and result retrieval.

Dec 11, 2010
Loading thumbnail…

All the parts we use to convert dates on the page to local times

This example shows a set of JavaScript functions that convert date and time displays on a webpage into a user’s local timezone, and also classifies the age of each timestamp relative to the current moment. The code uses the jQuery library to select and modify DOM elements, calling methods like `$.parseUTCDate` and `$.edate.timeAgoInWords` to handle date parsing and formatting. It assigns CSS classes such as `age-new` or `age-fresh` based on the computed time difference, and updates the text content of each timestamp span accordingly. The data source is the timestamp text within the page’s HTML elements, processed entirely client-side.

Nov 29, 2010
Loading thumbnail…

Buying a domain name from a squatter

This example visualizes the process of purchasing a domain name from a squatter, narrating the sequence from initial bid through payment, account creation, and eventual transfer to a registrar. The visualization uses a node-link diagram built with d3.js and its force-directed layout to map each step as a node, with edges representing the flow of actions and communications. The data comes from a textual transcript of the author’s experience, which is parsed to construct the graph, with node colors distinguishing between user actions, third-party services, and system interactions. The code relies on D3’s `forceSimulation` for layout and custom SVG rendering for the final presentation.

Nov 7, 2010
Loading thumbnail…

Gist 597373

This example shows a Node.js script that attempts to process crime incident data from a CSV file using the `ecsv` library, but it fails due to a system resource limit. The code calls `exec('wc -c "foo"', ...)` inside the `ecsv.each` callback for every row, spawning a new child process for each record. The visible stack trace from `child_process.spawn` reveals the error "Too many open files," indicating the script exhausts file descriptors because it launches processes asynchronously without waiting for completion. The gist demonstrates a common anti-pattern where unthrottled asynchronous process spawning overwhelms the operating system, using only Node.js core APIs (`child_process.exec`, `fs`) and the third-party `ecsv` parser.

Sep 25, 2010
Loading thumbnail…

Gist 444255

This example demonstrates a Node.js server that queries MongoDB collections and logs their contents to the console, primarily as a backend testing or debugging tool. The code uses the `mongo.Db` and `mongo.Server` APIs to connect to a local MongoDB instance on port 27017, then defines HTTP routes via a `get()` handler. For each route, it retrieves documents from specific collections—`some-collection` and `another-collection` (the latter with a limit of 10)—and prints each item using `sys.puts` and `sys.inspect`. The visualization aspect is absent; the example focuses on database interaction and response handling.

Jun 18, 2010
Loading thumbnail…

Gist 402351

This example shows an Objective-C class definition, `ITCocoaWindowAdapter`, which subclasses `NSWindow` to manage a window reference and event handling. The code declares an `OpaqueWindowPtr` structure and an `OpaqueEventHandlerRef` to track the underlying Carbon window and event handler, alongside flags for focus searching and drawing via HIView. It includes an `NSGraphicsContext` for drawing operations. The snippet relies on the AppKit and Carbon APIs, specifically `NSWindow`, `NSGraphicsContext`, and opaque pointer types, to adapt Cocoa window behavior for legacy drawing and event processing. The visualization is a static code listing without data or rendering logic.

May 15, 2010
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.

Jan 18, 2010
Loading thumbnail…

Gist 260722

This example animates the interactions between a force-directed graph's nodes and edges, using the data from a gist of MySQL terminal commands. It visualizes the network structure by simulating physical forces on the nodes and drawing connecting lines between them. The visualization relies on `d3.forceSimulation` to handle the physics and update node positions, while `d3.select` and `transition` methods are used to animate the graph elements. The code renders the nodes as circles and the edges as lines, with the simulation tick driving the continuous repositioning.

Dec 21, 2009
Loading thumbnail…

Gist 239004

This visualization demonstrates a multi-select input interface where users can add and remove tags or text values using commas or spaces as separators. The code shows how the component dynamically renders resizable text boxes and styled "bit" elements within a list, with keyboard navigation and delete/backspace handling for managing selections. Built on the Prototype.js and Script.aculo.us libraries, it uses classes like `TextboxList` and `ResizableTextbox` to manage input focus, resize behavior, and form value updates based on the current set of selected items.

Nov 19, 2009
Loading thumbnail…

Gist 233265

This example demonstrates a code diff that modifies Facebook's autocomplete textbox to support spaces in addition to commas as separators. The patch updates the `facebooklist.js` module, specifically altering how `KEY_COMMA` and `KEY_SPACE` constants are defined and used within the `Event` object, and refactors separator-handling logic in the `TextboxList` and `FacebookList` classes to use object properties (`code` and `value`) instead of hardcoded characters. The rendering approach is a standard GitHub-style diff view, and the code uses JavaScript with Prototype.js-style class definitions (`Class.create`) and event observation (`observe`).

Nov 12, 2009
Loading thumbnail…

Gist 179284

A Gist by Caged presents a bare terminal command, `file /usr/local/mysql/bin/mysql`, whose output reveals the binary is a Mach-O 64-bit executable for x86_64. The visualization consists solely of this plain-text output, with no graphical rendering. It uses no external libraries or APIs, relying instead on the raw output of the Unix `file` utility. The data source is the system’s MySQL binary, illustrating a minimalist, code-only approach to data display.

Sep 1, 2009
Loading thumbnail…

Gist 154614

This example demonstrates how to build a dynamic, animated data visualization using the Firebug debugger service. The code, written in JavaScript, initializes components through the XPCOM interface and uses the jsdIDebuggerService to interact with JavaScript execution. It processes source code by matching patterns with regular expressions to identify functions and URLs. The visualization uses an animation rendering approach, driven by the underlying Firebug runtime environment, to explore and display code structures in a dynamic way. The data source is the JavaScript files being analyzed for function names and location details.

Jul 24, 2009
Loading thumbnail…

Gist 126128

This interactive map visualizes the specific activities prohibited under Mississippi's alcohol permit laws, with each highlighted section corresponding to a clause from the state's administrative code. A sidebar displays the legal text while hovering over a region reveals the associated restriction. Built with the Leaflet and D3.js libraries, the visualization uses GeoJSON data for the state's boundaries and employs a custom tooltip system to connect the map to the PDF-derived statutory content. The interface updates dynamically as users explore different areas of the regulation.

Jun 8, 2009
Loading thumbnail…

Gist 97384

This example visualizes a force-directed network graph where nodes and links are rendered as animated dots and lines. It uses d3.forceSimulation to compute node positions and d3.line to draw the connections, with the entire scene updated on each simulation tick. The code pulls node coordinates from the simulation and redraws SVG elements, showing how real-time physics-based layout can be paired with D3’s data-binding for interactive node-link diagrams.

Apr 18, 2009
Loading thumbnail…

Gist 86435

This example demonstrates a command-line tool for capturing full-page screenshots of websites using MacRuby and WebKit. It shows a configurable web capture system that loads a URL, optionally resizes the viewport, waits for a specified delay, and saves the rendered page as a PNG. The code relies on the WebKit framework’s WebView and frame load delegation, alongside NSBitmapImageRep to rasterize the view’s content. Users specify options like width, height, output filename, and delay via Ruby’s OptionParser.

Mar 26, 2009
Loading thumbnail…

Gist 85761

This example shows an Objective-C networking client handling a login response, checking whether the received object is of type `KMLoginResponse` before casting it to access staff login details. The code defines a method `request:didReceiveResponse:` on a class inheriting from `KMRequest`, which releases the request, forwards the response to a delegate, and then verifies class membership using `isKindOfClass:`. The implementation relies on the `KMResponse` base class and delegate callbacks for asynchronous communication, though the conditional logic is flawed because it uses `isKindOfClass:` on the class object rather than the instance, preventing the cast from ever succeeding. The example originates from a gist by Caged.

Mar 25, 2009
Loading thumbnail…

Gist 75454

This example demonstrates string manipulation utilities in Objective-C, converting camelCase or mixed-case strings into either underscore-separated or dash-separated formats. The code defines an NSString category with `underscore` and `dasherize` methods, which internally call a private `normalizeWith:` method that iterates over each character, detects uppercase letters and existing delimiters, and inserts the chosen separator while preserving the original text. The implementation uses NSCharacterSet, NSMutableString, and unichar APIs to perform character-by-character processing, ultimately returning a lowercase version of the transformed string.

Mar 7, 2009
Loading thumbnail…

Gist 61766

This visualization transforms the nested validation logic of a JavaScript function into a radial tree diagram. It shows the hierarchical decision tree of password confirmation checks and user-input validations, with each branch representing a conditional alert. The code uses D3.js’s `d3.forceSimulation` to arrange nodes, likely with `d3.hierarchy` and `d3.tree` or similar layout methods, while rendering circles and links to map the flow. Data is derived directly from the gist’s source code, converting the repetitive if-else structure into a visual metaphor for form validation complexity.

Feb 11, 2009
Loading thumbnail…

Gist 57845

This example demonstrates how to access and manipulate the Xcode application’s scripting interface from Ruby. It uses the ScriptingBridge framework to connect to Xcode via its bundle identifier and create a new group object using the classForScriptingClass method. The code also patches SBElementArray to properly convert its elements to an NSArray, avoiding a known crash. The script then prints the class name of the newly created group, showing the successful instantiation of the scripting object.

Feb 4, 2009
Loading thumbnail…

Gist 48499

This example shows a Ruby on Rails functional test for a `UsersController` action that finds recently active users. The specification verifies that a request to `/users/find_recent/24` returns a JSON list of users, using RSpec's mocking and expectation framework. The code relies on the `should_receive` method to stub the `User.find_all` call with an argument of 24, and the request helper simulates an HTTP call, comparing the response body against the mocked object’s `to_json` output. The test implicitly checks the controller’s rendering behavior but does not demonstrate any data-visualization or chart-rendering logic.

Jan 18, 2009
Loading thumbnail…

Gist 34581

Darkroom is a Ruby script that captures full-page screenshots of websites. It loads a specified URL into an off-screen WebKit view, waits for the page to finish loading, and then saves the rendered content as a PNG file. The code leverages the OSX Cocoa and Webkit frameworks to create and control the browser view, and it uses `NSBitmapImageRep` to capture and encode the final image. The tool accepts command-line options to set the output filename and dimensions.

Dec 11, 2008
Loading thumbnail…

Gist 28617

This example uses a Ruby script to capture full-page screenshots of websites by automating a hidden WebView. It first loads a given URL, waits for the page to finish rendering, then saves the rendered content as a PNG file. The code leverages MacRuby’s WebKit framework, specifically `WebView` and `NSBitmapImageRep`, to render and capture the page. It supports optional width, height, delay, and output filename parameters, with a default width of 1024 pixels and a fallback to ruby-lang.org if no URL is provided.

Nov 24, 2008
Loading thumbnail…

Gist 10794

This example demonstrates a GitHub repository interaction system built with Ruby and the GNCommand event framework, showing how drag-and-drop actions on repository URLs trigger context-specific behaviors. The visualization highlights the branching logic that detects whether a dropped URL points to a repository, a tree, or a commit, with placeholder sections for handling forks, files, and users. The code uses the GNCommand API’s `:drop` event scoped to `github.com` and parses URL path components via `path.pathComponents`. While the rendering approach is not visible, the focus lies on the event-driven decision tree that maps URL structures to potential GitHub actions.

Sep 15, 2008