1Panning and ZoomingCS 4460/7450 - Information VisualizationMarch 3, 2009John StaskoSpring 2009 CS 4460/7450 2Fundamental Problem• Scale - Many data sets are too large to visualize on one screen− May simply be too many cases− May be too many variables− May only be able to highlight particular cases or particular variables, but viewer’s focus may change from time to time2Spring 2009 CS 4460/7450 3Solutions We’ve Seen• Overview and detail views• Focus+Context distortion• How about one view in which changing focus is fast and smooth?Spring 2009 CS 4460/7450 4Panning and Zooming• Panning− Smooth movement of camera across scene (or scene moves and camera stays still)• Zooming− Increasing or decreasing the magnification of the objects in a scene• Useful for changing focal point3Spring 2009 CS 4460/7450 5Zoominghttp://micro.magnet.fsu.edu/primer/java/scienceopticsu/powersof10/index.htmlPowers of 10Spring 2009 CS 4460/7450 6NASA Zoomshttp://svs.gsfc.nasa.gov/stories/zooms/index.html4Understanding Zooming• Introduction of idea of “space scale diagram”• Characterizes operations in zooming through this new diagram they introduce• Goals− Understand multiscale systems− Guide design− Authoring toolSpring 2009 CS 4460/7450 7Furnas & BedersonCHI ‘95Spring 2009 CS 4460/7450 8The Space - Scale DiagramScaleSpace (2D)5Spring 2005 CS 7450 9Space-Scale DiagramTechnique for describing panning and zooming interfacesFurnas and Bederson CHI ‘95User’s viewing frame (constant size)PanZoom inZoom outSpring 2009 CS 4460/7450 10Simplification: 1D Space6Spring 2005 CS 7450 11Space-Scale Diagram1. Pan2. Zoom3. Pan and zoom1.2.3.Spring 2009 CS 4460/7450 12Joint Panning and Zooming7Spring 2005 CS 7450 13Optimal Actions• Sometimes, these kinds of UIs can be disorienting to viewer• Example− Long pan isn’t any good− Better: Zoom out, pan a little, zoom inExample ApplicationSpring 2009 CS 4460/7450 14http://prezi.com8Spring 2009 CS 4460/7450 15Pad -> Pad++ -> Jazz ->Piccolo• Environments for supporting flexible, smooth zooming and panning on structured graphics world− Pad - Perlin & Fox, NYU− Pad++ - Bederson & Hollan, Bellcore & New Mexico− Jazz - Bederson, Maryland− Piccolo, Bederson, MarylandSpring 2009 CS 4460/7450 16Support• Pad− ???• Pad++− Tcl and C++, GL and X Windows• Jazz− Java, Java 2D & Swing• Piccolo− Java & C#/.net, Java 2D, OpenGL & GDI+9Spring 2009 CS 4460/7450 17Interface Physics• Creators of the systems talk about them creating a new form of interface physics• One which works a lot like the physical world− You can walk around, look at some things closely, etc• But one that also adds some “magic” of what the computer does wellSpring 2009 CS 4460/7450 18Pad++• Support library for building applications• Infinite plane, panning in x-y, zooming in-out• 2.5-D, not 3-D• Built on top of C++, Tcl/Tk and X Window SystemBederson et alJVLC‘9610Spring 2009 CS 4460/7450 19Important Concepts• Portals• Lenses• Sticky objects• Semantic zoomingSpring 2009 CS 4460/7450 20Portals• Views onto another place in the world• Implemented typically as separate rectangular region• Zooming, panning, I/O all work independently in there• Can be used to create overviews or focus regions11Spring 2009 CS 4460/7450 21Lenses• Rectangular regions/objects that can be moved around on display• Objects that alter the appearance and behavior of objects seen through them• Much like Magic Lenses of XeroxSpring 2009 CS 4460/7450 22Sticky Objects• Objects in the world that do not respond to the basic zoom/pan interface physics• Objects are “stuck” to the display− They never change position− They never change size12Spring 2009 CS 4460/7450 23Semantic Zooming• Zooming that is not simply a change in size or scale like simple magnification• Objects change fundamental appearance/presence at different zoom levels• Zooming is like step function with boundaries where Spring 2009 CS 4460/7450 24Jazz• All the stuff from Pad++• Implemented in java and swing• Utilizes scene graph approach and minilithic design philosophy• HiNote application is simple drawing editor (like PadDraw)13Spring 2009 CS 4460/7450 25UI Operations• Navigation− Left mouse button down, drag - Pan− Right mouse button down, drag right - Zoom in− Right mouse button down, drag left - Zoom out− Alternate: Arrow and page keys• Hyperlinks− Smoothly move you from one position to anotherSpring 2009 CS 4460/7450 26Challenges• How the heck do they do that?• Must keep rendering speeds up14Spring 2009 CS 4460/7450 27Efficiency Measures• Spatial indexing− Hierarchy of objects based on bounding boxes• Clustering− Restructure hierarchy to maintain a balanced tree, speed for indexing• Level of detail− Render items depending on how large they are on screen, don’t draw small onesSpring 2009 CS 4460/7450 28Efficiency Measures• Refinement− Render fast with low detail while moving, refine image when still• Clipping − Only render portions of objects that are visible• Region management− Only update portion of screen that has been changed15Spring 2009 CS 4460/7450 29Efficiency Measures• Adjustable frame rate− Keep animation and zoom rate constant independent of environment• Interruption− User input takes precedence, moves animations to their end state, gets handled• Optimized image rendering− Code to render zoomed images has been worked on a lot!Spring 2009 CS 4460/7450 30Pad++ Applications• PadDraw − Simple graphics editor• File/Directory browser16Spring 2009 CS 4460/7450 31ApplicationsTimeline viewsSpring 2009 CS 4460/7450 32Web HistoryWebtraversalhistoryVideoPadPrintsHightower et alUIST ‘9817Spring 2009 CS 4460/7450 33Browsing ImagesPhotoMesaUses panning andzooming to browsea photo collectionDemo & Video:www.cs.umd.edu/hcil/photomesaBederson UIST ‘01Spring 2009 CS 4460/7450 34Presenting TalksCounterPointUses panning andzooming inPowerPointDemo:www.cs.umd.edu/hcil/counterpointGood & Bederson Information Visualization ‘0218Spring 2009 CS 4460/7450 35Many More Applicationshttp://www.cs.umd.edu/hcil/piccolo/applications/index.shtmlSpring 2009 CS 4460/7450 36Current StatusPiccolo has anactive userbasehttp://www.piccolo2d.org/19Spring 2009 CS 4460/7450 37Other Systems• Let’s see some other examples…Spring 2009 CS 4460/7450 38Continuous Zoom• Bartram et al, Simon Fraser• Discussed
View Full Document