- monthly subscription or
- one time payment
- cancelable any time
"Tell the chef, the beer is on me."
We're publishing a new Strata Gem each day all the way through to December 24. Yesterday's Gem: Use Wikipedia as training data.
For many of us, collecting a data set is the easy bit, but turning data into a picture that tells a story is the hard part. We're frustrated at using the tired vocabulary of Excel-generated charts, but aren't sure where to go next. Like computer hardware, creating something graphical is a bit of a mystery - but needlessly so.
Take a little bit of time to get started with Processing, and you'll find creating interactive and interesting graphics to be fun, and not at all as hard as it seems. Processing has been around for almost ten years: originally motivated with the goal of aim promoting software literacy within the visual arts, it serves just as well to promote visual literacy among those who are comfortable with computing.
To get a feel for the capabilities of Processing, take a look at a couple of examples from the Processing Exhibition. Stephan Thiel's Understanding Shakespeare creates high level overviews of the text of Shakespeare plays, giving a feel for the form of the speeches and characters.
Just Landed, created by Strata speaker Jer Thorp, turns "just landed" tweets from airplane travelers into a 3D visualization of air travel. It's a great showcase for the capabilities of Processing, incorporating external data sources, 3D rendering, and exporting to video.
Just Landed - 36 Hours from blprnt on Vimeo.
There's a pretty straightforward way to get started with Processing, by using its JavaScript-based cousin, Processing.js. Whereas Processing is Java-based, Processing.js uses the features of HTML5 to make it possible to use Processing in modern web browsers. Getting up and running takes seconds: download the Processing.js archive and unpack it on a web server (Mac users can use the "Sites" folder on their computer and enable web sharing).
Take a look at the example.html
file in the archive, and you'll see it simply sets up a canvas to draw on, and includes the actual Processing.js code from example.pjs
. Replace the code in example.pjs
with that shown below (taken from the Getting Started With Processing book).
void setup() {
size(250, 250);
}
void draw() {
if (mousePressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
The code needs little explanation - the draw
function controls what appears on the screen. It draws a circle underneath the mouse cursor, in either black or white depending on whether the mouse button is pressed or not. Give it a whirl!
In case you don't want to put files on a web server, there's an even easier way to experiment - the Processing.js IDE web page lets you paste code into the page and run it directly.
A run of the example code
So how do you connect Processing.js up to your data? A simple way is to directly generate the Processing.js "sketch" (.pjs
) files from your data. For more interactivity, you can take advantage of the fact that Processing.js lets you mix Processing and JavaScript code, and fetch data dynamically from the web.
If you're using the Processing language proper, you can either read data from files directly, or use the Network library offers features to connect to remote servers.
"Beautiful Visualization" releases in print next week. In putting together the book, Julie Steele and Noah Iliinsky asked a range of visualization experts like Nick Bilton, Fernanda Viega and Martin Wattenberg, as well as enthusiasts (like me), to critique a visualization they'd created.
My chapter, which was inspired by Chris Wilson's article The Senate Social Network, uses graph visualization and data from govtrack.us to show how voting patterns in the U.S. Senate have evolved since 1991. For example, one of the most stark revelations in the visualization is the way that cross-party voting (as Wilson defined it, which was when two Senators voted together across a session over 65% of the time) completely disappears during the 104th session (the period of the so called "Republican Revolution").
While this isn't exactly unexpected, it was fascinating to see how clearly these events are reflected in the visualization. The structure of the graph went from a fairly oblong shape with many cross connections between parties to two completely separate, tight party clusters. This Ignite presentation describes the key findings in more detail:
In revisiting the visualization for the book, I found a number of areas for improvement, such as:
So, this post presents a Processing visualization that addresses many of these deficiencies:
While this revised visualization shows the same information as the original static version, the addition of interactivity and animated transitions makes this a much more engaging way to explore the senatorial voting patterns.
(Note: You must click your mouse somewhere inside the Applet area in order for this to work. Then use the right and left arrow keys to move between sessions.)
"Tell the chef, the beer is on me."
"Basically the price of a night on the town!"
"I'd love to help kickstart continued development! And 0 EUR/month really does make fiscal sense too... maybe I'll even get a shirt?" (there will be limited edition shirts for two and other goodies for each supporter as soon as we sold the 200)