1 / 36

Lecture 01: Introduction

Lecture 01: Introduction. January 17, 2013 COMP 150-2 Visualization. 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.

Albert_Lan
Download Presentation

Lecture 01: Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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?

More Related