August 6, 2007
In the spirit of Jennifer Tidwell's excellent Designing Interfaces book, there are a few great catalogs of data visualization emerging online.
Start with the oft-cited Periodic Table of Visualization Methods.
There's another excellent collection at Data Visualization: Modern Approaches.
If you're looking for visualization with a less practical, more web-oriented bent, a colleague recently discovered the FWA: Favourite Web Awards site. It's a huge catalog of websites that use interesting, unique designs and visualizations. That's where we found the Uniqlock "clock", and the giant rickshaw pointer.
At any rate, if you're a student of Tufte like I am, you might find it helpful to review a sample of what visualizations and techniques are possible (or even advisable) before plowing ahead on your next "Rich Internet Application".
Posted by Jeff Atwood
Well, those are weird "visualizations." I guess I'm old. After a few seconds, I figured out the Uniqlock clock and giant rickshaw pointer. But, I don't understand the Periodic Table of Visualization Methods. The use of the periodic table as a template comes with baggage. Are they saying a visualization from the "metals" column will bind tightly with one from the "halogens" column? Are there periodic trends across the groups? Along diagonals? Are the ones in the "noble gas" group somehow running around with a full set of valence electrons or some equivalent? It looks like a visualization technique solely for the purpose of being clever.
I'm fairly sure I wasted more time on that Uniqlock than I should have, either way back to development *gets lured back by purple and white flashy...flash*
"first! boya on August 8, 2007 04:30 PM" - Idiot.
There are quite a few really interesting data visualisation examples on Information Aesthetics: a href="http://infosthetics.com/"http://infosthetics.com//a (just FYI :)).
Does anyone else think that the FWA website generally speaking has a very bad interface. Yes it looks pretty but it fights the way I want to browse the web. Try opening one of the websites as a new tab. Right click doesn't work and firefox will block the sites when they popup. Not what I consider a good UI but hey. I am an engineer so what do I know about design.
I can explain the periodic table metaphor quite simply. There are two aspects:
One aspect is that related/similar types of thing are shown close together.
Another is that many software developers suffer from strange mental defects that make them incapable of comprehending the fact that metaphors are not literal descriptions. For example, while it's nice that you're a physics nerd and have never gotten laid, the metaphor does not actually require you to work out the chemical interactions between visualisation techniques - that's merely demonstrating that you don't understand the word "metaphor".
It's a little bit of a geeky mataphor, but it's not that complicated - until you try to over-analyse how every last minute detail of the "real" periodic table of the elements matches some aspect of the metaphor.
Also, many software developers are weirder than the Japanese, and that's pretty damn weird.
@Jeff "Siempre Fresh" Atwood:
Tufte is great and all, but don't forget about your boy, Ben Fry. I found his work through this blog, and he's got some pretty good stuff.
Hey, Bob, perhaps you should read this:
But, back on topic, the periodic table has big-time meaning and has all kinds of relationships among its parts. The people who made that "Periodic Table of Visualization Methods" obviously spent a good deal of time copying that metaphor (for instance, they included group shadings which are similar to some used with the chemical periodic table). The close-copying of that table carries with it implicit behavior that anyone with even a high school education should know. If those well-known relationships aren't used in their visualization, they probably should have used some other one that was less baggage-ridden. As is, all it does is confuse the message. That sort of violates the very premise of using these Visualization Methods.
Having read most of Tufte's books, I can't imagine of him approving of many - if any - of these examples. The lost-of-overlapping-colored-circles one is particularly confusing and doesn't reveal any obvious trends that couldn't be spotted reading from a table.
As an alternative for examples, you might want to consider the blog of the fine folks at Juice Analytics (http://www.juiceanalytics.com). This site's full of great resources for visualization, particularly GIS-related. Tufte's own site also has a great moderated forum (http://www.edwardtufte.com/bboard).
The periodic table is incredibly useless! If you have to resort to a table like that to try to show something, you're overthinking and most likely overcomplicating the situation.
There are quite a few really interesting data visualisation examples on Information Aesthetics: http://www.tecsible.com
Randomprocess, that one's somewhat par for the course - it sometimes seems to me that three quarters of the sites written in ASP.NET do that too :p
TheFWA's like that on account of using Flash, though :p
*wanders off to continue writing the Anti-Linkbutton Manifesto*
Like Randomprocess and Jivlain, I also wasn't much enamored with the FWA site's use of links trying to open in pop-up windows. It looks nice, but, because of it's interface, I stopped trying to view their linked web-sites after a few minutes. A counter-productive use of a visualization method.
Like Dan, I had problems with the "lots-of-overlapping-colored-circles" model. There are all kinds of design elements in there that don't have obvious meanings -- they just confuse whatever the data is trying to say. I assume there's supposed to be some kind of key explaining what these elements are, but they left it out of the web pictures.
And, one more shot at the periodic table thing: forget THE Periodic Table (capital THE, P, and T). Why would a person use a periodic table (generic, non-capital) as a graphical metaphor to visualize non-periodic data? Or, back to THE Periodic Table, that's sort of like producing a big, complex class with all kinds of fancy exposed methods and then using it to store plain, vanilla integer data that doesn't use any of those methods. Or, it could be like taking two integers, casting them both to float, dividing them, and casting them back to integer. There's no point to it, takes up space and time, and makes development and maintenance difficult. Or, how about writing a big, complex, O(1) sorting method instead of using a small, simple O(log n) method when there are only 10 pieces of data to sort? Overall, I'd say that chart, and perhaps the overlapping-circles one, too, is nothing but a good example of a Duck (p 116 of my copy of Tuft's "The Visual Display of Quantitative Information"):
"When a graphic is taken over by decorative forms or computer debris, when the data measures and structures become Design Elements, when the overall design purveys Graphical Style rather than quantitative information, then that graphic may be called a duck in honor of the duck-form store, "Big Duck.""
Thanks for this great post. It's always good to see the myriad of approaches to interface design. Especially in the area of data focused or intensive websites / applications. Great blog, keep up the good work.
Those are pretty cool, but unfortunately backwards compatibility and user familiarity are HUGE factors in web design. During a recent redesign I came up with a great layout that was easier to use, cleaner, and more professional than our outdated table-laden layout. I liked it, the team liked it, my immediate boss liked it, but the higher ups shot it down in a heartbeat because it was "too different." Even after toning it down and making it more "1999" it's still steadily rejected by many of the old employees here. New people who had never been to the old site like the new one just fine and have no trouble navigating it, but the old retainers just can't(or won't) take the time to familiarize themselves with something new. I seem to remember you referring to the "Dark Altar of Backwards-Compatibility" in a previous post. I love that term and have actually quoted it a few times in conversation.
I'm sure as time goes on it will become easier to implement new and radical designs across the internet. Right now the issue is with those who find computers in general to be non-intuitive, mostly the people who grew up without even dreaming about computers. For someone like me, who grew up with computers, coming across a new design is fun and refreshing. To someone who used a computer for the first time at age 30, a new design is scary and unknown.
Regardless of whether a UI for a data visualization is familiar, or a metaphor in it is appropriate, a data visualization is meant to let people see and think about data in a new way; to reach realizations they haven't before, or maybe couldn't otherwise.
Using the Periodic Table layout to show visualization techniques was done tongue-in-cheek, I think, but it's understandable that some people would bristle at it.
You're a bit inaccurate. Yes the displays are larger, but the resolution may still be low. What you're talking about is a /high resolution/ paradox. I know plenty of people, including myself who use large displays, but keep the resolution low enough to see the pixels. It just makes it feel more natural to me because I grew up with computers that usually didn't go over 800x600. High res desktops feel fake IMO
I think it's funny that in the periodic table of visualization elements the periodic table was omitted as a type of visualization.
I was hoping to find a recursive/self referential visualization...
"I'm sure as time goes on it will become easier to implement new and radical designs across the internet."
I'm pretty sure that won't ever be the case. What reason do we have to believe that people in the future will be more "flexible"? You yourself said that "...old retainers just can't(or won't) take the time to familiarize themselves with something new."
I think it will be HARDER to implement new designs across the Internet as time goes on because more people will be familiar with "how things work." This is an age old problem that pre-dates computing. Perhaps it is even in our biology:
Shaun: Great idea, what a missed opportunity. I love self-referential graphics. This one's a beaut: http://mahalie.com/notebook/2006/01/03/self-referential-sign/
Chad: Spot on, as they say - technology changes, people don't.
All: Some great links here and agreed that most examples are modes and means so convoluted as to outshine and obfuscate the data they're attempting to reveal. They're still pretty cool to look at though. The comment links have been great. I adore Infosthetics especially, and a little OT, anyone know of a service or way to subscribe to an old blog and offset it by a timeframe? For example, since the Infosthetics site is not so active anymore and I can't read it all right now, I'd love to subscribe, say, to 2005 and have things pop in as though it were 2005 instead of 2007. Did that make sense?
I was going to link to a counterclockwise web-clock in support of Chad's post but, strangely, I couldn't find one.
I can't really comment as the computers at my work won't display flash videos over version 7. Funnily, when looking at a flash version test (http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15507sliceId=1) it displays 126.96.36.199 ...
But to come to my point. The sites pictured here live by their design, but too many sites nowadays depend upon flash for navigation. The other day, I had to give an address change in a flash form. The site was https, but I don't know whether that goes for the flash data as well...
The key insight of the periodic table of elements was that given the right choice to order the elements (i.e. atomic number), various properties of the elements will repeat at regular intervals. In other words, there is an ordering from left to right across the table as well as from top to bottom. Any visualization technique that attempts to draw an analogy to the periodic table of elements is only truly doing so if the individual items are ordered in both dimensions. Otherwise, it is just a bunch of items in categories that may as well be itemized as a list.