Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "US Foreign Aid Submitted in partial fulfillment of Information Visualization MPS Degree Rob Rolleston 2013-12-14."— Presentation transcript:

1 US Foreign Aid Submitted in partial fulfillment of Information Visualization MPS Degree Rob Rolleston

2 Agenda Developing and reasoning a data visualization design concept – A framework by Andy Kirk Rob 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 Rob Rolleston3

4 Purpose Rob 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 Rob 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 Rob 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.

7 MVIS 5003 Residency Rob 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 Rob 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 , 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 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 Rob 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… Rob 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 Rob Rolleston12

13 Initial Concept Rob Rolleston13

14 Iterations… Rob Rolleston14

15 Interactions Rob Rolleston15

16 Iterations… Rob Rolleston16

17 Iterations… Rob Rolleston17

18 Inspiration and More Iteration Rob Rolleston18

19 (2) ACQUIRE, PREPARE AND EXPLORE YOUR DATA Rob Rolleston19

20 Acquisition, Exploration, and Preparation Rob Rolleston MICA InfoViz Year ( ) 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 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 Rob Rolleston21

22 Data : Prepare Consolidate econ projects – Excel: ‘consolidate’ function Rob 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 Rob Rolleston23

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

25 Calculated Data : Total & Ratio Rob Rolleston25 Total (n=8323) Ratio of Economic to Military (n=8315) FilterAll Min-13 Max11.2 Avg-.6 Med-.98 StdDev 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 Avg Med292 StdDev % Economic100% Military

26 Data: Explore Rob Rolleston26

27 Data: Explore Rob Rolleston 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 Rob Rolleston28

29 Data: Add Region Attribute Original list had 237 Countries in 55 regions – Join with 204 countries – Reduce to 16 Regions Later reduced to Rob Rolleston29

30 (3) ESTABLISH EDITORIAL FOCUS WITH YOUR SUBJECT MATTER Rob Rolleston30

31 Editorial Focus Exploratory Analysis to find insights Rob Rolleston Eastern and Western Europe

32 Editorial Focus: Audience / Story Students of history, economics, political science Rob 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 – Types of Aid Economic & Military Interactive visualization – “Overview, zoom & filter, details-on-demand” Rob Rolleston33

34 (4) CONCEIVE YOUR VISUALIZATION DESIGN Data Representation Color Interactivity and Animation Annotation Arrangement Rob Rolleston34

35 (4) CONCEIVE YOUR VISUALIZATION DESIGN Data Representation Rob 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 Rob Rolleston36 Data AttributesMark Attributes Visibility Spatial Location – X – Y Size Color – Opacity, Stroke Tooltip / Annotation Motion ?

37 (4) CONCEIVE YOUR VISUALIZATION DESIGN Color Rob Rolleston37

38 Color Tone: Analytic/Pragmatic – Overall Neutral Color them Show Common Grouping – Countries within Regions – ~12 Categorical Colors Interaction affordability – Hover state Rob 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. https://github.com/mbostock/d3/wiki/Ordinal-Scales

39 (4) CONCEIVE YOUR VISUALIZATION DESIGN Interactivity & Animation Rob 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 Rob 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 Rob 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 Rob 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 Rob Rolleston43

44 (4) CONCEIVE YOUR VISUALIZATION DESIGN Arrangement Rob Rolleston44

45 Arrangement: Major Elements Header – Title – Information Box Section – Scatter Chart – Time Selection – Region / Country filter – Legend Footer – Author & About Rob 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 Rob Rolleston46

47 (5) CONSTRUCT YOUR DATA VISUALIZATION SOLUTION Rob 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 Rob Rolleston MICA InfoViz48

49 Construction Rob 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 Rob Rolleston50

51 To Do List: Rob 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… Rob Rolleston52

53 Rob Rolleston53 Thank You


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

Similar presentations


Ads by Google