Data Visualisation Week 1: Surveying the Terrain

Our introduction to data visualisation mapped out the terrain we will be covering on the course. In one corner are design frameworks and theoretical models attempting to define the contours of this nascent discipline and situate data design within a theoretical context. These include Munzner’s Visualization Analysis and Design Framework and Fry’s Data Visualization Workflow Model.

Munzner is a leading academic in data visualisation whose What, Why, How model is elaborated in a key text Visualization Analysis and Design and she gave a research seminar at City’s giCentre this week.

Ben Fry’s workflow model from his book Visualizing Data is a more process oriented model covering 7 steps to create a data visualisation:

  1. Acquire
  2. Parse
  3. Filter
  4. Mine
  5. Represent
  6. Refine
  7. Interact

In the other corner are the more practical tools and skills needed to represent data visually. In this course we are using Processing, a Java based dialect created by Ben Fry and Casey Reas in 2001 for software based visual art and design that is now also being used by data scientists. There is also a range of Processing tutorials, examples and books to explore for tips and ideas.

Processing is based on the concept of a digital sketchbook that realises ideas as visual imagery through the medium of code. The Hello World! Processing documentary by Ultra Lab explores this relationship between code and creativity:

Over the next ten weeks we will be learning how to use these frameworks to guide our data visualisation design and develop practical skills in creating Processing sketches to realise them.

At this stage it’s easy to be daunted by the gap between my skill set and some of the fantastic examples we’ve already looked at. I don’t feel particularly creative or like a coder at the moment. Such is the challenge and nerves that accompany any learning journey if it’s going to be fulfilling!

Hands On with Processing

Processing is very easy to download and install and we had soon created our first sketch: a simple program to alter the fill and border of an ellipse based on the mouse position on the screen. We took skeleton code provided by our tutor and adapted it to create different visual effects using transparency, fill and stroke. I have learnt java before but it was some time ago now so I definitely felt very rusty getting back into its syntax and style. Processing even works on my ancient laptop though so I’ll be able to use my own workspace rather than a lab machine in future sessions which will help with being able to take things from the lab to practice again later.


I use CodeBox to store code snippets and reference examples so I can build up a library of useful ideas and can cite code that I reuse or adapt. So another practical task was to create a Data Visualisation folder in my code library along with a smart group for snippets tagged with Processing. One of the reasons I like CodeBox is it allows multiple assets for a library item so I can put in the reference example and then add different versions as I adapt the code whilst crediting the original source. Unfortunately CodeBox doesn’t support Processing syntax highlighting so my snippets are stored as java for now.

Week 1 Gist on Github
DataViz Github Repository

Featured Visualisation Image Credit:
The Data Centric Universe by Jan Willem Tulp.
Source: (CC BY-NC-SA 3.0)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s