Lecture 01: Introduction

1. Lecture 01:Introduction January 17, 2013 COMP 150-2Visualization

2. People Instructor: Remco Chang remco@cs.tufts.edu Office: Halligan E009 Hours: TBD Graduate TA: Eli Brown Eli.Brown@Tufts.edu Office Hours: By appointment only TA:Dan Kass TA:Liz Salowtiz TA:Mike Borys

3. People • Let me get to know you guys a little bit… Show of hand: • CS Course Background • People who took COMP 11 with me… • … taken COMP 15 • … taken COMP 40 • Know Java? • Vis Programming Background • … taken COMP 175 (Graphics) • … taken COMP 171 (HCI) • … taken COMP 86 (Object Oriented GUI) • Other courses in graphics, visualization, HCI • Proficiency with GUI frameworks or toolkits • e.g., d3, javascript/HTML5, openGL, MFC, X, Java, Swing, wx, QT, etc.

4. People • Design Background • Courses in art • Courses in design • Courses in Human Factors • Majors • CS • Human Factors • Engineering • Arts and Science • Undecided • Others? • How do you see yourself? • As a master programmer • As a kickass designer • As a jack of all trades who can solve anything

5. Discussion • What does “visualization” mean to you?

6. Representation of Data / Information / Thoughts • René Magritte

7. This Course • Three Primary Goals! • Design + Programming + Solving Problems • In order to do that: • Gain proficiency with programming with Processing • Learn the mapping of data -> visual form • Understand basic perception theory • Understand basic cognition concepts relating to visual processing • Work with people (stakeholders, teammates) • You should be able to: • Develop usable visualizations to explore data or tell a story! • Work in a team to solve someone’s visualization problem!

8. Perception and Cognition • Three major concepts: • Pattern Recognition • Color Theory • Perceptual Theory • Gestalt Psychology • Externalization • Symbols • Distributed Cognition • Visual Communication • Storytelling • Design Principles

9. Pattern Recognition • Why do things “pop out”?

10. Pattern Recognition • Why do things “pop out”?

11. Why Visualization Works… • Algorithms question: what is the complexity (in big O notation) of finding a single red dot in n number of blue dots? • What is the complexity (in big O notation) for a human to find a red dot in a sea of blue dots?

12. Why Visualization Works • Anscombe’s Quartet • R1 - Chapter 1.5, page 7 (p20 in pdf)

13. Pattern Recognition

14. Gestalt Psychology • Law of Proximity

15. Gestalt Psychology • Law of Similarity

16. Color Theory

17. Color Theory

18. Perceptual Theory

19. Art Inspired Designs

20. Externalization

21. Example: Arithmetic Slide courtesy of Pat Hanrahan

22. Example: Arithmetic Slide courtesy of Pat Hanrahan

23. Visual Communication

24. Visual Communication • Open Exploration: • http://projects.nytimes.com/census/2010/explorer • “Choose your own adventure” • http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html • Structured, yet flexible narrative • http://www.nytimes.com/interactive/2010/02/02/us/politics/20100201-budget-porcupine-graphic.html

25. Visual Communication • Compare the two following: • http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html • http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html

26. General Information • Course website: • http://www.cs.tufts.edu/comp/150VIZ • Syllabus • Note Colloquium Talks • Textbooks • Homework • Grading • Accommodation

27. Assignments • Assignment 1: • Install Processing • Implement a simple box that the user can click on • Concepts: • Basic rendering • State maintenance

28. Assignments • Assignment 2: • Implement: bar chart and line graph • Scale to size of the screen • Concepts: • Data parsing • Data mapping • Basic geometry and layout • Selection (intersection)

29. Assignments • Assignment 3: • Implement ThemeRiver • http://vis.stanford.edu/protovis/ex/stream.html • Concepts: • Temporal data • Mixed categorical and numeric data • Splines (http://vis.stanford.edu/protovis/ex/splines.html) • Selection of arbitrary shape (intersection)

30. Assignments • Assignment 4: • Implement SquarifiedTreemap • http://vis.stanford.edu/protovis/ex/treemap.html • Concepts: • Hierarchical Data • Implement existing algorithms • Recursion + geometry

31. Assignments • Assignment 5: • Implement Node-Link Diagram • http://vis.stanford.edu/protovis/ex/force.html • Concepts: • Relational Data • Force-directed layout • Basic physics engine

32. Grading • Overall Course: • Assignment 1 13% • Assignment 2 13% • Assignment 3 13% • Assignment 4 13% • Assignment 5 13% • Final Project35% • Total 100% Final Project: Project Success 50% Individual 30% Presentation 10% Self Assessment 10% Total 100%

33. Extra Credit • Extra Credit 1: • Find a visualization “in the wild” that you like • Explain why • Find a visualization “in the wild” that you do not like. • Fix it • Up to 2% to the final grade • Asked to present in class • Deadline: Wednesday Jan 23, 11:59pm

34. Example

35. Example • http://peltiertech.com/WordPress/use-bar-charts-not-pies/

36. Questions?