Strata Gems: Write your own visualizations

Strata Gems: Write your own visualizations

The Processing language is an easy way to get started with graphics

by Edd Dumbill | @edd | +Edd Dumbill | Comment | 3 December 2010

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.

Processing.js screenshot
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.