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