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.)
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.
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.
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.
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:
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.
A few weeks ago, we published a little app on Time.com 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.
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.
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.
At TIME, where I have been since August, we place interactives in pages using a WordPress short code that places an empty
<div>: the markup, style and 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."
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.
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?":
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.
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.
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.
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.
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:
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:
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.
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:
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.
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.
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.
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.)
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: