1. US Foreign Aid Submitted in partial fulfillment of Information Visualization MPS Degree Rob Rolleston 2013-12-14

2. Agenda Developing and reasoning a data visualization design concept – A framework by Andy Kirk 2013-12-13Rob Rolleston2 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 design Data Representation, Color, Interactivity & Animation, Annotation, Arrangement 4. Conceive your visualization design Data Representation, Color, Interactivity & Animation, Annotation, Arrangement 5. Construct your data visualization solution

3. (1) ESTABLISH THE VISUALIZATION'S PURPOSE AND IDENTIFY KEY FACTORS 2013-12-13Rob Rolleston3

4. Purpose 2013-12-13Rob Rolleston4 “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

5. MVIS 5003 Residency 3 2013-12-13Rob Rolleston5 One (1) Credit/Three and a half (3.5) days During 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.

6. MVIS 5003 Residency 3 2013-12-13Rob Rolleston6 One (1) Credit/Three and a half (3.5) days During 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/

7. MVIS 5003 Residency 3 2013-12-13Rob Rolleston7 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..

8. Purpose Goals Intent = Tone + Function Key factors Source of initial idea 2013-12-13Rob Rolleston8

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-309Rob 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-3010Rob Rolleston MICA InfoViz Explanatory (Show Stories) Exploratory (Find Stories) Analytic / Pragmatic Abstract / Emotive Tone Function

11. Key Factors The brief ? Pressures ? Audience size? Audience type? Setting? Format? Technical? Subject matter? Resolution? Frequency? Rules? People? Open, self defined Due Dec-13 th, Interim reviews in MVIZ 5701 & 5702 Wider world Already interested in the topic, desire to learn more Remote, independent access Interactive Singe Web page; HTML5/CSS3/JavaScript Broad sweep across time, geographies, and amounts Hierarchy of Countries within Regions; Single Year One-off Landing page + at least 2 working interactive elements Individual; Wear all 8 hats… 2013-12-13Rob Rolleston11

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-13Rob Rolleston12 http://ejfox.github.io/GoodData/

13. Initial Concept 2013-12-13Rob Rolleston13

14. Iterations… 2013-12-13Rob Rolleston14

15. Interactions 2013-12-13Rob Rolleston15

16. Iterations… 2013-12-13Rob Rolleston16

17. Iterations… 2013-12-13Rob Rolleston17

18. Inspiration and More Iteration 2013-12-13Rob Rolleston18 http://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html http://bost.ocks.org/mike/nations/

19. (2) ACQUIRE, PREPARE AND EXPLORE YOUR DATA 2013-12-13Rob Rolleston19

20. Acquisition, Exploration, and Preparation 2013-10-3020Rob Rolleston MICA InfoViz Year (1946-2011) 204 Countries 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

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-13Rob Rolleston21

22. Data : Prepare Consolidate econ projects – Excel: ‘consolidate’ function 2013-12-13Rob Rolleston22 Sum Projects to Country Total Join – Single sheet with both military & economic aid

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-13Rob Rolleston23

24. Data Summary 2013-12-13Rob Rolleston24 Economic (n=7722) Military (n=5212) $M(w/ Aid)$M (all) Min-139 Max13,600 Avg13954 Med20 StdDev629397 More economic than military aid, in both numbers and amounts with large ranges Log10 scale $M(w/ Aid)$M (all) Min-400 Max32,700 Avg187107 Med271 StdDev758582

25. Calculated Data : Total & Ratio 2013-12-13Rob Rolleston25 Total (n=8323) Ratio of Economic to Military (n=8315) FilterAll Min-13 Max11.2 Avg-.6 Med-.98 StdDev.66.68 Most aid is 100% Economic (4732) with some Military A few (688) have pure Military Aid Log10 scale $M(w/ Aid)$M (all) Min-400 Max32,700 Avg261161 Med292 StdDev999795 100% Economic100% Military

26. Data: Explore 2013-12-13Rob Rolleston26

27. Data: Explore 2013-12-13Rob Rolleston27 1946 1958 1984 2011 Challenge: Too many countries for color or shapes

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-13Rob Rolleston28 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/

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-13Rob Rolleston29

30. (3) ESTABLISH EDITORIAL FOCUS WITH YOUR SUBJECT MATTER 2013-12-13Rob Rolleston30

31. Editorial Focus Exploratory Analysis to find insights 2013-12-13Rob Rolleston31 1946 2000 Eastern and Western Europe

32. Editorial Focus: Audience / Story Students of history, economics, political science 2013-12-13Rob Rolleston32 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:

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-13Rob Rolleston33

34. (4) CONCEIVE YOUR VISUALIZATION DESIGN Data Representation Color Interactivity and Animation Annotation Arrangement 2013-12-13Rob Rolleston34

35. (4) CONCEIVE YOUR VISUALIZATION DESIGN Data Representation 2013-12-13Rob Rolleston35

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-13Rob Rolleston36 Data AttributesMark Attributes Visibility Spatial Location – X – Y Size Color – Opacity, Stroke Tooltip / Annotation Motion ?

37. (4) CONCEIVE YOUR VISUALIZATION DESIGN Color 2013-12-13Rob Rolleston37

38. Color Tone: Analytic/Pragmatic – Overall Neutral Color them Show Common Grouping – Countries within Regions – ~12 Categorical Colors Interaction affordability – Hover state 2013-12-13Rob Rolleston38 “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

39. (4) CONCEIVE YOUR VISUALIZATION DESIGN Interactivity & Animation 2013-12-13Rob Rolleston39

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-13Rob Rolleston40

41. Animation Changes over time e.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-13Rob Rolleston41 Funding MixTotal Funding Funding Mix Total Funding Funding Mix Total Funding Year 1 Year 2 Year 3

42. (4) CONCEIVE YOUR VISUALIZATION DESIGN Annotation 2013-12-13Rob Rolleston42

43. Annotation Information 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-13Rob Rolleston43

44. (4) CONCEIVE YOUR VISUALIZATION DESIGN Arrangement 2013-12-13Rob Rolleston44

45. Arrangement: Major Elements Header – Title – Information Box Section – Scatter Chart – Time Selection – Region / Country filter – Legend Footer – Author & About 2013-12-13Rob Rolleston45 Slightly apart Closely Aligned Near Minor Collapsible Authoritative

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-13Rob Rolleston46

47. (5) CONSTRUCT YOUR DATA VISUALIZATION SOLUTION 2013-12-13Rob Rolleston47

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-30Rob Rolleston MICA InfoViz48

49. Construction 2013-12-13Rob Rolleston49 Structure + Scatter Plot + Slider& Chart + Integration + Filter + Annotation 204 Circles Color = function{region } Size = function{yrs of aid } Location = function { total, mix } Visibility = function { amount != 0 in year, region/country filter} Select Year Filter Countries

50. Demo 2013-12-13Rob Rolleston50

51. To Do List: 2013-10-30Rob Rolleston MICA InfoViz51 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

52. Questions? … in a moment but first… 2013-12-13Rob Rolleston52

53. 2013-12-13Rob Rolleston53 Thank You