Lecture on Oct 19, 2009. (Slides)


  • Required

    • Multi-Scale Banking to 45 Degrees. Heer & Agrawala. (pdf)

    • Chapter 11: The Cartogram: Value-by-Area Mapping. In Cartography: Thematic Map Design. Dent (pdf)

    • Escaping Flatland. Envisioning Information. Tufte.
  • Optional

    • A Fisheye Follow-up. George Furnas. CHI 2006. (acm)

    • Space-scale diagrams: Understanding Multi-Scale Interfaces, Furnas & Bederson, CHI 1995. (pdf)

    • Guidelines for Using Multiple Views in Information Visualization, M. Q. Wang Baldonado, A. Woodruff, A. Kuchinsky, Proceedings of AVI 2000, Palermo, Italy, May 2000, pp. 110-119. (acm)

    • Stacked Graphs – Geometry & Aesthetics. Byron & Wattenberg. InfoVis 08. (pdf)

    • The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus + Context Visualization for Tabular Information Ramana Rao and Stuart K. Card, SIGCHI '94, pp. 318-322. (pdf)

    • The visual design and control of the trellis display. Becker, Cleveland and Shyu. (pdf)

  • Links


nmarrocc wrote:

This is an awesome video of some spacial manipulation concepts by Azra Raskin HCI guru from Mozilla.


I like the use of ZUI and also simple panning to navigate to buttons and also zooming out. Seems fast and intuitive. I love gestures. I think there are some cool ideas here for how to navigate through space, esp. on a small device.

fxchen wrote:

I was browsing VisWeek papers and one seems very relevant to our class today

"Focus+Context Route Zooming and Information Overlay in 3D Urban Environments" http://www.cse.ust.hk/~huamin/vis09_huamin.pdf

We're presented with an integration of Google Earth and another data source to create a better information source for city navigation. It's a pretty cool technology demo. They're able to highlight a route through landmarks & street focus. Similarly to the Cartogram method, the authors change the aspect ratio of everything outside of the focused area, which may distort the perception of the rest of the city. When I draw my own maps, I like to label the streets immediately preceding and proceeding the route I want to take if I'm unfamiliar with an area, this method instead focuses on landmarks to direct an individual through a city.

rnarayan wrote:

nmarrocc - the Mozilla video (and Apple releasing a new multitouch mouse today for the iMac) prompts me to advertise this other video http://10gui.com/video/

The 10gui video also touches upon the maximization of usable space in the windowing environment and pinch zooming your way thru' from the top level similar to ZUI. The Pad++ semantic zoom can enhance utilization of visual real-estate significantly, with the caveat that it may require confining or re-mapping our data to heirarchical structures (only?) to facilitate aforesaid navigation.

