Hack #98. Animate Wikipedia History

Watch a full-screen timeline of how a Wikipedia page evolved.

The fundamentally fascinating thing about Wikipedia is that is can be edited by anyone. If you see a mistake, you can correct it. If you know something more about a topic, you can add it. If you think an image would be helpful as a reference, you can upload it. And, of course, if you're just a jackass who likes to destroy other people's work, you can deface it.

All of these actions are recorded, and you can roll back the clock to see what a page looked like at a specific revision. This hack takes this revision history one step further by constructing an animated timeline of the life of a Wikipedia entry, from its inception to its current state.

The Code

This user script runs on all Wikipedia history pages. It adds an "Animate changes" button to the history page that acts as the main entry point for the rest of the script. The animation itself is a series of calls to Wikipedia's revision history interface.

We create an XMLHttpRequest object to retrieve the actual revision text and associated metadata (such as the author and revision date). The script also constructs a slider (really, a styled <div> with appropriate styling and event handlers) that tracks the current status of the animation, from the first version of the page to the current revision.

Save the following user script as wikipedia-animate.user.js:

 // ==UserScript== // @name Wikipedia Animate // @namespace http://phiffer.org/greasemonkey/ ...

Get Greasemonkey Hacks now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.