design and code print blog print
designandcode_hd.gif Wikipedia
leftarrow.gif rightarrow.gif

During my internship at Stamen I was asked to create visualizations from Wikipedia's Recent Changes IRC channel. As each edit to Wikipedia happens, a message is sent in the IRC channel. The messages mention the title of the page in question, who edited it (username and whether or not its a person or a bot), the number of bytes changed in the edit, a link to the difference page, category if applicable and comments.

After a series of different visualizations (examples in images 3 and 4), we ended up refining this one a bit. When an edit is made, a message is sent to the chatroom. This program reads that message, prints out the full text of the title of the edit for about 3 seconds, then rolls the edit back to the first initial. You can then mouseover each initial to see the full title, who edited it and how large that edit was. if you want to play with the actual program... to avoid potentially flooding the IRC channel, I have not posted the final online.

The size of the edit also determines how large the letter is in relation to all other edits on screen. You can change the settings for this by using the scrollbar at the bottom of the screen. This means you can see edits with 0 bytes changed up to edits with 5000 bytes changed. You can also change the range of what you are viewing to see quickly what the patterns of change are in the moment you're using the program. Generally speaking most edits are under 100 bytes.

The pink text that appears shows repeated editors, people and bots who have made more than one change in the amount of time the program is running. The number of changes they've made is printed behind the username and if you mouseover the username all the titles they have edited animate towards that username. The blue text is the same thing except for articles. Text in blue shows articles edited more than once and on mouse over you can see the users that have edited this article.

The pink and blue sliders change the threshold at which the username or article appears on the screen. I've found that many articles are only edited twice by the same person so it's easier to see what articles are popular-and what articles are undergoing edit wars-by raising the threshold of the articles to 4 or 5.

In the same vein, I also created a few Processing.js programs which currently read from a static data file and I've linked them below. These programs won't work on anything but the latest browsers that support HTML 5's canvas function. Firefox 3.5.2 works best for me.

wikipedia_pjs_01.jpg wikipedia_pjs_02.jpg wikipedia_pjs_03.jpg

The first sketch takes the edits, prints the first initial and then alphabetizes them as they animate across the screen. The titles are revealed on mouseover and clicking on them takes you to the difference page on Wikipedia. The second and third sketches revert back to squares and circles denoting each edit and, while they still alphabetize via animation, are much more difficult to read. The third sketch re-randomizes the edits if you mouseover the bottom right corner... the eventual thought was that you could shake up the edits like a snowglobe and watch them reorder themselves.

© 2009 Amy Martin HOME // DESIGN AND CODE // PRINT // BLOG // THESIS Resume // // Stalk