![Page 1: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/1.jpg)
Involving the ViewerInteraction
February 21, 2012 – Michael Porath
Tuesday, February 21, 12
Where Are We?
Fundamentals Techniques SelectedTopicsData
ImagePerception
Color
InteractionStorytelling
Types of visualizations
?
Assignment 1Working with data
Assignment 2Exploratory
data analysis
Assignment 3Interactive
VisualizationFinal Project
InteractiveVisualization Project
Tuesday, February 21, 12
Where Are We?
Fundamentals Techniques SelectedTopicsData
ImagePerception
Color
InteractionStorytelling
Types of visualizations
?
You arehere
Assignment 1Working with data
Assignment 2Exploratory
data analysis
Assignment 3Interactive
VisualizationFinal Project
InteractiveVisualization Project
Tuesday, February 21, 12
What’s Interaction?
DataAnalysis
GraphicDesign
StaticVisualization
Tuesday, February 21, 12
![Page 2: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/2.jpg)
What’s Interaction?
DataAnalysis
GraphicDesign
InteractionDesign
StaticVisualization
Tuesday, February 21, 12
What’s Interaction?
DataAnalysis
GraphicDesign
InteractionDesign
StaticVisualization
ExploratoryData Analysis
Tuesday, February 21, 12
What’s Interaction?
DataAnalysis
GraphicDesign
InteractionDesign
StaticVisualization
ExploratoryData Analysis
?
Tuesday, February 21, 12
What’s Interaction?
Interactive DataVisualization
DataAnalysis
GraphicDesign
InteractionDesign
StaticVisualization
ExploratoryData Analysis
?
Tuesday, February 21, 12
![Page 3: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/3.jpg)
Why Interaction?
ScaleStorytelling
Exploration Learning
• Too many data points• Too many di!erent dimensions
When is (static) representation not enough?
Tuesday, February 21, 12
User Intent
Tuesday, February 21, 12
7 CategoriesBased on User Intent
Select Explore Recon!gure
Encode Abstract /Elaborate
Filter Connect
Yi et al, 2007
Tuesday, February 21, 12
1. SelectMark something interesting
Tuesday, February 21, 12
![Page 4: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/4.jpg)
ExampleUS Presidents Job Approval Ratings
Tuesday, February 21, 12
ExampleUS Presidents Job Approval Ratings
http://www.clusterize.com/comparisons/5-us-presidents-job-approval-ratings
Pick a detail from a larger dataset to keep track of it.
Tuesday, February 21, 12
2. ExploreShow something different
Tuesday, February 21, 12
ExampleNY Times: Mapping America
San Francisco New York Cityhttp://projects.nytimes.com/census/2010/explorer
Overcome limitations of display size
Tuesday, February 21, 12
![Page 5: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/5.jpg)
3. ReconfigureShow a different arrangement
Tuesday, February 21, 12
ExampleOk Cupid Matrix plot (from last week’s lecture)
Other Examples
• Sorting and rearranging columns
• Changing attributes in scatter plot
Tuesday, February 21, 12
4. EncodeShow a different representation
Tuesday, February 21, 12
ExampleD3.js stacked / grouped bars
http://mbostock.github.com/d3/ex/stack.html
Change visual/retinal variables
• Colors• Sizes• Orientation
• Font• Shape
Tuesday, February 21, 12
![Page 6: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/6.jpg)
5. Abstract / ElaborateShow more or less detail
Tuesday, February 21, 12
ExampleWorld Best Country (Newsweek Study)
http://www.thedailybeast.com/newsweek/2010/08/15/interactive-infographic-of-the-worlds-best-countries.html
Tuesday, February 21, 12
6. FilterShow something conditionally
Tuesday, February 21, 12
ExampleSan Francisco Crimespotting
http://sanfrancisco.crimespotting.org
Change the set of data items presented based on some condition
Tuesday, February 21, 12
![Page 7: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/7.jpg)
ExampleKeystroke filtering in ZipDecode
http://benfry.com/zipdecode/
Tuesday, February 21, 12
ExampleKeystroke filtering in NameVoyager
http://www.babynamewizard.com/voyager
Tuesday, February 21, 12
7. ConnectShow related items
Tuesday, February 21, 12
ExampleOECD Regional eXplorer
http://stats.oecd.org/OECDregionalstatistics
Selecting or highlighting in one case generates
highlighting in anotherMultiple views of same data
Tuesday, February 21, 12
![Page 8: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/8.jpg)
Interaction vs RepresentationStatic representation, that is.
Tuesday, February 21, 12
Analysis – CommmunicationInteraction has an exploratory aspect
Communication
Exploratory Explanatory
Analysis
SelectExplore
Recon"gure
Encode
Abstract/ElaborateFilter
Connect
Tuesday, February 21, 12
Recap
Tuesday, February 21, 12
Show & Tell
Tuesday, February 21, 12
![Page 9: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/9.jpg)
Tuesday, February 21, 12
AnnouncementAssignment 3
Task Create an (small) interactive information visualization based on what we’ve learned so far Deliverable Interactive visualization and 2 page writeup (500 words)Due Tuesday March 6, 5:00PMGroup sizes Alone or in groups of 2
• Find a (small) data set you’re passionate about.• Sketch out interaction upfront and include in your writeup.• You can use any tool / framework you like
More information on the class blog
Tuesday, February 21, 12
Announcement 2Lab next week
Javascript / Visualization frameworks Q&A
Tuesday, February 21, 12
Announcement 2Lab next week
Javascript / Visualization frameworks Q&A
Send Questions to mike@ischool by
Saturday night
Tuesday, February 21, 12
![Page 10: Fundamentals Techniques Selected Interactionblogs.ischool.berkeley.edu/i247s12/files/2012/02/06_Interaction1.pdf · 2/6/2012 · Exploration Learning • Too many data points •](https://reader034.vdocuments.us/reader034/viewer/2022050517/5fa18b2748327606a7551067/html5/thumbnails/10.jpg)
Announcement 2Lab next week
Javascript / Visualization frameworks Q&A
Send Questions to mike@ischool by
Saturday nightAttend o#ce hours!
Tuesday, February 21, 12
Geoff McGheeOnline Journalist
Tuesday, February 21, 12