Data Visualization for Web Designers

Data Visualization
for Web Designers
You Already Know How to do This!

Tom Carden, tom@bloom.io
Web 2.0 Expo, March 29th 2011

Tuesday, March 29, 2011

Hey. If you can read this then I need to switch monitors. Stand by.

Now: http://bloom.io
Previously: http://stamen.com


I'm Tom from Bloom (dot io). Before that I worked at Stamen Design.

A Motivational Talk!


This is (hopefully) a motivational talk. This might backﬁre on me :)

My theory is that the skills that are currently unique to data visualization people will
eventually become “just” web design.

Not that there won’t be specialists, but that the boundaries will blur and graphical
representations of data will become (are) commonplace on everyday web pages.

Not a Portfolio Talk...
... but if it was ...


(A confession: the truth is I’m afraid of teaching code in 30 minutes)

So I usually give portfolio talks, sprinkled with a bit of manifesto.

This isn’t one of those talks. But brieﬂy, they go like this:

MSNBC Hurricane Maps
http://hurricanetracker.msnbc.com/


At Stamen I worked on the Hurricane Tracker for MSNBC

Things we're proud of:
- brushing/linking
- animation
- texture/transparency
- hacking the basemap
- up-to-dateness (manifesto)
- updated thanks to DHS
- illustrates present, past and future


This is the initial view, showing Hurricane Earl from September last year.

Each dot along the path represents a known historical position, or a forecast position. The
white icon represents the current position.


Mousing around you see more info. Pretty standard map stuff these days. But you also get
highlights in the chart for the corresponding time.


Clicking the chart or a map point moves the map.


Zooming in you can get more of a sense of the areas covered. This is where a Google or Bing
maps type experience really helps.


Trying to show the previous, current and forecast positions at the same time was tricky. We
went with texture to differentiate but still relied on rollovers to be sure.


This one is Igor. (Clearly) these maps treat the forecast as data that can constantly vary.

Oakland Crimespotting
http://oakland.crimespotting.org/


One of the studio’s self-initiated projects, Oakland Crimespotting, is quite popular.

Things we're proud of:
- scraping / "freeing"
- spotlighting
- show everything (manifesto)
- pie of time
- range slider (manifesto)
- permalinks (manifesto)
- special base map
- SF blessing
- hyperlinky labels

SFMOMA ArtScope
http://www.sfmoma.org/projects/artscope/


We also worked with SFMOMA on a piece called ArtScope which is still live on their site.

Thing's we're proud of:
- show everything (manifesto)
-- images easily the most important part of the collection
- search
- serendipity
- immersive
- little ﬂourishes like the zooming behavior
- exposing collection patterns
-- e.g. architectural drawings

all at Stamen,
with Modest Maps,
as webby as we could


So that's the kind of work I do (all with my former colleagues at Stamen design). All were built
with Modest Maps. All were built in Flash, but it wouldn't necessarily be that way today.

Elsewhere


They aren't the only ones doing this kind of work (any more). The New York times has a
world-class team building things like this. The Washingon Post, Guardian and others do too.

When I moved to San Francisco in 2006, Stamen was practically the only agency available for
this kind of work. There were individuals, and there were bigger agencies which occasionally
produced similar types of stuff, but Stamen were the only prominent specialists.

I think we’ll eventually see these skills become a part of web design, and design in general.

Agency Explosion!
http://qr.ae/npjy


Agencies like Fathom, JESS3, (etc) are offering these services now too.

http://www.quora.com/Who-are-leading-data-visualization-companies-in-addition-to-
Stamen-Design

30+ agencies listed so far “in addition to Stamen Design” - a huge validation for my former
colleagues; never a bad thing to have competition!

Blog Explosion!


There are also tons of blogs in this space, but a few stand out as really capturing the breadth
and depth of the work that’s out there...


Andrew Vande Moere’s http://infosthetics.com

(apologies for the second article - it’s hard to be a fan and a critic!)


