fundamentals techniques selected...
Post on 09-Aug-2020
0 Views
Preview:
TRANSCRIPT
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
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
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
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
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
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
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
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
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
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
top related