Data Visualisation

1. HCI 0283 Lecture 9 Presentation Data Visualisation

2. A Problem • It’s 2 in the morning and you have a essay on geoengineering as a solution to climate change to hand in next morning • Your table is covered with piles of printouts of papers, essays, your own scribbled notes… • Disaster! You find there’s no room left for your coffee cup • There’s a computer in the corner, so why are you spread out all over the table?

3. Presentation • Computer screens are far too small to support visibly all of the resources needed to perform many tasks • A huge screen would be needed to show the London Underground diagram in sufficient detail • This problem gets worse as people move to using PDAs • How do we solve this problem?

4. Scrolling • Scrolling data in and out of the visible area is an obvious solution • It does have a big problem • Where in the document am I? • Most of the document is hidden from view • Scroll bars provide little or no context • Context is very, very useful and providing context solves many of the problems encountered with small screens

5. Context Map • One simple solution is to provide a map with the location of the detail of interest indicated • This design map is less detailed than the main map but shows a box which is the location of the main detailed map • This is an improvement but can have problems of overlapping or of continuity

7. DragMag • The occlusion problem was addressed with DragMag • The base image and magnified image are separated • The magnified image can itself be scrolled independently around the base image • The magnification depends on how far out the magnified image is pulled

8. DragMag • Continuity is still a problem

9. Macroscope • The Macroscope solves this by superimposing the selected area on the overall map and using transparency to distinguish between them • Macroscope Movie from MIT

10. Focus + Context • How do we make context information co-exist with detailed information? • Two popular solutions are the bifocal display and the perspective wall

11. Bifocal Display • Imagine that all of the items to be displayed were shown on a long paper strip • Only part of this strip is visible at any time

12. Bifocal Display • Suppose the strip of paper is pulled back across two posts in such a way that all of it is still in view

13. Bifocal Display • On the screen the central objects are fully visible but the items at the sides appear squashed

15. Perspective Wall • The concept of the bifocal display was created before it could be effectively implemented on a computer (1980) • Eleven years later (1991) it was implemented as the perspective wall • This simulates a three dimensional effect with the same distortion technique as the bifocal display

17. Distortion • The bifocal display/perspective wall shows distortion in the X-dimension • We would apply distortion in both X and Y dimensions as in the table lens (lecture 2)

18. Row Focal Area Column Focal Area Non-Focal Area Focal Area Table Lens

19. Table Lens

20. Document Lens Bifocal display Persepective Wall • The document lens fills the screen far better than the perspective wall does Document Lens

21. Document Lens

22. Rubber-sheet Distortion • All of the techniques described so far use a regular form of distortion • One-dimensional distortion: bifocal display, perspective wall • Two-dimensional distortion: table lens, document wall • It is also possible to use irregular or rubber sheet distortion • Harry Beck’s London Underground diagram

23. Coffee Time!

24. Suppression • Distortion makes some items more visible than others, but when should things disappear entirely? • Sometimes there is far more detail in a display than is relevant to the problem • Simplified diagrams show only the relevant parts of the display • How do we define relevance? • How do we arrange for irrelevant details to be suppressed?

25. Suppression • A powerful technique for this is the fisheye technique • It is often helpful to display data only if its perceived value exceeds some threshold set by the user • This uses a tree-structured system where items are represented as nodes and the relevance is based upon the distance between the nodes

26. -2 0 -3 -1 -1 -1 -2 0 -4 -2 -4 -4 -2 -2 -2 -2 -2 -2 Suppression

27. -2 -2 -4 -6 -6 -4 -6 -4 -2 Suppression -2 0 -3 -1 -1 -1 -2 -2 -2 -2 -2 -2 -4 -4 -4 -2 -2 0

28. Suppression • Another method is to allow the user to select which information is shown using layers for each type of information • For instance, a back layer of a map may be overlaid with layers showing weather, crime statistics, rainfall, traffic density… • This is a common technique in creating Geographical Information Systems

29. Really Useful Maps • Distortion and suppression can be combined, particularly in maps • You only need show detail at the start and end, plus landmarks on the way • This technique dates back to the 13th century • Matthew Paris’ map of the route from London to Jerusalem, showing the towns and landmark buildings on the way

30. Really Useful Maps

31. Magic Lenses • The presentation of data is mainly rearranging the view we have of data • So far we have looked at tools which allow us to rearrange data and then display it • Why not bring the tool to the data? • The magic lens usually sits beside the text but can be moved to lie on the text and resized to select a single word • The definition of that word is displayed

32. In creative writing one often needs clarification of a word, either because someone else has used the word or because one has used the word oneself without being absolutely sure of its definition. An appropriate magic lens would first be moved from its normal position on the display to lie over the sentence… In creative writing one often needs clarification of a word, either because someone else has used the word or because one has used the word oneself without being absolutely sure of its definition. An appropriate magic lens would first be moved from its normal position on the display to lie over the sentence… Lens: n. A carefully ground or moulded piece of glass, plastic or other transparent material, having opposite surfaces either or both of which are curves

33. Magic Lenses • Attractive metaphor – bringing a magnifying glass to the page • Limiting the display of detail prevents clutter over the whole display • User controlled • Less computationally expensive than applying the lens to the entire display • Unmodified area provides useful context

34. What’s There? • Browsing plays an important part in many activities • What does a folder/video library/set of TV channels/magazine etc contain? • We can riffle through the pages of a magazine to judge its content • Similarly we can riffle through displays on a computer screen

35. Rapid Serial Visual Presentation

36. Rapid Serial Visual Presentation

37. Rapid Serial Visual Presentation NUCOG 2006 Akureyri

38. Effective View • In some situations the user can only see part of the data available – he has a limited view size or view diameter • In this case, the number of jumps (or clicks) required to move from one end of the list to the other is proportional to N, the number of items in the list • This is why scroll bars are so useful…

40. Effective View • The number of clicks required can be reduced by using the same principle as the bifocal display • This allows the user to see the ends of the list and some intermediate points in the list • Movement then becomes more like a binary search • The diameter of the view is then log(N), much smaller than N

42. Effective View • If the list is rearranged into two dimensions instead of one, the diameter drops to the order of √N • If this is extended to three dimensions, the diameter drops to the order of 3√N

43. Zoom and Pan • Zooming and panning are familiar to anyone who watches TV or films • Panning moves a frame across the screen • Zooming increases the magnification of the area on the screen • These techniques can be used in a computer display to allow the user to choose between local detail and global overview

44. Zoom and Pan • Suppose we are looking at a point A and want to compare it with a point B that is not currently visible • We could just pan across from A to B • It is easier to maintain a mental model of A and B if we first zoom out until A and B are both visible, then zoom in to B • Semantic zoom shows more information at higher magnifications

45. Z W A B Zoom out Zoom in Magnification X Y Space-Scale Diagrams • Space-scale diagrams show copies of an image arranged on a magnification scale • The dark square is the user’s viewing frame and is of constant size • Panning from A to B is achieved by zooming in from W → X, panning X→Y, then zooming out from Y → Z

46. Summary • Computer screens and sheets of paper are far too small to support visibly all of the resources needed to perform many tasks • Both detailed and context information need to be made available • Common techniques include • Distortion • Suppression • Pan and Zoom

47. Coming Soon… • Next lecture: Models and Autonomous Processes • Homework: Read chapter 7 of Information Visualisation (Spence)