How to fix Dropbox conflicts automatically

June 16, 2018 |Source Code

If you use Dropbox regularly, you have probably managed to screw it up at some point by modifying a file on two machines without syncing it between edits. When this happens, Dropbox will save both versions of the file and rename one of them like so:

Graphing the Glissando in "Rhapsody in Blue"

February 28, 2018 |Source Code

George Gershwin's "Rhapsody in Blue" famously opens with a trilling clarinet that rockets up more than two octaves in what's known as a "glissando," in which an instrument's pitch bends across a span of notes in a continuous climb or descent rather than stopping at discrete frequencies. Here's an example from the Columbia Symphony Orchestra, which probably sounds familiar:

Visualizing Algae Growth

January 20, 2018 |Source Code

The subreddit /r/dataisbeautiful/ runs a monthly visualization contest based on a different dataset each time. The Jan. 2018 contest challenges designers to visualize the growth rates of 19 species of algae under 8 different combinations of light and temperature, for a total of 152 data points.

Pascal's Triangle as a Galton Box

June 4, 2017 |Source Code

There's a wonderful math toy known as a "bean machine" or "Galton board" that demonstrates normal distributions though a simple mechanism: A large number of small metal balls--or beans, if you prefer--are fed through an staggered lattice of metal pegs, which, when the ball collides with the peg, causes it to drop either to the left or the right. Here's a simple demonstration from Wikipedia.

Google Ngram Data for Every Word in the CMU Pronunciation Dictionary

April 16, 2017

Google provides fantastic data on the frequency of words and ngrams in all the books it has scanned, in many cases going back centuries. The only drawback is that these files are enormous. The unigrams alone are 4GB when compressed, not including numbers and punctuation.

Visualizing Random Walks with Canvas

August 21, 2016 |Source Code

I don't use Canvas all that often on the client since SVG-based tools--mainly D3--are better suited for editorial data visualization. But I was thinking about random walks recently, which involve drawing thousands of dots and refreshing them several times a second, and figured it would be an interesting use case for Canvas's capabilities. Here's a little line that start's out with 10,000 points and updates 10 times a second, drawing 100 new random points and shedding the oldest 100. (Green is the newest, red is the oldest.)

A metalsmith plugin to prerender mathematical equations

January 10, 2016 |Source Code

I recently used MathJax for the first time to dynamically render equations in a post using the LaTeX format. The MathJax documentation recommends loading the script that converts the LaTeX format to beautifully formated math equations asynchronously. It works great, but there's typically a lag where a user sees the raw, ugly LaTeX for about a second before it gets rendered.

A curious property of simple functions

January 6, 2016

The other day, I was thinking about how, when you first learn calculus, the way you find the derivative of a function at a certain point is to find the slope of a line that passes through two very close points.

Getting states borders from counties using TopoJSON's merge function

September 27, 2015

I use the immortal Mike Bostock's TopoJSON for every map I make at TIME. Most of the time, we're looking at geographies more granular that states--mainly counties, congressional districts and PUMAs. In these cases, we like to have state boundaries drawn over the map to help orient the viewer.

Bargaining with Stack Overflow and other stages of developer grief

February 21, 2015

A few weeks ago, we published a little app on that uses unit-level Census data to show you how many single people in your city meet your dating standards. Using about 15 million records from the IPUMS project, we asked the user for his or her preference in education, income and other demographic questions and estimated what percent of the population matched those criteria.

Rendering exported musical scores in the browser

February 21, 2015 |Source Code

The transcriptions I've posted on Mechanical Scribe were generated by a Windows-only program called Mozart. I can't stand the way the embedded PDFs look on the page, and would much prefer to render the scores directly. Fortunately, there is a fantastic, actively developing project called VexFlow that is capable of doing just this.

The Joy of Screen Scraping

January 18, 2015

I was tickled pink the other day to see that over 1,000 people have downloaded the downcache module I maintain on NPM. The way it works is simple: You request a web page, just like you would with any other HTTP module in Node, and in addition to returning the page it saves a copy of the response to your machine. If you request it again, it loads the cached version instead of making another trip to the server.

A plugin for versioned posts in Metalsmith

January 12, 2015 |Source Code

I just moved this site from Jekyll over to Metalsmith since I work primarily in Node and Javascript and don't know a lick of Ruby. Which means, sadly, think I had to leave behind Jeremy Singer-Vine's peerless Gekyll plugin for tracking versions of posts using Git.

Recreating the Atlantic's Netflix database with Node

January 8, 2014

The Atlantic published a delightful exploration last week of Netflix's surgically precise category descriptions, which include gems like "Critically-acclaimed Irreverent Crime Movies" or "Dramas starring Charlotte Rampling" (whoever she is). Because Netflix identifies the categories with integers in the URLs, Alexis Madrigal was able to scrape each one of the 76,897 unique categories names. It's data mining at its best.

Use your LESS files in Browserify with this Node module

November 22, 2013

At TIME, where I have been since August, we place interactives in pages using a WordPress short code that places an empty <div> on the page and appends a single Javascript file to the end of the document. That file is responsible for assembling the entire application inside that <div>: the markup, style and code.

