Simian Design

Ok, two quick links today of useful pages that I ran across.

One is a LONG list of links that deal with building better forms. Web form basics, usability, accessibility, form design, form processing, validation, and generators are all covered.

The other is a useful page on 5 JavaScript Tricks Made Easy with jQuery. Swapping form fields, character countdowns in textareas, centering a div popup, collapsing table columns, and reading RSS are the tricks.

Barco is a Belgian company which specializes in designing and developing solutions for large-screen visualization.  Pruned ran across them when talking about Super-Versailles.

The bottom line is that they’ve collected a great collection of photos of GIANT huge screens.  Think NASA, control room stuff.  Like total informational overload in a room.  If I had a room like this I’d call myself Dr. No and wear white all the time.

Ok, sorry this is all in French.  But it’s fantastic. Really, if you’re familiar at all with type, you should go check this out. It’s a complete and thorough comparison of all the various Garamond typefaces.  The graphics alone spell out the differences, which are much more pronounced that I’d have initially realized.

I’ve always thought of Adobe Garamond as the “pure” Garamond, as it looked most like Garamond to me.   ITC always looked off.  Now I know why.

The Sequence of Events is an informational graphic from the New York Times.  It’s animated at parts and it’s staged into sections.  But it works very clearly.

I don’t know why disasters seem to lend themselves to making great informational graphics.  Maybe it’s the relevant information that is trying to be presented.  I don’t know.

I do know I would have liked to seen a small multiple, or something along those lines, on the bottom of the charts, tracking where we were in the whole process.    It seems that between the three vectors tracked (distance, route, and for lack of a better word, zoom) that any or all of them could have been tracked below.

But don’t get me wrong.  This is a great info-graphic.

Nice chart on how we spent our 2004 taxes

[Visual Complexity][1] is a really nice site. It’s meant to be a unified resource space that collects complex visualizations.

> The project main goal is to leverage a critical understanding of different visualization methods, across a series of disciplines, as diverse as Biology, Social Networks or the World Wide Web.

I find [some examples][2] better than others in terms of layering infromation. I think [some of the links aren't good][3] in terms of understanding the data. They’re pretty, but worthless in terms of comprehending the data. It’s a great site to browse around in.

[1]: http://www.visualcomplexity.com/vc/
[2]: http://www.visualcomplexity.com/vc/project.cfm?id=118
[3]: http://www.visualcomplexity.com/vc/project.cfm?id=154

[One Nation, Divisible][1] is a nice graphic showing the trending of the House and Senate away from the Center. The trending over time is good. My only complaint is with the legend placement and wording. That seems like it could be improved and made less, well, confusing.

[1]: http://www.nytimes.com/imagepages/2005/06/23/opinion/20050624_ORNSTEIN_graphic.html

Jon Udell talks about [the need to improve data visualization][1]. He points us towards some great work from Juice Analytics and a [really outstanding example of inline visualization][2]. But while this example is great, it still is just a first step. We’re looking at canned chart-types, cramped display areas, grid lines and so forth.

What I find really nice is the animated, dynamic visualization of these charts. They really just hammer home the point nicely. I hope this is the start of a new trend in info design.

[1]: http://weblog.infoworld.com/udell/2005/08/15.html#a1289
[2]: http://www.juiceanalytics.com/bblog/?postid=49

Michal Migurski adapted [In The News][1], which mapped out Google News, to [map out del.icio.us popular][2].

It’s quite impressive.

I think at first you notice these seven lines, and mouse around, and think, okay, that’s fun.

Then you start to notice the details. The date relation between the rows. The further correlation between the shape of the element and the color.

Then you click on something. Things move. Your choice is highlighted in a vertical graph form, nicely lined up by the days. It’s clearly outlined. The size, shape and color is quite obvious. The title and link is below. And look, it’s [has a __sparkline__][2]. I love sparklines. Click on something else, and the previous choice isn’t erased, it’s moved down in history.

Very, very nice. ([via][via])

[1]: http://news.stamen.com/
[2]: http://news.stamen.com/vox/
[via]: http://del.icio.us/joshua

Quite the interesting [clock where a pixel represents a second][1]. I defintely found myself watching the pixels march down.

But I think that the layout of the clock lacks something. Maybe it’s the white space in the corner. Maybe it’s the left-right, up-down looking. I’d like to see other options in terms of layouts. A long column rather than three columns, a single row, three rows vs three columns, etc…

What a neat idea. What a great clock. What a great job.

[1]: http://www.vendian.org/envelope/dir2/day_of_dots_clock/?do=11:18:20#topofclock