Sketching in code — Twitter, Processing, dataviz

Sketch­ing is the defin­ing activ­i­ty of design writes Bux­ton and I tend to agree. The genius of his book is that he shows sketch­ing can take on many forms. It is not lim­it­ed to work­ing with pen­cils and paper. You can sketch in 3D using wood or clay. You can sketch in time using video, etc. Bux­ton does not include many exam­ples of sketch­ing in code, though.1 Pro­gram­ming in any lan­guage tends to be a hard earned skill, he writes, and once you have achieved suf­fi­cient mas­tery in it, you tend to try and solve all prob­lems with this one tool. Good design­ers can draw on a broad range of sketch­ing tech­niques and pick the right one for a giv­en sit­u­a­tion. This might include pro­gram­ming, but then it would need to con­form to Buxton’s defin­ing char­ac­ter­is­tics of sketch­ing: quick, inex­pen­sive, dis­pos­able, plen­ti­ful, offer min­i­mal detail, and sug­gest and explore rather than con­firm.

I have been spend­ing some time broad­en­ing my sketch­ing reper­toire as a design­er. Before I start­ed inter­ac­tion design I was most­ly into visu­al arts (draw­ing, paint­ing, comics) so I am quite com­fort­able sketch­ing in 2D, using sto­ry­boards, etc.2 Sketch­ing in code though, has always been a weak spot. I have start­ed to rem­e­dy this by look­ing into Pro­cess­ing.

As an exer­cise I took some data from Twit­ter — one data set was the 20 most recent tweets and the oth­er my friends list — and decid­ed to see how quick I could cre­ate a few dif­fer­ent visu­al­iza­tions of that data. The end results were:

Today's start - timeline

one: a time­line that spa­tial­ly plots the lat­est tweets from my friends — show­ing den­si­ty at cer­tain points in time; or how ‘noisy’ it is on my Twit­ter stream,

Neatly centred now

two: an order­ing of friends based on the per­cent­age of their tweets that take up my time­line — who’s the loud­est of my friends?,

Bugfix – made a mistake in the tick mark labels

three: a graph of my friends list, with num­ber of friends and fol­low­ers on the axes and their total num­ber of tweets mapped to the size of each point.

The aim was not to come up with ground­break­ing solu­tions, or fin­ished appli­ca­tions.3 The goal was to exer­cise this idea of sketch­ing in code and use it to get a feel for a ‘com­plex’ data set, iter­at­ing on many dif­fer­ent ways to show the data before com­mit­ting to one solu­tion. In a real-world project I could see myself as a design­er do this and then col­lab­o­rate with a ‘prop­er’ pro­gram­mer to devel­op the final solu­tion (which would most like­ly be inter­ac­tive). I would choose dif­fer­ent sketch­ing tech­niques to design the inter­ac­tive aspects of a data-visu­al­iza­tion. For now I am con­tent with Pro­cess­ing sketch­es that sim­ply out­put a sta­t­ic image.

Tools & resources used were:

If as a design­er you are con­front­ed with a project that involves mak­ing a large amount of data under­stand­able, sketch­ing in code can help. You can use it to ‘talk’ to the data, and get a sense of its ‘shape’.

  1. There is one involv­ing Phid­gets and Max/MSP, a visu­al pro­gram­ming solu­tion for phys­i­cal com­put­ing. []
  2. Some exam­ples include a mul­ti-touch project I did for InUse and a recent pre­sen­ta­tion at TWAB 2008. []
  3. I don’t think any of these visu­al­iza­tions are very pro­found, they’re inter­est­ing at best. []

Published by

Kars Alfrink

Kars is a designer, researcher and educator focused on emerging technologies, social progress and the built environment.

10 thoughts on “Sketching in code — Twitter, Processing, dataviz”

  1. As said before: I still hope you make this into a app I can use to plot my own friends (includ­ing a mouse-over func­tion­al­i­ty to browse the friends).

    I think it will be pop­u­lar in the twit­ter com­mu­ni­ty too!

  2. Per­haps I’ll try to make it so you can use it your­self Iskan­der, but there are some snags (par­tic­u­lar­ly in the pre­pro­cess­ing depart­ment — Twit­ter does not like me hit­ting the API repeat­ed­ly for each friend).

    I agree some inter­face addi­tions to fig­ure out which dot is which friend would be nice too. I have some ideas, so per­haps I’ll include that when I have time.

  3. Good post kars. A few months ago I was at HKU dis­cussing the rede­f­i­n­i­tion of their ID cur­ricu­lum and I was flab­ber­gast­ed about the way ‘design’, ‘pro­gram­ming’ and ‘vor­mgev­ing’ were dis­cussed, and placed in abstract squares. I was think­ing of our ses­sions at ICAT, build­ing the search engine, and tried to explain what I was about, but there was no response..

  4. Thanks Joost. I too still have fond mem­o­ries of our work in Cos­ta Rica. Per­haps I’ve missed my call­ing as web hack­er? ;-) In any case, I am con­vinced that ‘prop­er’ inter­ac­tion design can only be prac­ticed by those with at least some pro­gram­ming skills. The prob­lem used to be with tools, but that is no longer the case — Pro­cess­ing, Arduino and relat­ed projects make it all very acces­si­ble, even for ‘visu­al thinkers’ such as myself. I wish I had access to ’em when I was in school.

Comments are closed.