http://visualcomplexity.com

Manuel Lima gets a bit more theoretical/taxonomical with his collection. Has a book coming
soon.


Nathan Yau at http://ﬂowingdata.com, also has a forthcoming book


http://datavisualization.ch

Benjamin also curates the visualization part of the Flipboard app.

(note the cameo from Gapminder/Hans Rosling too)

NYTimes Interactive


And no talk about dataviz would be complete without a mention of the NYTimes Interactive
group - in a class of their own?


http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110-netﬂix-map.html


http://www.nytimes.com/interactive/2008/02/23/movies/
20080223_REVENUE_GRAPHIC.html

The Streamgraph here, by Lee Byron (now at Facebook) is a great example of a kind of data
visualization that at ﬁrst glance appears to be overly-aesthetic. But there are trade-offs with
all data viz formats and this one chooses to emphasise smoothness over absolute readability.
A conventional stacked graph might be clearer but it would be at the expense of data density
and also result in much steeper lines that would be harder to read.

Byron’s paper with Martin Wattenberg is well worth a look: http://www.leebyron.com/else/
streamgraph/


http://projects.nytimes.com/census/2010/explorer

(note this one was somewhat controversial because although dot maps are stunning and
effective they are also hard to do correctly in less-densely populated areas - caveat dotter!)

Art Appreciation Class
http://gapminder.org/world


[ Should be around 10 minutes :) ]

The next part of this talk (the not-a-portfolio part) is something new I’m trying.

I'm going to do a kind of art appreciation session. I want to talk about Gapminder. It's not
new and I didn't make it, but I’m a fan. I hope that's OK.

I think that some of the things that make work impressive to designers or developers don’t
always come across to the general public. But if you show somebody something you think it
great, they almost always get it.

demo
wish me luck or it will be a very short talk


http://gapminder.org/world - not a big demo, just a quick overview of what it is and a run
through of an animation (the assumption is everyone has seen the TED talk or can watch it
later)


You probably know the work from Hans Rosling’s talks. If you haven’t seen them, be sure to
watch them later. Especially the sword swallowing one!

He doesn’t seem to use the web version of the software but most of the same features are
available online.

http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html


Here he is reprising the talk for the BBC’s Joy of Stats: http://www.youtube.com/watch?
v=jbkSRLYSojo

"This is unquestionably
the greatest example of
how to make raw data sexy
that I've ever seen"
mjvbulldogboy


Here he is reprising the talk for the BBC’s Joy of Stats: http://www.youtube.com/watch?
v=jbkSRLYSojo


It’s recently spawned a fun imitation by Yves Quemener who does the augmented reality part
for real:

http://www.kinecthacks.com/interactive-data-module-with-the-kinect/


And as further evidence of how inﬂuential the work is, a tribute by another dataviz
practitioner Moritz Stefaner covered at datavisualization.ch yesterday.


Here’s the site. Really iconic stuff, this. That year back there, so obvious you don’t notice it!

Google bought the Trendalyzer tool (but not Hans) and made it available in Google
Spreadsheets and the visualization API. Others have cloned it, but not always successfully.
[Note: the open/public data scene around this is way too big to do justice to here, so I’ll try to
concentrate on the UI & design aspects of the work.]

