43
Cognitive Science 220: Information Visualization Seminar Winter 2011

Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

  • Upload
    others

  • View
    13

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Cognitive Science 220: Information Visualization Seminar"

Winter 2011"

Page 2: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Cogsci 220: Information Visualization Seminar "

Goals"•  Introduction to field, selected research areas, people, and labs"•  Exposure to computational methods and tools"•  Experience writing an NSF-style proposal or doing a

information visualization project and documenting it in the form of a conference paper. Cogsci grad students can count as either an issues or a methods course depending on what you do."

Approach"•  Read two of Tufteʼs books as a gentle introduction to the field of

information visualization"•  Gentle introduction to visualization software"•  Find a visualization area you are interested in, hopefully useful

for your current or future research, read selected literature in that area, and write a proposal or document a project"

•  Along the way share your project idea, plans, and the best of the associated literature with the seminar "

Page 3: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

hci.ucsd.edu/hollan"hci.ucsd.edu/hollan"

Page 4: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Cogsci 220 Class Wiki: cogsci220.wetpaint.com"

Brief Introductions""NSF on Thursday""Schedule for first two weeks""First assignment"

Page 5: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Alternative I: Critique a Good and Bad Visualization"

The use of visualization is pervasive in the media: explanatory diagrams in magazines, graphs describing the projected impact of a new state budget, new experimental data plotted against theoretical expectations, etc. In each case, the author of the visualization tries to convey a point of view by emphasizing some aspects of the data while toning down other aspects. The result can vary widely, from informative to misleading."In this alternative of the assignment, pick out two examples, one good and one bad visualization. We will discuss these in class next week. Be prepared to quickly explain the visualizations. No information visualization text or paper should be used. Go to original sources: a textbook, science magazine (Nature, Science, Scientific American, ...), magazine or newspaper (Newsweek, The Economist, NY Times, USA Today, ...). Once you have selected a good and a bad example, post them and a discussion of them on the wiki as described below. You discussion should include the following:""

Explanation: Describe the story behind the visualization. What does the visualization depict and who is the intended audience? The explanation should be brief but containsufficient detail to allow one to understand the goal of the visualization."Deconstruction: Here you should deconstruct the visualization. What data is represented, size of data set and how representative, what mapping are used? What is datamodel, image model, and encodings are used? Are there uninformative elements?"Critique:Is the visualization effective? Does it communicate the data? Why or why not? Does the visualization uphold or violate any important design principles? Keepin mind not only perceptual and presentation issues but also the expected background knowledge and cultural conventions of the intended audience. Howwould you change the visualization to improve it?""

This assignment is used in many information visualization classes to encourage students to start to think critically and analytically about visualizations. The original formulation comes from a class Pat Hanrahan taught at Stanford. See bottom of web page for submission details.""

Page 6: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Alternative II: Design a Visualization"In this alternative of the assignment, you will design a visualization for a small data set and provide a rigorous rationale for your design choices. You should in theory be ready to explain the contribution of every pixel in the display. You are free to use any graphics or charting tool you please--including drafting it by hand. However, you may find it most instructive to create the chart from scratch using a graphics API of your choice.""Recently, a fair amount of press heralded the prediction that the Android mobile OS will soon become the number 2 smartphone operating system. Imagine that it is your job to assist a product manager in a technology company. You've been asked to create a simple means to help her compare the sales of Android phones (both actual and predicted) to the performance of other smartphones. For her immediate purposes, she isn't deeply interested in the raw number of units sold or moneymade; she primarily wants to know how the competitive landscape may be shifting. The number of smart phone units sold (in millions) by operating system, 2007-2011 (2010-2011 are projected numbers) are available form Gartner. Here is a comma separated list of the data.""Your task is to design a static (i.e., single image) visualization that you believe effectively communicates the data and provide a short write-up describing your design. While you must use the data set given, note that you are free to transform the data as you see fit. As different visualizations can emphasize different aspects of a data set, you should document what aspects of the data you are attempting to most effectively communicate. In short, what story (or stories) are you trying to tell? Just as important, also note which aspects of the data might be obscured or down-played due toyour visualization design.""In your write-up, you should provide a rigorous rationale for your design decisions. Document the visual encodings you used and why they are appropriate for the data. These decisions include the choice of visualization type, size, color, scale, and other visual elements, as well as the use of sorting or other data transformations. How do these decisions facilitate effective communication?"

Page 7: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

General Advice for Students Why do so few people make significant contributions?

What is the difference between those who have impact and those who don’t?

One factor is expectations If you think you can’t almost certainly you won’t

