Rolleston learning outcomes, school quality and equity in vietnam sept2014
US Foreign Aid Submitted in partial fulfillment of Information Visualization MPS Degree Rob...
-
Upload
felicity-everley -
Category
Documents
-
view
216 -
download
0
Transcript of US Foreign Aid Submitted in partial fulfillment of Information Visualization MPS Degree Rob...
US Foreign Aid
Submitted in partial fulfillment ofInformation Visualization MPS Degree
Rob Rolleston2013-12-14
Rob Rolleston 2
Agenda
• Developing and reasoning a data visualization design concept – A framework by Andy Kirk
2013-12-13
1. Establish the visualization's purpose and identify key factors
2. Acquire, prepare and explore your data
3. Establish editorial focus with your subject matter
4. Conceive your visualization designData Representation, Color, Interactivity & Animation, Annotation, Arrangement
5. Construct your data visualization solution
Rob Rolleston 3
(1) ESTABLISH THE VISUALIZATION'S PURPOSE AND IDENTIFY KEY FACTORS
2013-12-13
Rob Rolleston 4
Purpose
2013-12-13
“This is your last chance. After this, there is no turning back. You take the blue pill – the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill – you stay in Wonderland, and I show you how deep the rabbit hole goes. Remember, all I'm offering is the truth – nothing more.” Morpheus to Neo, “the matrix” 1999
Rob Rolleston 5
MVIS 5003 Residency 3
2013-12-13
One (1) Credit/Three and a half (3.5) daysDuring Residency 3, students present their final thesis project as detailed in the Information Visualization Project course description as well as a portfolio of work from the program that demonstrates an understanding of visualization and an ability to create a variety of thoughtfully-designed and compelling visual narratives.
Rob Rolleston 6
MVIS 5003 Residency 3
2013-12-13
One (1) Credit/Three and a half (3.5) daysDuring Residency 3, students present their final thesis project as detailed in the Information Visualization Project course description as well as a portfolio of work from the program that demonstrates an understanding of visualization and an ability to create a variety of thoughtfully-designed and compelling visual narratives.
http://rob.rolleston.lunarpages.net/MICA/
Rob Rolleston 7
MVIS 5003 Residency 3
2013-12-13
• Demonstrate Overall Mastery– End-to-End– Wear all 8 hats in the
• Design is more important than Data & Analysis… for me• Complete Learning of new technology set in a web-based application
– Animations– Connected components
• filters, brushing, etc..
Rob Rolleston 8
Purpose
• Goals• Intent = Tone + Function• Key factors• Source of initial idea
2013-12-13
9
Project Goals
• Help users understand the history of US Aid to Foreign Countries Absolute amounts to each county Relative amounts of Economic vs. Military Aid 1946-2011 , inflation adjusted dollars
• Learn about the changing aid to different Geographic Region(s) or Countries
• See changes over time Move through time to see the ebb and flow of the amount of aid provided to
different regions or countries
• Potential Uses Teaching Aid Interactive graphic to accompany a journalism article
2013-10-30Rob Rolleston MICA InfoViz
Rob Rolleston MICA InfoViz 10
Intent = Tone + Function
• Present the data with an emphasis on precision and understanding – vs. feeling.
• Allow the user to find their own insights – vs. presentation
of key findings.
2013-10-30
Explanatory (Show
Stories)Expl
orat
ory
(Fin
d St
orie
s)
Analytic / Pragmatic
Abstract / Emotive
Tone
Function
Rob Rolleston 11
Key Factors• The brief ? • Pressures ?
• Audience size? • Audience type? • Setting?
• Format?• Technical?
• Subject matter? • Resolution? • Frequency?
• Rules? • People?
Open, self definedDue Dec-13th, Interim reviews in MVIZ 5701 & 5702
Wider worldAlready interested in the topic, desire to learn moreRemote, independent access
InteractiveSinge Web page; HTML5/CSS3/JavaScript
Broad sweep across time, geographies, and amountsHierarchy of Countries within Regions; Single YearOne-off
Landing page + at least 2 working interactive elementsIndividual; Wear all 8 hats…
2013-12-13
Rob Rolleston 12
Birth of an Idea
• MVIS 5501 Principles of visual Interface Design (May/June 2013):
– Choose a manageably sized data set on a topic of interest and design an interface to display and interact with the data in a way that helps explain it.Document this design as series of wireframes with a similar level of fidelity as those from the last assignment.
2013-12-13
http://ejfox.github.io/GoodData/
Rob Rolleston 13
Initial Concept
2013-12-13
Rob Rolleston 14
Iterations…
2013-12-13
Rob Rolleston 15
Interactions
2013-12-13
Rob Rolleston 16
Iterations…
2013-12-13
Rob Rolleston 17
Iterations…
2013-12-13
Rob Rolleston 18
Inspiration and More Iteration
2013-12-13
http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html
http://bost.ocks.org/mike/nations/
Rob Rolleston 19
(2) ACQUIRE, PREPARE AND EXPLORE YOUR DATA
2013-12-13
Rob Rolleston MICA InfoViz 20
Acquisition, Exploration, and Preparation
2013-10-30
Year (1946-2011)
204
Coun
trie
s
Source: data.gov/Foreign-Commerce-and-Aid
•Combine to single source• Tag Economic & Military
•Add Regions
•Convert to JS Object
•JS Calculations• Total, Ratio, Visibility, …
•Exploratory in Spotfire• Proof that stories exist
https://explore.data.gov/Foreign-Commerce-and-Aid/U-S-Overseas-Loans-and-Grants-Greenbook-/5gah-bvex
Rob Rolleston 21
Data: Acquisition• 2 excel sheets, each with Aid to country by year
– Military Aid– Economic Aid (with sub-projects)
• “ These data are U.S economic and military assistance by country from 1946 to 2011. This is the authoritative data set of U.S. foreign assistance. The data set is used to report U.S foreign assistance to Congress as required by the Foreign Assistance Act, Section 634”
• Physicality– Amounts in Constant Dollars (2011) [not using absolute Dollars]– Data type: Tabular – Ordered – Quantitative
• (200 countries) X (66 yrs.) X (2 types) → ~27,00 data points
2013-12-13
Rob Rolleston 22
Data : Prepare
• Consolidate econ projects– Excel: ‘consolidate’ function
2013-12-13
Sum Projects to Country Total
• Join – Single sheet with both military & economic aid
Rob Rolleston 23
Data: Explore• Convert from ‘wide’ to ‘’long’
– “R” reshape2 library
Allows for “Year” to be Treated as an attribute and used as a filter
• Explore– “Spotfire”
• Summary Statistics• Histograms
2013-12-13
Rob Rolleston 24
Histogram: log10(total) M, no 0
totalM0Log10 (20 bins)
(Row
Cou
nt)
-4.50 -4.00 -3.50 -3.00 -2.50 -2.00 -1.50 -1.00 -0.50 0.00 0.50 1.00 1.50 2.00 2.50 3.00 3.50 4.00 4.50
1600
1400
1200
1000
800
600
400
200
0
Histogram: log10(military) $M, no 0
miltM0Log10 (20 bins)
(Ro
w C
ou
nt)
-4.50 -4.00 -3.50 -3.00 -2.50 -2.00 -1.50 -1.00 -0.50 0.00 0.50 1.00 1.50 2.00 2.50 3.00 3.50 4.00 4.50
1600
1400
1200
1000
800
600
400
200
0
Data Summary
2013-12-13
Economic (n=7722)
Military (n=5212) $M(w/ Aid) $M (all)
Min -139 -139
Max 13,600 13,600
Avg 139 54
Med 2 0
StdDev 629 397
More economic than military aid, in both numbers and amounts with large ranges
Log10 scale
Log10 scale
$M(w/ Aid) $M (all)
Min -400 -400
Max 32,700 32,700
Avg 187 107
Med 27 1
StdDev 758 582
Rob Rolleston 25
Histogram: ratio of Econ:Milt
ratio_no_0 (200 bins)
(Row
Cou
nt)
4500
4000
3500
3000
2500
2000
1500
1000
500
0
Histogram: log10(economic) $M, no 0
econM0Log10 (20 bins)
(Row
Count)
-4.50 -4.00 -3.50 -3.00 -2.50 -2.00 -1.50 -1.00 -0.50 0.00 0.50 1.00 1.50 2.00 2.50 3.00 3.50 4.00 4.50
1600
1400
1200
1000
800
600
400
200
0
Calculated Data : Total & Ratio
2013-12-13
Total (n=8323)
Ratio of Economic to Military (n=8315)Filter All
Min -1 -13
Max 1 1.2
Avg -.6 -.6
Med -.98 -.98
StdDev .66 .68
Most aid is 100% Economic (4732) with some MilitaryA few (688) have pure Military Aid
Log10 scale
$M(w/ Aid) $M (all)
Min -400 -400
Max 32,700 32,700
Avg 261 161
Med 29 2
StdDev 999 795
100% Economic 100% Military
Rob Rolleston 26
Data: Explore
2013-12-13
Rob Rolleston 27
Data: Explore
2013-12-13
1946
1958
1984
2011
Challenge: Too many countries for color or shapes
Rob Rolleston 28
Data : Enhance• Group Countries by “Region”
– Finer granularity than “Continent”
– Better indicator or socio-political affiliations
• e.g. Eastern vs. Western Europe
2013-12-13
http://www.scientificamerican.com/article.cfm?id=babys-life-mothers-schooling
http://www.nationsonline.org/oneworld/countries_of_the_world.htm#top
http://www.who.int/quantifying_ehimpacts/global/ebdcountgroup/en/
Rob Rolleston 29
Data: Add Region Attribute• Original list had 237 Countries in 55
regions– Join with 204 countries– Reduce to 16 Regions
• Later reduced to 13
2013-12-13
Rob Rolleston 30
(3) ESTABLISH EDITORIAL FOCUS WITH YOUR SUBJECT MATTER
2013-12-13
Rob Rolleston 31
Editorial Focus
• Exploratory Analysis to find insights
2013-12-13
1946 2000
Eastern and Western Europe
Rob Rolleston 32
Editorial Focus: Audience / Story• Students of history, economics, political science
2013-12-13
Imagine you are a student in a class about US History or Foreign Relations, Economics etc. Or you have just read an article in a newspaper like the New York Times, or a national magazine like Time, Newsweek, or The Atlantic. Perhaps the Visualization is an interactive web page which the professor has referenced, or is referenced in your text or accompanies the article you have just read.
It is assumed you have some knowledge of 20th century global history, and how the political and economic alliances of the US have changed over time. You are interested in learning more about the ebb and flow of aid over time across geographies.
Text from User Testing:
Rob Rolleston 33
Editorial Challenge
• Help user to find stories in 27,000 data points– Geography
• Countries (204)• Regions (12)
– Time• Covers years 1946-2011
– Types of Aid • Economic & Military
• Interactive visualization– “Overview, zoom & filter, details-on-demand”
• http://mi2.org/resources/data-visualization-ben-schneiderman.pdf
2013-12-13
Rob Rolleston 34
(4) CONCEIVE YOUR VISUALIZATION DESIGNData RepresentationColorInteractivity and AnimationAnnotationArrangement
2013-12-13
Rob Rolleston 35
(4) CONCEIVE YOUR VISUALIZATION DESIGN
Data Representation
2013-12-13
Rob Rolleston 36
Data Representation
• Amount of Aid– Economic– Military
• Mixture of Aid– Econ vs. Milit
• Year– Given Year– Changes over Time
• Geopolitical Regions– Region / Country
2013-12-13
Data Attributes Mark Attributes
• Visibility• Spatial Location
– X– Y
• Size• Color
– Opacity, Stroke
• Tooltip / Annotation• Motion
?
Rob Rolleston 37
(4) CONCEIVE YOUR VISUALIZATION DESIGN
Color
2013-12-13
Rob Rolleston 38
Color
• Tone: Analytic/Pragmatic– Overall Neutral Color them
• Show Common Grouping– Countries within Regions– ~12 Categorical Colors
• Interaction affordability– Hover state
2013-12-13
“Avoiding catastrophe becomes the first principle in bringing color to information: Above all, do no harm.” — Envisioning Information, Edward Tufte, Graphics Press, 1990
“Get it right in black and white.” — Maureen stone et. al.
http://colorbrewer2.org/
https://github.com/mbostock/d3/wiki/Ordinal-Scales
Rob Rolleston 39
(4) CONCEIVE YOUR VISUALIZATION DESIGN
Interactivity & Animation
2013-12-13
Rob Rolleston 40
Interaction
Selection / Filter• Total Time Scale Overview
– Total Funding for each year– Stacked Line Chart– “Pick” a year to view
• Regions / Countries Filter– Three State tree check boxes
Information• Introductory Information
– Show / Hide
• County Names– On/off checkbox
• Tooltips– Aid details for a country
• About– Technical details & Credits
• Author
2013-12-13
Rob Rolleston 41
Animation
• Changes over timee.g. x-y position of country– Manual
• Click– Pick a year
• Slide / Drag– Move through years
• Increment / Decrement– Single Step
– Automatic• Play, auto step thru time
– Forward / Backward
2013-12-13
Funding Mix
TotalFunding
Funding Mix
TotalFunding
Funding Mix
TotalFunding
Year 1
Year 2
Year 3
Rob Rolleston 42
(4) CONCEIVE YOUR VISUALIZATION DESIGN
Annotation
2013-12-13
Rob Rolleston 43
AnnotationInformation• Information Box
– Expander• Keep above the fold• Collapse to focus on data
– Legend• Aid to understanding
– Color & Size• Authentication of data
• Labels– Axis Labels
• Current Year– Large background element in
main chart
Reference• Minor, inconspicuous
elements– Text links in footer
• About– Modal Pop up– Who, What, When, Why, How
• Author– Link to other work
2013-12-13
Rob Rolleston 44
(4) CONCEIVE YOUR VISUALIZATION DESIGN
Arrangement
2013-12-13
Rob Rolleston 45
Arrangement: Major Elements
• Header– Title– Information Box
• Section– Scatter Chart– Time Selection– Region / Country filter– Legend
• Footer– Author & About
2013-12-13
Slightly apart
Closely Aligned
Near
Minor
Collapsible
Authoritative
Rob Rolleston 46
Arrangement: Iterative Process
• Initial HTML Skeleton– Header, Section, Footer
• Components; simple HTML + JavaScript + CSS– Scatter Chart: Bubble Chart– Time Selection: Stacked Area + Brush– Region / Country Filter: Tree Check Boxes
• Integration of components into HTML Skeleton• User Testing
– InfoViz Cohort & Naïve Users
2013-12-13
Rob Rolleston 47
(5) CONSTRUCT YOUR DATA VISUALIZATION SOLUTION
2013-12-13
Rob Rolleston MICA InfoViz 48
Technology• Data Gathering & Cleaning
– Excel• Proof of Concept
– TIBCO Spotfire• Interactive Web Site: HTML5, CSS3, JavaScript
– Structure / Layout: Bootstrap• Easy to use grid structure
– Data Display & Interaction• D3.js, jQuery
– Selection / Filtering• jQWidgets
2013-10-30
Rob Rolleston 49
Construction
2013-12-13
Structure
+
Scatter Plot
+
Slider& Chart
+
Integration
+
Filter
+
Annotation
204 CirclesColor = function{region }Size = function{yrs of aid }Location = function { total, mix }Visibility = function { amount != 0 in year, region/country filter}
Select Year
Filter Countries
Rob Rolleston 50
Demo
2013-12-13
Rob Rolleston MICA InfoViz 51
To Do List:
2013-10-30
• Map as Interactive Element
– Pick Region to control filtering
• Interpolation / Zero Values
– Grow size & Opacity
• Handlebar bike bag
• Track over Time
– Connected Line
• Mark Counties to enable tracking
– Opacity & Stoke
• Backcountry X-Country Skis
• Stories behind negative values
Wish
Rob Rolleston 52
Questions?… in a moment
but first…
2013-12-13
Rob Rolleston 532013-12-13
Thank You