Lecture 01: Introduction September 05, 2017 COMP 177 Visualization

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

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…

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.

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

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

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?

Exploration: Anscombe's quartet

Anscombe's quartet

Exposition: Visual Communication

Visual Communication “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

Data Journalism Data is the story Data augments the story https://www.bloomberg.com/graphics/2015-dangerous-jobs/ Data augments the story http://www.sfchronicle.com/airbnb-impact-san-francisco-2015/#1 Sensationalizing the Data http://graphics.wsj.com/3d-nasdaq/

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

Pattern Recognition Why do things “pop out”?

Pattern Recognition Why do things “pop out”?

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?

Gestalt Psychology Law of Proximity

Gestalt Psychology Law of Similarity

Color Theory

Perceptual Theory

Exposition and Exploration: Thought Externalization

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

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

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”?

Example: Arithmetic Slide courtesy of Pat Hanrahan

Example: Arithmetic Slide courtesy of Pat Hanrahan

(Addendum) Counting in Arabic Numerals

General Information Course website: Teams of 2 Syllabus Languages: http://www.cs.tufts.edu/comp/177 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

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!

Example (Bad)

Example (Bad)

(Not the Worst…)

Example (Good) Visualizing MBTA Data http://mbtaviz.github.io/

Example (Suggested Fixes) http://peltiertech.com/WordPress/use-bar-charts-not-pies/

Questions?

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?

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