Prepare Yourself The time to start is now Do what you love (that’s easy) and love what you do (that’s the

challenge) Don’t worry about how intrinsically smart you are or anyone else is To do significant things you have to neglect other things Be careful about your commitments but when you commit really do it Take time to think important thoughts Refuse to let the urgent drive out the important Be careful about who you spend time with

Page 8: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Advice for Grad StudentsResearch Requires Courage Research Involves Risks

Social and emotional Risks to reputation and pride High probability any particular project, especially if challenging, will fail

Transitioning from student to independent researcher A difficult transition from being a student to being a research contributor Think of yourself not as a graduate student but as a young researcher in your

field (the wider context is key to making wise decisions) Reputations start early Learn how to balance multiple things and deal with ambiguity You have more time and flexibility now than you likely ever will again Be smart in using your time Get to know people in your field (email, conferences, talks, visits, …)

Develop a Research Portfolio Your time is the investment currency Work on important problems What makes a problem important? Portfolio should be a mix of differing risk/payoff projects Adjusting the mix

"

Page 9: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Research Advice"

Goal is to have impact"

Feedback is key: seek out and value thoughtful critics"

Do real stuff: make sure you are solving problems some one (especially you!) cares about"

Stay focused on questions you deeply care about"

Become methodologically sophisticated and know the literature "

Develop research taste: for selecting problems, how to attack them, and how to communicate results"

Your real legacy will be not only you papers but your influence of your colleagues, students, and others"

Page 10: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Science is a Social Activity

Doing"Collaborate, collaborate, collaborate

"

Talking"Importance of both formal and informal interactions (Hinton,

DER)"From water cooler chats to lab meetings to classes and

seminars to conference talks "TAing and teaching are important opportunities"Look for opportunities to give talks (both formal and informal)

"

Writing"A constant activity and continual developing skill (Knuth, DAN)"Set aside regular time to write"A new challenge is learning how to write proposals"

Page 11: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Refuse to let the urgent drive out the important

Always remember:"it has to be fun too"

Page 12: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Consider Some Opportunities"

Labʼs interest in visualizing time-based multimodal data and ChronoViz software"

"Interest in visualization of writing or programming

activity""Work with HIPerSpace Wall""Develop real expertise with a visualization toolkit or

software environment""Explore visualization techniques that can help with

your current or future research"

Page 13: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Worldʼs Highest-Resolution Scientific Display System: Calit2 HIPerSpace Wall"

Seventy 30” displays, arranged in fourteen columns of five displays each. Each 'tile' has a resolution of 2,560 by 1,600 pixels – bringing the combined, visible resolution to 35,640 by 8,000 pixels, or more than 286.7 million pixels in all.  (Almost 1 pixel per each of the 300 million US residents)"!"

Page 14: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Cooliris on HIPerSpace Wall"

Page 15: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Visualization"

Definition (www.oed.com) ""1.  The action or fact of visualizing; the power or

process of forming a mental picture or vision of something not actually present to the sight; a picture thus formed. "

2.  The action or process of rendering visible"

Page 16: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Visualization"

“Transformation of the symbolic into the geometric” [McCormick et al. 1987]"

"“... finding the artificial memory that best

supports our natural means of perception.” [Bertin 1967] "

"“The use of computer-generated, interactive,

visual representations of data to amplify cognition."

[Card, Mackinlay, & Shneiderman 1999]"

Page 17: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Scientific Visualization versus Information Visualization"

Scientific Visualization"Example: Airflow over aircraft wing

Electrical Current in Thorax"

Information Visualization Examples"

http://www.smartmoney.com/marketmap

Treemap of Market

http://www.myrateplan.com/cellphones/

Cell Phone Selection

Thinking machine 4

Martin Wattenberg’s Many Eyes

Ben Fry’s Zipdecode

http://acg.media.mit.edu/people/fry/zipdecode/ and Processing

www.processing.org

Page 18: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Additional Examples"

Flight patterns in US"http://www.aaronkoblin.com/work/faa/ ""finance.google.com""Baby name wizard""The shape of song""CoolIris"

"

Page 19: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Three Functions of Visualization"

Record: store information"Photographs, blueprints, … "

"Analyze: Support reasoning about information"

Process and calculate""Reason about data""Feedback and interaction"

"Communicate: Convey information to others"

Share and persuade""

Collaborate and revise""Emphasize important aspects of data"

Page 20: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Purpose of Visualization"

Convey Information to People"“The purpose of computing is insight not numbers.”

-- Richard Hamming!Answer a question"Frame an issue"Assist in decision making and support analysis and

reasoning"Assist discovery and exploration"Help look at something in new ways; everything worth

representing is worth representing in multiple ways"Communicate with others: make a point, tell a story,

serve as a shared artifact that assists collaboration"Inspire"

Page 21: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Power of Visualization"

Page 22: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Power of Visualization"

Page 23: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Functions of Visualizations"

Record Information"Galilioʼs sketches of moon phases 1616"See http://galileo.rice.edu/sci/observations/moon.html for an interesting discussion"

Page 24: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Photographs: Phases of the Moon"

Page 25: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Answer Question"

Page 26: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Recording"

http://www.nlm.nih.gov/exhibition/changingthefaceofmedicine/artifact/jacobi.html"

Page 27: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

"

Waylon Brunette, Jonathan Lester, Adam Rea, and Gaetano Boriello, University of Washington and Intel Research"

"

Page 28: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected
Page 29: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Making a Decision: Challenger Disaster"

Page 30: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Challenger Disaster"

Page 31: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

See Data in Context: Cholera Outbreak"

Page 32: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

See Data in Context: Cholera Outbreak"

Page 33: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Find Patterns: New York Weather"

Also example of aircraft returning from bombing runs"

Page 34: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Convey Information to Others"

Page 35: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Convey Information to Others"

Page 36: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Inspire"

Also "Kunth and functions "Papert and gears"

Page 37: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Inspire"

Page 38: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Challenge"

More and more unseen data""

Faster creation and collection""Faster dissemination "

"5 exabytes of new information in 2002 [Lyman 03]""

37,000 Libraries of Congress""161 exabytes in 2006 [Gantz 07]""Necessitates better tools and algorithms for visually

conveying information"

Page 39: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Visual Thinking"Pythagorean Theorem

Chinese Proof By Dissection"Tufte/Blinn Videos"

Page 40: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Edward Tufteʼs Books"

Page 41: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Additional Background Texts"Information Visualization: Perception for Design

(2nd Edition) by Colin Ware"

Information Visualization: Design for Interaction (2nd Edition) by Robert Spence"

"Readings in Information Visualization: Using

Vision to Think by Stuart K. Card, Jock Mackinlay, and Ben Shneiderman"

The Craft of Information Visualization:Readings and Reflections byBen Bederson and Ben Shneiderman"

Visualizing Data by Ben Fry ""Many Others"

Journal"

Page 42: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

VisWeek 2011: 23-28 October in Providence RI"

Page 43: Cognitive Science 220: Information Visualization Seminarhci.ucsd.edu/220/220-Intro.pdf · Cogsci 220: Information Visualization Seminar "Goals" • Introduction to field, selected

Assignment II"For assignment II you should begin to become familiar with a visualization toolkit or software system. There are

many many possibilities. Here are some examples:""

ChronoViz (http://www.chronoviz.com): ChronoViz is a tool to aid visualization and analysis of multimodal sets of time-coded information, with a focus on the analysis of video in combination with other data sources."

"Ggobi (http://www.ggobi.org/): an open source visualization program for exploring high-dimensional data.""Google Visualization (http://code.google.com/apis/visualization): API and Charts.""ManyEyes (manyeyes.alphaworks.ibm.com): Web-based visualizations.""Matlab (http://www.mathworks.com/products/matlab/description4.html): primarily scientific and engineering but lots of folks use

Matlab for data analysis.""NodeXL (http://nodexl.codeplex.com/): provides support for social network analysis in the context of a spreadsheet. Currently

Windows only. Network graphs using edge and vertex lists stored in an Excel 2007 or Excel 2010 workbook.""Prefuse (http://prefuse.org/): Java API for information visualization.""Prefuse Flare (http://flare.prefuse.org/): ActionScript 3 library for data visualization in the Adobe Flash Player.""Processing (http://processing.org/): Popular language and IDE for graphics and interaction.""Protovis (http://vis.stanford.edu/protovis/): JavaScript tool for Web-based visualization.""VTK (http://vtk.org/): Library for 3D and scientific visualization.""

Feel free to edit this page to add others you find of interest. Some might be interested in lower-level tools such as provided by HTML5, especially the Canvas element and SVG (Scalable Vector Graphics)."

"The assignment is to begin to familiarize yourself with one these toolkits (or another one). You should write a short

description of one that seems promising to you. An example visualization to help convey the potential usefulness would be a nice addition. Your completed assignment is due on Thursday January 20th, by 7:00am. We will be discussing submissions in class, so be sure to avoid a late submission! To submit your assignment, create a new wiki page with a title of the form: A2-LastnameFirstname and move it below this page."

"