A related link leads to magic lens ( http://www2.parc.com/istl/projects/MagicLenses/93Siggraph.html). Here, the lens operator can be more generalized - i.e. instead of say only zooming, other operators, such as a transformation could be used with the lens. With it, a spreadsheet table area can be selected+transformed to display an in-place scatter plot, or a myriad of other functions. It is also used for Focus+Context - where the lens filter is applied to a local region of the data to show detail, while leaving the rest of the view unchanged reinforcing context. Below is an attached image from the paper.

Figure 12. Gaussian curvature pseudo-color lens with overlaid tool to read the numeric value of the curvature. (Original images courtesy of Steve Mann)

jqle09 wrote:

These gui systems are really interesting. For the 10gui interface, if they integrated the keyboard and touch interface, such that if you put all your fingers down a virtual keyboard mapped to your hand placement is setup so you can type without being constrained to a standard keyboard would be really awesome. I really like how they are expanding the range of what input devices can be.

With regard to Tufte's escaping flatland, I thought I would link to the chapters namesake, http://www.geom.uiuc.edu/~banchoff/Flatland/ . It's pretty funny.

rmnoon wrote:

Does anyone else feel like the popularity of Google Maps has made almost all other forms of zoom/pan interaction in 2d space obsolete? Users just expect the ability to click and drag and zoom with the mousewheel/touchpad. Is this a good thing (consistent user expectations) or a bad thing (other cool things like the teddybear style zoom are squashed)?

vagrant wrote:

To be honest, I had some trouble keeping up with the mathematics behind the professor's explorations beyond Cleveland's decree of banking to 45 degrees. If anything, however, the paper proved how helpful illustrations can be when text becomes confusing.

Exploring through the Tufte reading, I found that while I appreciate minimalist designs, in many cases I can end up craving more information via visualization. I find myself more and more convinced that animations are the way to go when depicting information with a narrative purpose. Small multiples can extend the limitations of static space, but can stretch the attention of the audience. By contrast, I believe animations can draw in the attention of a viewer while cleanly illustrating a point.

Having studied abroad in Japan as an undergraduate, I was initially struck by how densely filled Japanese signs, advertisements, and manuals were with texts and diagrams. A small bit of culture shock, as a student still learning the language I was intimidated by such articles, but in short time I decided one day on a train to try reading a public notice about smoking during summer seasons. I was impressed at how, once my semi-trained eyes gave the visual a chance, I was in fact able to follow the information almost on two levels--both at a micro informative level, and at a macro illustrative level. I still had trouble understanding many such displays and I still prefer simpler designs, but Tufte's examples served to remind me that with static space, density is not always the enemy, and people can become accustomed or even attracted to highly detailed informative representations.

wchoi25 wrote:

This was a fascinating lecture and loved seeing all the creative focus+context visualization examples. I've always wondered about the distorted map technique explored in the Dent reading. He cites one of the advantages as "to shock the reader with unexpected spatial peculiarities." While it could be easy to degenerate to a confusing and unrecognizable view, this type of cartographic visualizations seems to do a particularly good job when the initial shock or emotional response is more important than the actual measurements or comparisons of relative sizes. I think that if the purpose is to shock somebody to a geographical imbalance in the data and leave a lasting impression, such visualizations can be effective, while Tufte may disagree based on his insistence on minimizing any sort of perceptive distortion in data.

malee wrote:

Really liked @nmarrocc and @rnarayan's links. @nmarrocc's reminded me of Data Mountain from MSR because both take advantage of users' spatial memory to better manipulate information. (http://research.microsoft.com/apps/pubs/default.aspx?id=64329).

A discussion of focus+context ties in nicely with the macro/micro discussion from a previous lecture. It seems that focus+context allow the user to see minute details and the big picture simultaneously, while macro/micro tend to allow users to transition between the small and the large. It would be interesting to explore what data sets would benefit from one over the other.

bowenli wrote:

Multiscale banking: I was so pumped when Jeff mentioned using Fourier analysis to optimize graphs. It was exactly what I had been thinking about on the earlier slides in lecture.

One interesting point is that the original banking algorithm doesn't assume anything about the data. It merely tries to optimize based on the orientation of the angles. Any graph will have an optimal aspect ratio as defined by the method. With multi-scale banking and the use of the DFT, you kind of assume there exist some interesting periodic trends (aka the "prominent spikes" mentioned on page 4). If none exist then you degrade back to the original algorithm.

On the conclusion: band pass filtering the data and then presenting it in the time domain seems boggling. I think I would have a difficult time getting an intuitive sense of such a chart.

Tufte: If I encountered a railroad chart like the one on p25 at a train station I would just cry. Holy crap.

Map projections: In a lot of them Antarctica is absolutely enormous. This is probably the most bizarre: http://www.csiss.org/map-projections/Azimuthal/Hammer_Retroazimuthal.pdf

jieun5 wrote:

The concept of sparklines, as well as how to optimize their aspect ratios in light of banking to 45 degrees, captured my attention. The potential of sparklines to communicate a great deal of trend information (despite the severe restrictions on their height being only that of a line of texts) is pretty impressive, and I wondered how this limitation on the image-height of sparklines may affect their effectiveness.

According to the first reading (Heer & Agrawala) under Section 3.3.2, the sparklines for share prices of 4 companies were generated by first determining the aspect ratios for the lowest and highest frequency scales for each data set, and then separately averaging the aspect ratios to attain ~8.3 and ~2.9. I'm a bit confused in this example whether (max-min) for each company is scaled to fit the word-height (in which case we cannot reliably compare slopes of sparklines across companies), or whether the slope of the sparklines remains consistent (in which case we must "waste" vertical space for comapanies that end up not varying very much relative to other companies.)

In this manner, I feel that displaying multiple sparklines side-by-side requires making an important decision, on whether to fully-utilize the precious vertical spacing for each instance, or to maintain consistency in line slopes across multiple instances.

aallison wrote:

I found the paper on Streamgraph very interesting. Stacked graphs clearly have a number of issues, but the paper does a great job explaining a number of methods used to turn a "flawed" visualization form into an aesthetically pleasing and informative graphic. For example, spikiness is minimized by modulating the baseline of the graph; however, doing so introduces new problems (see figure 13 of the paper), which are solved by the vertical sorting of the data. I think this shows that it often takes some decent tweaking of your graphic to make it pop. Don't be satisfied with the basic layout. Play around with the parameters of the design to see what happens. This is also a huge testament to the power of sorting. Oftentimes, the ability to sort is the ability to choose the shape of your data (the macro side of your data). If the visuals are bothering you, move the data around (assuming you are moving the data in a way that does not threaten the integrity of your data).

It's too bad I don't use LastFM. I'd love one of those graphics for my own listening habits.

dmac wrote:

When reading Tufte I was surprised that, rather than scold the visualization of the dancers (page 27), he applauded it for its artful display of subtle movements. Most of the ink in this graphic is used to draw the two dancers, and even then it's redundant because the dance is symmetrical. Even so, Tufte recognizes that the goal of this graphic is to demonstrate to the viewer both how to perform the motions of the dance and to convey the spirit of the dance with both posture and costume. Even stranger is that this example is presented when in the sidebar on the same page he quotes Guest that dance is better represented symbolically and abstractly rather than realistically.

vad wrote:

The scroll and zoom interface that was demonstrated in the lectures with the Bear Map is actually not as uncommon as the lecture might suggest. When put to good use, it becomes an amazing visualization tool. One great example of it is the driving part of the game Grand Theft Auto 2 (check it out: http://www.youtube.com/watch?v=AFK0hR703pQ). Notice how, as well as zooming out, the camera allows the player to leave the canter view. Another great example is the iPod Artist/Album scrolling. When you scroll fast enough it starts showing the first letters only (which is effectively a zoom out).

I think this technique, when used effectively, can be so immersive that it slips into the subconscious.

akothari wrote:

I was really intrigued by the cartographic reading, particularly the value-by-area mapping. I did some digging on the internet, and realized I had seen this couple months ago at the byron lee talk. i'd highly recommend looking through his work - truly inspirational. http://leebyron.com

coming back to value by area mapping, here's byron's work on olympic medal count. http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.html

zdevito wrote:

@vad: I agree that the combined pan/zoom seen in the teddybear map can be a useful interaction. It is interesting that the two examples you cite, the GTA map and the iphone scroll, are both acceleration-based interfaces. The user input is interpreted as some acceleration: stepping on the gas in the game, or imparting a force with a flick on the iphone. I noticed that the map seen in class uses the same interface as well. However, most maps today use a click and drag interface based on position rather than a velocity or acceleration vector. It would be interesting to seen this pan/zoom interaction combined with a click and drag interaction for panning. The amount of zoom out can be based on the speed of the drag action.

tessaro wrote:

I vividly recall seeing ads for Tufte's Envisioning Information in the New Yorker when it was fist published. The ads featured a photo of the opened book seen obliquely–the paper tetrahedron on page 16 shown folded upright–breaking through the plane of flatland. In my mind this portended a rich investigation of transformative information designs. The opening chapter parallels the breakthrough metaphor alluding to Edwin Abbots' classic geometric parable of the potential of other realities. I must admit that I have always been somewhat disappointed with Tufte's enlisting of the metaphor of 'escaping flatland'. He devotes little to the rich design space of the engaging the third dimension. I am aware that the book is ostensibly 'about' multivariate expressions on the two dimensional plane, but coming from a man who has underwritten his own career as a sculptor–see his latest book Beautiful Evidence where he uses his own outdoor sculptures as a kind of coda–I can't help but wish for more. One of the great problems of visual design- namely translating a round world to a flat map is ignored. There are many, many more examples of pop-up and movable books that employ flat paper in novel ways to transcend the limitations of space as well as time, some even older than Tufte's example. Flip-books are another example of an ingenious method for taking a limitation and transforming it into a vehicle. In a sense any book can be seen as a stack of movie frames in denial of an alternative universe. The dance diagrams in the chapter could spring to life in the books margins and Tufte's musings about design trade-offs would sound more like the planer preoccupations of the shapes in Abbots' Flatland.

nornaun wrote:

When I first did the reading, I didn't really see the point why someone would want to make a cartographic map. To me at that time, it was so unintuitive and confusing. May be because I am not a US citizen, I don't think I can actually tell which state is which. I think this is mentioned as a weak point of cartographic map. Since people who are not used to the geography will have a hard time interpreting the data. Still after seeing the examples in the lecture, especially the one about election, I think I kind of get it. You can see how many people voting for each party in rough without losing information about number to the geographic limitation. If done well, a cartographic map can gives a better insight. However, the hard part is the making of such map. There are standard methods for making them as mentioned in the reading and lectures, but I wouldn't choose to make one if I have to make it by hand. This might be helped with computers.

mikelind wrote:

I found the banking to 45 degree method to be very interesting this week. It seems like a great rule of thumb for modifying line based visualizations but sometimes may be more work than many data visualization creators are willing to do over just eyeballing it. I was curious if there was an easy way to use methods like this in common software packages to produce these results, and it appears that flare has a very useful AspectRatioBanker class, but for less visualization emphasizing programs, like excel, the only ways to accomplish this sort of task seem to be rather convoluted. I wonder if there is a better way to present this possibility and similar optimization algorithms to less serious data-visualization creators, the group that I believe is responsible for the vast majority of created visualizations

joeld wrote:

I thought it was interesting how the Banking to 45 Degrees technique use the power spectrum as an intermediate representation - taking some power spectrum information, filtering and tranforming back to the primary domain. Why not use the frequency domain representation directly? The reason must be that most people are not trained in the use of the frequency representation, though it is many times the best way of looking at data.

This raises an interesting question when creating new visualizations. How many visualizations fail not because of their intrinsic goodness, but by the effort it would take to train people to use them?

alai24 wrote:

With regards to the cartographic mapping, I agree with nornaun that the effectiveness of such a visualization depends heavily on how familiar the viewer is with the geographic area. Most US citizens have seen the US map since kindergarten, but given a similar visualization of some other country or continent, I think I'd have a lot more trouble getting a sense of what's what. I suppose this illustrated the importance of keeping the audience in mind.

This was the first time I was introduced to sparklines, which I find to be really cool with a lot of potential to convey a lot of information while taking up minimal space.

vad wrote:

So I opened XKCD today and was greeted with this gem:


Original link: http://xkcd.com/657/

Large image: http://xkcd.com/657/large/

This reminds me of that cool family tree vis that Jeff showed in lectures.

Leave a comment