It's hugely entertaining and informative to see Hans Rosling explain history using the tool. At
ﬁrst this made me think Gapminder needed Hans to work successfully (just like Minard's
famous map might need Edward Tufte's explanation to work successfully too).


There's a PDF linked from the side of the tool. If you've got a laptop open feel free to grab it.
Look at all those tool tips! Because there’s a lot going on.

I used to think that Gapminder was about showing and telling but not about exploring and
ﬁnding things out for yourself. I was wrong! I recently re-acquainted myself with it and found
a wealth of subtle details that make it successful, accessible and robust information
visualization tool (fun for one or more players - age 5 and up!) No wonder Google bought it!

http://www.gapminder.org/GapminderMedia/wp-uploads/tutorial/
Gapminder_World_Guide.pdf

Five Variables!

• Size: population (selectable)
• X-axis: GDP (selectable)
• Y-axis: life expectancy (selectable)
• Color: regions (selectable , does ranges)
• Time: the magic happens here!


I don’t usually do bullet points, but this is practically a spec for your next visualization project
so bear with me...

Five Great Features!
• Play/Stop: a slider is an animation!
• Speed (don’t get lost/bored)
• Sources: credits, methodology and data
sheets (Google Spreadsheets)

• Share: make a shortlink (e.g. for Twitter)
• Full screen: very help l today

play/stop
speed control
source links
share with a shortlink
full screen

*More* User Control!
• Opacity: when highlighting speci c
countries

• Zoom tool: Google Maps style mini-map
• Trails: watch selected countries move
• Bubble size: nely tuned, but adjustable
• Lin/Log scale: make the long tail legible

opacity
zoom controls
trails!
bubble size
lin/log scale: proper stats.


Here’s the path of the US from 1800 to 2009. Note that every country ends up with a higher
life expectancy than the US had back then.

Some people doubt how meaningful the GDP stuff is but who would argue with longer lives?

There’s More!

• Full “brushing and linking” with mouse:
• e.g. mini region map: highlight regions
• e.g. checkbox list: highlight countries
• Interpolation (not extrapolation)
• interpolated data is marked


brushing and linking is the academic term for highlighting subsets of things and syncing the
highlights across different views

the interpolation is careful and considered, and marked in the charts

there isn’t extrapolation - a careful detail. It’s OK to guess what happened between 1920 and
1930 but it’s harder to ﬁgure out what happened in 1910 if you only have later data.

There’s More!
• this is a big “join” across data sets
• URL updates with interaction
• axes animate when zooming
• axes have good choice of labels
• researched groups across political
changes (e.g. former Yugoslavia)


The “join” isn’t trivial but you can put everything in one table for the Google Visualization API
version of Gapminder.

URLs update - e.g. swfaddress, really simple history, html5 pushState

recent papers on axis labeling
-- e.g. http://www.justintalbot.com/research/axis-labeling/

there’s a Gapminder paper on research methods that’s worth reading too: http://
www.gapminder.org/documentation/documentation/gapdoc003.pdf

And!
• There’s a map I don’t have time to talk
about in depth

• And apart om Hans’ talks, there’s a
video walk-through. Phew!

• This is hard to do right at all, let alone in
one screen...


There’s a whole map tab I haven’t covered yet.

And a video walkthrough.

How does it all work...?

How to get there om here?


[ 20 mins?! ]

So this is where the bar is set in 2011. [Set by The New York Times, Stamen, Google Maps
and Trendalyzer, among many others].

It's hard to recreate all this in other tools, even excellent ones like Tableau or R:
http://www.thedatastudio.co.uk/blog/the-data-studio-blog/andy-cotgreave/joy-of-six-
gapminder

How do you get there online?


So how would you make this? What do these features look like in HTML?

[assuming you’re convinced you want these things in HTML]

Let’s deconstruct the UI side of things a little bit...


This is going to be a bit Monty Python “what did the Romans ever do for us”, but I’ll
continue...

6 dropdown select boxes


200 checkboxes with labels, in a scrolling list
+ 2 other checkboxes


2 tabs


4 buttons


4 sliders


4 x 2 hyperlinks


So those are all the things you already know how to do!

Dropdowns, checkboxes, labels, scrolling lists, tabs, buttons, sliders, hyperlinks.

The map can be done with an image map (remember those?) which only leaves the chart,
scales and the little circle slider graphic.

Back a bit!
Did he just say “sliders are easy”?


Yes. These are the things other programmers wish were as easy as they are in HTML.


Here’s the relevant section from Mark Pilgrim’s excellent online book “Dive Into HTML5”:
http://diveintohtml5.org/forms.html#type-range

You want <input type=”range”> and there are libraries to make this work everywhere. Search
for “unobtrusive polyﬁll” of course :)

e.g. http://www.frequency-decoder.com/2010/11/18/unobtrusive-slider-control-html5-
input-range-polyﬁll


And then there’s always a library like jQuery UI, or YUI, or Dojo, or Qooxdoo, or UKI.

I'm not that big on frameworks, so I’m biased towards minimally invasive helper libraries like
jQuery over weightier options like Cappuccino or Sproutcore, but those are very powerful for
the right task.


And whether you like Cappuccino or not, 280 North's CC-licensed contribution of their
“Aristo” UI design is huge: https://github.com/280north/aristo - here it is being adapted for
jQuery UI, much more stylish than the defaults and clearer too.


So we’re back to just the chart/scales and map. Not trivial by any means, but much easier to
imagine -

The little map is baked into the Flash - practically the only hard-coded thing in gapminder -
but it could be re-done with an HTML image map (remember those?)

Let’s assume for a moment that you can draw circles. The only tricky things remaining are
the scales...


Research by Justin Talbot to improve “nice” axis labeling algorithms:
http://www.justintalbot.com/research/axis-labeling/

Don’t underestimate academia for solving real problems with visualization design. Two good
lists of papers:
http://fellinlovewithdata.com/guides/7-classic-foundational-vis-papers
http://visualizeit.wordpress.com/2009/06/05/seminal-information-visualization-papers/

This kind of work is built into libraries like Protovis. (The nice thing about Protovis’ scale
objects is that they are helper functions for scaling from data domain to screen pixel
dimensions too.)

So how do you draw the chart? One more step ﬁrst - I’ve overlooked data!

Data comes om URLs
• GDP per capita:
http://spreadsheets.google.com/pub?
key=phAwcNAVuyj1jiMAkmq1iMg

• Life expectancy at birth:
key=phAwcNAVuyj2tPLxKvvnNPA


[ of course, I know data comes from research :) ]

But this is where Gapminder is linking to...

Data comes om URLs
• Population:
key=phAwcNAVuyj0XOoBL_n5tAQ

• Regions:
key=0AiggpTwMDcgocGhUNG13anZFdUdC
dGRmMVplTzdfUFE&gid=1


... and if you make visualizations, your stuff should link to the data too.

for CSV om published
Google Spreadsheets, append
&output=csv to the URL


Now everyone can contribute to your mashup...

... so long as you can proxy and parse CSV :)

loading data is as easy as
$.get('mydata.csv',
nction(csv) { ... }


... parsing is a bit
trickier


And this is where my motivational talk might fall a bit short...


... except that github is marvellous!

I made a start at sketching all this out here:
http://randometc.github.com/mind-gapper-js/

Code here:
https://github.com/RandomEtc/mind-gapper-js

Confession: like all good programmers I have a strong blend of laziness, impatience and
hubris. I looked at Gapminder and thought "I can write that in a day". I was wrong and it was
a bit too ambitious for today’s talk!

But...
<canvas> code is ugly!
SVG is hard!


[ 30 mins! ]

Actually I don’t believe this, but many people disagree with me.

Excanvas and SVGWeb for IE/Flash can both help compatibility without resorting to new APIs,
but some people choose to write libraries for cross-platform support anyway, and they’re
quite useful:


http://processingjs.org


http://raphaeljs.org


http://protovis.org

[NB:- I hear that people are adapting protovis to VML or using SVGWeb for IE compatibility,
that’s great!]


http://mbostock.github.com/d3

promising adaptation of the best of protovis and the best of jquery, but requires more
hands-on knowledge of HTML/SVG/etc than other vis frameworks.


http://ocanvas.org/


http://easeljs.com/

Thanks
and hope lly lots of time for questions!


Find me online http://twitter.com/databloom or http://bloom.io

Data Visualization for Web Designers

Recommended

More Related Content

Recently uploaded (20)

Featured (20)

Data Visualization for Web Designers