Lecture "Visualization"

Graphical User Interfaces 01

Visualization


Why Visualization?

– More than 75% of the information we perceive daily is collected through our eyes.

– Visual communication is more or less independent from cultural or national backgrounds.

– Visual communication is at times more economic and faster than words or sounds.


Elemental Aspects of Visualization

Symbols, diagrams and animations can help explain complex processes orrelations of objects in the real world.

Lufthansa Flight Manual, 1998



Visualization simplifies explanations and can work more precise than verbal communication.

Magiker Manual, IKEA, 2002



Visualization helps interpret raw data in order to discover hidden patterns, relations and trends.



Visualization enables and simplifies access to large and complex data sets, to find or display:

– specific information within larger information clusters.– relations and connections within seemingly unrelated bits of data.– multiple views of one data set.– specific information in context to other information.


Visualizing “Real” Things

Map of China, originally engraved in stone about 1100 A.D.



Feldtbüch der Wundartzney, Hans von Gersdorff, 1517



Visualization of Napoléon’s Russia campaign through 5 Variables, Charles Joseph Minard, 1820



The Royal Road to Card Magic, Jean Hugard and Frederick Braué, 1948



Map of New York City, Hermann Bollmann, ca. 1960



Sketch of Network Paradigms, David Baran, ca. 1964



The Powers of Ten, Office of Charles and Ray Eames, 1982



Level of Detail, Dave Small. MIT, 1993



Rock and Roll is here to pay, Steve Chappel and Reebee Garofalo, 1975



Medical Access, Richard Saul Wurman, 1978



Swiss National Railway Scenic Route Indicator, Hoffmann-Stahli, 1996



British Library Orientation Diagrams, Colette Miller, Information Design, 1999



Simulation of a Thunderstorm, Data from the NCSA, redesigned by Edward R. Tufte



Flight Master 2000, Chapman Bounford & Assoc., 1999



Vietnam Veterans Memorial in Washington D.C., designed by Maia Lyn



A map of domain name ownership at street level for downtown San Francisco, Matthew Zook, 1998



Radio spectrum allocations in the US, National Telecommunications and Information Administration, 1996



Gold Plate on Pioneer 10 and 11, NASA, 1972


Information Visualization

“Information Visualization is the use of computer-supported interactive visualrepresentation of abstract data to amplify cognition.” (XEROX PARC, User Interface Research Group).

“Information Visualization combines aspects of scientific visualization, human-computer interfaces, data-mining, imaging and graphics.”(Gershon und Eick, 1997).


Visualizing Quantitative Data

3D Visualization of Earthquake Epicenters, NCSA 1996



GeoURL, A location-to-URL reverse directory, Joshua Schachter, 1999



WebInforme Mapping Tool, Lisa Jevbratt, 2001



Cartogram of Internet Users, Antonio Scarponi, 2001



Graphic of the Linux Kernel, Rusty Russell, 2002


Using Metaphors

Perspective Wall, Xerox PARC, 1991


Using Metaphors

Document Lens, Xerox PARC, 1992


Cone Tee, Xerox PARC, 1992

Using Metaphors


Using Metaphors

Modified History Display in Mosaic Browser, 1995


“Information Landscapes”

Conceptual Cybermap, John December, 1992



GopherVR, University of Minnesota and Apple Inc., 1991



File System Navigator, Joe Tesler, Silicon Graphics, 1993



MineSet, Silicon Graphics, 1993



Information Landscapes, Students at the Visible Language Workshop, MIT, 1994



AlphaWorld, Roland Vilett, ca. 1998


“Information Spaces”

Map.Net, 3D Visualization Tool, 1993



City of News, 3D information browser by Flavia Sparacino, MIT, 1998



Visualization Study of the NSFNET, Donna Cox and Robert Patterson, NCSA, 1992



Global Topology of the MBone, Tamara Munzer et al, 1993



Perspecta View, Perspecta, 1998



I/O/D Webstalker, 1998



Financial Views, Lisa Strausfeld and Eerl Renisson, MIT, 1994



Shakespeare Project, David Small, MIT, 1996


Visualizing Relationships

“Mesh” Hypertext System, Concept map from Tim Berners-Lee’s original World-Wide Web proposal, 1989



Hotsauce, Apple’s Meta Content File Format developped by R.V.Guha., 1994



Hyperbolic Trees, 1994


Visualizing relationships

Hyperspace, 1997



Walrus Visualisation Tool, Young Hyun, Cooperative Association for Internet Data Analysis (CAIDA), 2000



Graphing the Structure of the Gnutellanetwork, Steve G. Steinberg, 2000



TextArc, W. Bradford Paley, 2001



Cobot Map of Social Relations, Charles Isbell and Michael Kearns, 2000



Active Visualizer, Katy Börner, 2003



Valence Site Diagram, Benjamin Fry, 2002


“Organic” Information

Lumeta, Map of a Corporate Intranet, 2002



Peoplegarden, MIT, 2001



Anemone Site Tracker, Benjamin Fry, MIT, 2003


Some No-Goes

The excessive consumption of perceptual bandwidth for purely decorative or sensational purpose, to create unneeded entertainment value, or to indulge in the simple vanity of demonstrating technical virtuosity.


Some No-Goes

Using excessive chrome


Some No-Goes

Using “real” things


Some No-Goes

Using excessive textures


Some No-Goes

Using excessive metaphors


Some No-Goes

Using objects

Documents

Lecture "Visualization"