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 2011Tuesday, March 29, 2011Hey. If you can read this then I need to switch monitors. Stand by.

Now: http://bloom.io Previously: http://stamen.comTuesday, March 29, 2011Im Tom from Bloom (dot io). Before that I worked at Stamen Design.

A Motivational Talk!Tuesday, March 29, 2011This 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 willeventually become “just” web design.Not that there won’t be specialists, but that the boundaries will blur and graphicalrepresentations of data will become (are) commonplace on everyday web pages.

Not a Portfolio Talk... ... but if it was ...Tuesday, March 29, 2011(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/Tuesday, March 29, 2011At Stamen I worked on the Hurricane Tracker for MSNBCThings were proud of: - brushing/linking - animation - texture/transparency - hacking the basemap - up-to-dateness (manifesto) - updated thanks to DHS - illustrates present, past and future

Tuesday, March 29, 2011This 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. Thewhite icon represents the current position.

Tuesday, March 29, 2011Mousing around you see more info. Pretty standard map stuff these days. But you also gethighlights in the chart for the corresponding time.

Tuesday, March 29, 2011Clicking the chart or a map point moves the map.

Tuesday, March 29, 2011Zooming in you can get more of a sense of the areas covered. This is where a Google or Bingmaps type experience really helps.

Tuesday, March 29, 2011Trying to show the previous, current and forecast positions at the same time was tricky. Wewent with texture to differentiate but still relied on rollovers to be sure.

Tuesday, March 29, 2011

Tuesday, March 29, 2011This one is Igor. (Clearly) these maps treat the forecast as data that can constantly vary.

Oakland Crimespotting http://oakland.crimespotting.org/Tuesday, March 29, 2011One of the studio’s self-initiated projects, Oakland Crimespotting, is quite popular.Things were 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/Tuesday, March 29, 2011We also worked with SFMOMA on a piece called ArtScope which is still live on their site.Things were 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 couldTuesday, March 29, 2011So thats the kind of work I do (all with my former colleagues at Stamen design). All were builtwith Modest Maps. All were built in Flash, but it wouldnt necessarily be that way today.

ElsewhereTuesday, March 29, 2011They arent the only ones doing this kind of work (any more). The New York times has aworld-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 forthis kind of work. There were individuals, and there were bigger agencies which occasionallyproduced 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/npjyTuesday, March 29, 2011Agencies like Fathom, JESS3, (etc) are offering these services now too.http://www.quora.com/Who-are-leading-data-visualization-companies-in-addition-to-Stamen-Design30+ agencies listed so far “in addition to Stamen Design” - a huge validation for my formercolleagues; never a bad thing to have competition!

Blog Explosion!Tuesday, March 29, 2011There are also tons of blogs in this space, but a few stand out as really capturing the breadthand depth of the work that’s out there...

Tuesday, March 29, 2011Andrew Vande Moere’s http://infosthetics.com(apologies for the second article - it’s hard to be a fan and a critic!)

Tuesday, March 29, 2011http://visualcomplexity.comManuel Lima gets a bit more theoretical/taxonomical with his collection. Has a book comingsoon.

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

Tuesday, March 29, 2011http://datavisualization.chBenjamin also curates the visualization part of the Flipboard app.(note the cameo from Gapminder/Hans Rosling too)

NYTimes InteractiveTuesday, March 29, 2011And no talk about dataviz would be complete without a mention of the NYTimes Interactivegroup - in a class of their own?

Tuesday, March 29, 2011http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110-netﬂix-map.html

Tuesday, March 29, 2011http://www.nytimes.com/interactive/2008/02/23/movies/20080223_REVENUE_GRAPHIC.htmlThe Streamgraph here, by Lee Byron (now at Facebook) is a great example of a kind of datavisualization that at ﬁrst glance appears to be overly-aesthetic. But there are trade-offs withall 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 densityand 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/

Tuesday, March 29, 2011http://projects.nytimes.com/census/2010/explorer(note this one was somewhat controversial because although dot maps are stunning andeffective they are also hard to do correctly in less-densely populated areas - caveat dotter!)

Art Appreciation Class http://gapminder.org/worldTuesday, March 29, 2011[ Should be around 10 minutes :) ]The next part of this talk (the not-a-portfolio part) is something new I’m trying.Im going to do a kind of art appreciation session. I want to talk about Gapminder. Its notnew and I didnt make it, but I’m a fan. I hope thats OK.I think that some of the things that make work impressive to designers or developers don’talways come across to the general public. But if you show somebody something you think itgreat, they almost always get it.

demo wish me luck or it will be a very short talkTuesday, March 29, 2011http://gapminder.org/world - not a big demo, just a quick overview of what it is and a runthrough of an animation (the assumption is everyone has seen the TED talk or can watch itlater)

Tuesday, March 29, 2011You probably know the work from Hans Rosling’s talks. If you haven’t seen them, be sure towatch 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 areavailable online.http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html

Tuesday, March 29, 2011Here 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 Ive ever seen" mjvbulldogboyTuesday, March 29, 2011Here he is reprising the talk for the BBC’s Joy of Stats: http://www.youtube.com/watch?v=jbkSRLYSojo

Tuesday, March 29, 2011It’s recently spawned a fun imitation by Yves Quemener who does the augmented reality partfor real:http://www.kinecthacks.com/interactive-data-module-with-the-kinect/

Tuesday, March 29, 2011And as further evidence of how inﬂuential the work is, a tribute by another datavizpractitioner Moritz Stefaner covered at datavisualization.ch yesterday.

Tuesday, March 29, 2011Here’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 GoogleSpreadsheets 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 toconcentrate on the UI & design aspects of the work.]Its 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 Minardsfamous map might need Edward Tuftes explanation to work successfully too).

Tuesday, March 29, 2011Theres a PDF linked from the side of the tool. If youve 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 founda wealth of subtle details that make it successful, accessible and robust informationvisualization 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!Tuesday, March 29, 2011I don’t usually do bullet points, but this is practically a spec for your next visualization projectso 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 todayTuesday, March 29, 2011play/stopspeed controlsource linksshare with a shortlinkfull 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 legibleTuesday, March 29, 2011opacityzoom controlstrails!bubble sizelin/log scale: proper stats.

Tuesday, March 29, 2011Here’s the path of the US from 1800 to 2009. Note that every country ends up with a higherlife 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 markedTuesday, March 29, 2011brushing and linking is the academic term for highlighting subsets of things and syncing thehighlights across different viewsthe interpolation is careful and considered, and marked in the chartsthere isn’t extrapolation - a careful detail. It’s OK to guess what happened between 1920 and1930 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)Tuesday, March 29, 2011The “join” isn’t trivial but you can put everything in one table for the Google Visualization APIversion of Gapminder.URLs update - e.g. swfaddress, really simple history, html5 pushStaterecent 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...Tuesday, March 29, 2011There’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?Tuesday, March 29, 2011[ 20 mins?! ]So this is where the bar is set in 2011. [Set by The New York Times, Stamen, Google Mapsand Trendalyzer, among many others].Its 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-gapminderHow do you get there online?

Tuesday, March 29, 2011So 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...

Tuesday, March 29, 2011This is going to be a bit Monty Python “what did the Romans ever do for us”, but I’llcontinue...6 dropdown select boxes

Tuesday, March 29, 2011200 checkboxes with labels, in a scrolling list+ 2 other checkboxes

Tuesday, March 29, 20112 tabs

Tuesday, March 29, 20114 buttons

Tuesday, March 29, 20114 sliders

Tuesday, March 29, 20114 x 2 hyperlinks

Tuesday, March 29, 2011So 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”?Tuesday, March 29, 2011Yes. These are the things other programmers wish were as easy as they are in HTML.

Tuesday, March 29, 2011Here’s the relevant section from Mark Pilgrim’s excellent online book “Dive Into HTML5”:http://diveintohtml5.org/forms.html#type-rangeYou want <input type=”range”> and there are libraries to make this work everywhere. Searchfor “unobtrusive polyﬁll” of course :)e.g. http://www.frequency-decoder.com/2010/11/18/unobtrusive-slider-control-html5-input-range-polyﬁll

Tuesday, March 29, 2011And then there’s always a library like jQuery UI, or YUI, or Dojo, or Qooxdoo, or UKI.Im not that big on frameworks, so I’m biased towards minimally invasive helper libraries likejQuery over weightier options like Cappuccino or Sproutcore, but those are very powerful forthe right task.

Tuesday, March 29, 2011And whether you like Cappuccino or not, 280 Norths CC-licensed contribution of their“Aristo” UI design is huge: https://github.com/280north/aristo - here it is being adapted forjQuery UI, much more stylish than the defaults and clearer too.

Tuesday, March 29, 2011So we’re back to just the chart/scales and map. Not trivial by any means, but much easier toimagine -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 arethe scales...

Tuesday, March 29, 2011Research 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 goodlists of papers:http://fellinlovewithdata.com/guides/7-classic-foundational-vis-papershttp://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’ scaleobjects is that they are helper functions for scaling from data domain to screen pixeldimensions 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: http://spreadsheets.google.com/pub? key=phAwcNAVuyj2tPLxKvvnNPATuesday, March 29, 2011[ of course, I know data comes from research :) ]But this is where Gapminder is linking to...

Data comes om URLs • Population: http://spreadsheets.google.com/pub? key=phAwcNAVuyj0XOoBL_n5tAQ • Regions: http://spreadsheets.google.com/pub? key=0AiggpTwMDcgocGhUNG13anZFdUdC dGRmMVplTzdfUFE&gid=1Tuesday, March 29, 2011... and if you make visualizations, your stuff should link to the data too.

for CSV om published Google Spreadsheets, append &output=csv to the URLTuesday, March 29, 2011Now 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) { ... }Tuesday, March 29, 2011

... parsing is a bit trickierTuesday, March 29, 2011And this is where my motivational talk might fall a bit short...

Tuesday, March 29, 2011... 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-jsConfession: like all good programmers I have a strong blend of laziness, impatience andhubris. I looked at Gapminder and thought "I can write that in a day". I was wrong and it wasa bit too ambitious for today’s talk!

But... <canvas> code is ugly! SVG is hard!Tuesday, March 29, 2011[ 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’requite useful:

Tuesday, March 29, 2011http://processingjs.org

Tuesday, March 29, 2011http://raphaeljs.org

Tuesday, March 29, 2011http://protovis.org[NB:- I hear that people are adapting protovis to VML or using SVGWeb for IE compatibility,that’s great!]

Tuesday, March 29, 2011http://mbostock.github.com/d3promising adaptation of the best of protovis and the best of jquery, but requires morehands-on knowledge of HTML/SVG/etc than other vis frameworks.

Tuesday, March 29, 2011http://ocanvas.org/

Tuesday, March 29, 2011http://easeljs.com/

Thanks and hope lly lots of time for questions!Tuesday, March 29, 2011Find me online http://twitter.com/databloom or http://bloom.io

http://blog.bloom.io	1845
http://www.slideshare.net	235
url_unknown	213
http://www.web2expo.com	168
http://johanharjono.com	10
https://si0.twimg.com	6
http://translate.googleusercontent.com	5
http://lanyrd.com	5
http://static.slidesharecdn.com	4
http://infiniteappetite.net	4
http://webhues.tumblr.com	3
http://d-build.org	2
http://www.engadgeted.net	2
http://webcache.googleusercontent.com	2
https://twimg0-a.akamaihd.net	1
http://ranchero.com	1
http://greg.io	1
http://www.tumblr.com	1
http://paper.li	1
http://localhost:3000	1

Data Visualization for Web Designers

by databloom on Mar 29, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

20 Embeds 2,510

Statistics

Data Visualization for Web Designers — Document Transcript