We need new sentences that use every letter of the alphabet

August 9, 2013 |Source Code

I've been spending a lot of time with Google Webfonts recently, looking for a semi-coherent font ensemble for this site. By default, every font is displayed in the sentence "Grumpy wizards make toxic brew for the evil Queen and Jack."

A map of Capital Bikeshare data by time and route

August 8, 2013

Capital Bikeshare, Washington D.C.'s communal cycling service, releases huge amounts of anonymous data on every trip taken by a customer. I can't even ride a bike anymore—you do forget—but I thought the data would offer fascinating insights about D.C. transportation when threaded into station-to-station routes.'s incredible grapheme-color synesthesia test

August 2, 2013

For as long as I can remember, I have associated specific colors with every number and letter. I first encountered a description of this condition in Richard Feynman's "What Do You Care What Other People Think?":

The most popular two-letter combos in English

July 24, 2013

I was pondering how one would make a premium gibberish generator the other day, which led to a short investigation of which pairings of letters are legal in English and how common each combination is. This diagram shows a basic heat map of letter combinations, using '^' to mark the beginning of a word and '$' to mark the end. The data here is extracted from every item in the "2 of 12" list of dictionary words available on Kevin's Word List page.

Natural Jay Carney processing

July 1, 2013

Two weeks ago, my colleague Rachel Hartman and I published a story on Yahoo News with the headline "The top 9,486 ways Jay Carney won’t answer your questions." I'd like to briefly discuss how we did this.

Using D3 with native HTML: DIVs as datavis

May 20, 2013

Last week, the White House released 100 pages of printed emails documenting the intelligence community's public response to the Sept. 11, 2012 attacks on the American diplomatic compound in Libya. There are 91 unique messages in the documents and a high level of redundancy due to long reply-chains being printed multiple times.

What to do with 100 pages of emails? Make an inbox

May 17, 2013

Facing pressure from Republicans in Congress, the Obama administration released 100 pages of printed out emails in May relating to its crafting of talking points about the Sept. 11, 2012 attacks in Benghazi. The emails were literally printed and given to select reporters in white binders.

The dataviz-themed birthday cake

May 6, 2013

I was put in charge of decorating my birthday cake this year, so I attempted to combine my love for data visualization with my love for the Phillies. Here's the result:

Guessing the beat from user-entered musical intervals

May 5, 2013

As I mentioned a few days ago, I'm a big fan of Soundslice, a project by Adrian Holovaty and PJ Macklin for creating interactive guitar tabs. One of the coolest features is the ability to tap out measures on the computer keyboard as a recording of the sound you're transcribing plays, thus marking out measures to then fill in with chords.

Using a Raspberry Pi for time-lapse photography

May 5, 2013

Putting aside for a moment why a 30-year-old has an ant farm, I thought I would post the code I use to take minute-by-minute photographs of the colony as it grows:

Binify + D3 = Gorgeous honeycomb maps

May 2, 2013 |Source Code

Most Americans prefer to huddle together around urban areas, which raises all sorts of problems for map-based visualizations. Coloring regions according to a data value, known as a choropleth map, leaves the map maker beholden to arbitrary political boundaries and, at the county level, pixel-wide polygons in parts of the Northeast. Many publications prefer to place dots proportional in area to the data values over the center of each county, which inevitably produces overlapping circles in these same congested regions. Here's a particularly atrocious example of that strategy I once made at Slate:

An open-source Javascript metronome, take one

May 1, 2013 |Source Code

I've recently been playing around with Sound Slice, an ambitious new project from Django co-founder Adrian Holovaty that creates interactive guitar tabs. The site has huge potential for moving guitars beyond the domain of ASCII files and 14 variations on the same song.

How to recreate the Boston Marathon from 230,000 data points

April 7, 2013 |Source Code

In scrambling to find something to do around the bombings at the Boston Marathon, I came across a searchable database of all 26,000 participants. Fortunately, it's possible to search everyone by hitting "Enter" with no search terms.

The 2012 Republican primary as told by Wikipedia edits

April 11, 2012

Wikipedia contains all sorts of treasures in its edit histories. (The revisions for Jesus are particularly bountiful.) During the later stages of the 2012 Republican primary, I monitored the pages for the four remaining candidates and put together this feature for Yahoo News.

We need a Wikipedia for music transcriptions

December 8, 2011

Transcribing the improvised solos of the greats is a core part of jazz education, but it's rare that people share their (often hand-written) notes on, say, exactly what Clifford was doing in that second chorus of "Step Lightly." (Let me know if you need that one. I might still have it.)

What's 'Hypermedia'?

November 20, 2011

Most people refer to the sort of work you see on Mechanical Scribe as "interactive multimedia" or "interactive graphics." I've always liked the term "hypermedia" for these projects. The term was coined alongside "hypertext" in 1963 by a man named Ted Nelson, but only one would stick. "Hypertext"--literally "beyond text"--is etched in the 'H' and 'T' of HTML, but you don't often hear the second term. Nelson commented on this in his book Literary Machines: