1. Lecture 01: Introduction
September 05, 2017
COMP 177 Visualization

2. People Instructor: Remco Chang remco@cs.tufts.edu Office: Halligan 221
Hours: TBD
Head (Graduate) TA:
Tomoki Shibata
Undergrad TA: Chase Conley

3. NOTES A quick word about class size… Current Roster of 40
A few people on the waiting list
Some preference given to incoming graduate students
See me after class
People might drop…

4. People Let me get to know you guys a little bit… Show of hand:
CS Course Background
… taken COMP 40
Know Java?
Know JavaScript?
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, openGL, MFC, X, Java, Swing, wx, QT, etc.

5. People Design Background Majors Courses in art Courses in design
Courses in Human Factors
Majors CS
Human Factors
Engineering
Arts and Science
Undecided
Others?

6. This Course Primary Goals Work with data
Understand what makes visualization good…
…and what makes a good visualization
Gain experience programming visualizations
Learn technologies and techniques that are frequently used in conjunction:
Databases
Machine Learning / Statistics
Web technologies

7. Relation to Data Science
Story about TripAdvisor
Data skills (storage, retrieval, cleaning)
Analysis skills (stats, machine learning, data mining)
Role of visualization
Data exploration
Data exposition (aka storytelling)
Both?

8. Exploration: Anscombe's quartet

9. Anscombe's quartet

10. Exposition: Visual Communication

11. Visual Communication “Choose your own adventure”
Structured, yet flexible narrative

12. Data Journalism Data is the story Data augments the story
Data augments the story
Sensationalizing the Data

13. How to Build Visualizations?
Three major concepts:
Pattern Recognition
Color Theory
Perceptual Theory
Gestalt Psychology
Externalization
Symbols
Distributed Cognition
Visual Communication
Storytelling
Design Principles

14. Pattern Recognition
Why do things “pop out”?

15. Pattern Recognition
Why do things “pop out”?

16. 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?

17. Gestalt Psychology
Law of Proximity

18. Gestalt Psychology
Law of Similarity

19. Color Theory

20. Perceptual Theory

21. Exposition and Exploration: Thought Externalization

22. Small Group Discussions
For your chosen numeric system, identify the encodings:
Symbols
Counts
Spacing

23. Small Group Discussions
For your chosen numeric system, identify the encodings:
Symbols
Counts
Spacing
For the Arabic system, repeat the exercise

24. Small Group Discussions
For your chosen numeric system, identify the encodings:
Symbols
Counts
Spacing
For the Arabic system, repeat the exercise
Why did the Arabic system “win”?

25. Example: Arithmetic
Slide courtesy of Pat Hanrahan

26. Example: Arithmetic
Slide courtesy of Pat Hanrahan

27. (Addendum) Counting in Arabic Numerals

28. General Information Course website: Teams of 2 Syllabus Languages:
Teams of 2
Syllabus
Lectures
Labs
New weekly partner
Announced during lecture
Languages:
Processing (Java)
Javascript
Assignments
Teams
Switching Members (Projects 1+2, Projects 3+4+5)
Submission via Provide
Final Project
Grading
Labs
No Text book
Accommodation

29. Visualization Critique
Form an opinion! Visualizations are not only for experts, feel free to decide if a visualization is good or bad regardless of what other people think!
Figure out how you would make the visualization better!

30. Example (Bad)

31. Example (Bad)

35. (Not the Worst…)

36. Example (Good)
Visualizing MBTA Data

37. Example (Suggested Fixes)

38. Questions?

39. Event-Based Programming
Loop
The notion of an infinite loop checking for events
GUI, network, hardware devices, etc.
Idle Func
Functions that are called repeatedly
Setup Func
Functions that are called once
Animation
How would you do it?

40. Processing Intro to Processing Example Program: bouncing balls
Go through the website
Difference between Processing and Java
Danger of using Java code
Processing.js
Example Program: bouncing balls