Storytelling with Data: Perspectives from Journalism and Academia

Presentation at Tableau Software, Fremont, WA, in July 2012.

Transcript

1. Geoff McGhee, Bill Lane Center for the American West Presentation to Tableau Software July 30, 2012 Telling Stories with Data and Interactivity: Perspectives from Journalism and Academia
2. Research and Teaching Center at Stanford University Creative Director for Media and Communications Bill Lane Center for the American West, Stanford University 2010-Present
3. • Environment and Resources • Economy and Political Science • History and Culture of the West Research and Teaching Center at Stanford University
4. • Environment and Resources • Economy and Political Science • History and Culture of the West Research and Teaching Center at Stanford University
5. • Environment and Resources • Economy and Political Science • History and Culture of the West Research and Teaching Center at Stanford University
6. • Environment and Resources • Economy and Political Science • History and Culture of the West • Data visualization and multimedia for journalism, scholarship, outreach Research and Teaching Center at Stanford University
7. Background
8. A Decade in Infographics and Multimedia ABC News, 1999-2000 The New York Times, 2000-2008
9. A Decade in Infographics and Multimedia
10. A Decade in Infographics and Multimedia
11. A Decade in Infographics and Multimedia
12. A Decade in Infographics and Multimedia
13. A Decade in Infographics and Multimedia
14. A Decade in Infographics and Multimedia
15. A Decade in Infographics and Multimedia
16. A Decade in Infographics and Multimedia
17. A Decade in Infographics and Multimedia
18. Study Year at Stanford 2009-2010 John S. Knight Journalism Fellowship
19. • Databases and database management • Web application development • Visualization theory and techniques • Geographic information systems • Statistics Back to School 2009-2010 John S. Knight Journalism Fellowship Study Year at Stanford
20. 20-odd people in journalism, academia, research and art Interviews About Data Visualization
21. Video Documentary
22. Video Documentary datajournalism.stanford.edu
23. Video Documentary How are journalists using data vis? Question:
24. “Amanda studied stats in college and she's brought both a little bit more of a focus on data to the department and also just sort of an amazing ability to process data.” New Players Data Visualization in Journalism Budget Forecasts, Compared with Reality (2009) All of Inflation’s Little Parts (2009)
25. “We have some open positions right now, and I would love for those positions to be geared towards somebody that had that skill set: ‘Here’s what the data is and the story is, here’s how we’d want to shape the story based on this data.’” Re-tooling Data Visualization in Journalism Seeds of Recovery (2008) Stimulus Tracker (2008)
26. Collaboration “What you see is this incredibly fluid flow of ideas, and to me that’s really what's exciting. Maybe 15 years ago, there were these very distinct silos and people in completely different fields had no idea–everyone was working toward the same thing but today there's starting to fuse, it’s fun, it’s competitive, well look around all the time, where’s the next amazing thing going to come from?” Data Visualization in Journalism Map of the Market (1998) Timeflow, an analytical timeline for journalists (2010)
27. Excitement “I think that there’s a sense that data is something more like a medium, something that can be used to tell stories, and to do all of the things that a medium can do, to delight and inspire...” Data Visualization in Journalism
31. Communication Medium?
32. Learning to Tell Stories “You can do beautiful things with computers and lots of data that look very, very nice, and are almost completely incomprehensible.”
33. How do we tell stories with data?
34. “We are very interested in how visualizations are being taken up in mass media, particularly in journalism, so we simply collected as many examples of that as we could.” Identifying Best Practices
36. !"#$" %&'()*&+),&-#./"'0$&1,&-# 2-($0" !"#"$%&'()*+,' -&&.*"*'/(01"23(4(!"2 5"1*%*%.&'/(5.6*'1 7,.8(93"1* 9.:%;()*1%2 ),%/'()3.8 7%,:(4(<%/'.(4(-&%:"*%.& =6*">,%63%&#()3.*(4()2,"63();1''& 9.&6%6*'&*(<%6?",(5,"*@.1: 51.#1'66(A"1(4(B%:'>"1 C93';D,%6*C(51.#1'666(B1";D'1 9,.6'EF26 7'"*?1'(G%6*%&;*%.& 93"1";*'1(G%1';*%.& !.*%.& -?/%. H..:%&# 7":%,%"1(I>J';*6(K>?*(6*%,,(;?*6L <%'8%&#(-&#,' <%'8'1(K9":'1"L(!.*%.& 9.&*%&?%*+(=/%*%&# I>J';*(9.&*%&?%*+ -&%:"*'/(B1"&6%*%.&6 M"&/.:(-;;'66 F6'1(G%1';*'/(5"*3 N%&'"1 O.P'1(O%#3,%#3*%&#(4(G'*"%,6 7%,*'1%&#(4()',';*%.&(4()'"1;3 Q"P%#"*%.&(A?**.&6 <'1+(N%:%*'/(R&*'1";*%P%*+ =S2,%;%*(R&6*1?;*%.& B";%*(B?*.1%", )*%:?,"*%&#(G'@"?,*(<%'86 9"2*%.&6(4(O'"/,%&'6 -&&.*"*%.&6 -;;.:2"&+%&#(-1*%;,' !?,*%E!'66"#%&# 9.::'&*(M'2%*%*%.& R&*1./?;*.1+(B'S* )?::"1+(4()+&*3'6%6 -1;3%*';*?1'("&/(T?6*%;'(KA1..D,+&(91%:'(A,.;D6L 9.,?:>%"(F&%PU()RGN V E E E E E E V V V E E E V V E V E E V V T.3&()&.8W6(93"1*(.@(G'"*36(@1.:(93.,'1" =/8"1/(B?@*' V E E E E E E E E E V E E V E E E E E 5.,%*%;%"&6(->?6'(*3'%1(71''E:"%,%&#(51%P%,'#'6(>'@.1'(=,';* =/8"1/(B?@*' V E E E E E E E E E V E E E V V E E V 7..*>",,(G1"8%&#6 <%6?",(9.:2,'S%*+ V E E E E E E E E E V E E E E E E E E 5'/'6*1%"&6(91.66%&#(*3'()*1''* <%6?",(9.:2,'S%*+ V E E E E E E E V E V E E E E E E E E B3'(9,%:"*'(-#'&/" X"63%&#*.&(5.6* V E E E E E E E V V E E V E V E E V E E E V V E V E V V V V V E E V E V E E V E X3'&(G%/(Y.?1(9.?&*+Z6(T.>6(G%6"22'"1[ X"63%&#*.&(5.6* V E E E E E E E V V E E V E E E E E E E E E E E V E V V V V V V E V E V E E V E -;"/":'*1%;6(O.?6'(51%;'(R&/'S 7%&"&;%",(B%:'6 E V E E E E E V V E E E V E E E E E E E E E E E V E V V V V E E E V E E E E V E A"&D6W(="1&%&#6\(O.8(9.:2'&6"*%.&(M',"*'6(*.(5'1@.1:" 7%&"&;%",(B%:'6 E V E E E E E E V V E E E E V E E E E E E E V E V E E V V V V E E V E E E E V E G'"/,+(I@@'&6%P'\(B",%>"&(-**";D6(%&(5"D%6*"& 7%&"&;%",(B%:'6 E V E E E E E E V V E E V E E E E V E E E E E E E V E V V V E V E V V E V E V E 0G5(!.P'6(>+()';*.1 7%&"&;%",(B%:'6 E V E E E E E E V E E E V E E E E E E E E E E E V E V V V V V E E E E E E E V E F](=;.&.:%;(G"*" 7%&"&;%",(B%:'6 E V E E E E E E V E E E V E E E E E E E E E E E V E V V E V V E E V E E E E V E A?/#'*(^_`_\(M'";*%.&(@1.:("1.?&/(*3'(F] 0?"1/%"& E V E E E E E E V E E E V E E E E V E E E E E E V E V V E V E E E V V E V E E E 7.1:?,"(I&'(^_`_\(G1%P'1Z6(M"&D%&#6 0?"1/%"& E V E E E E E E V E E E V E E E E V E E E E E E V E V V E V V E E V E E E E E E N%#3*%&#(F2(O"/1%"&Z6(X",, 0?"1/%"& E V E E E E E V E E E E V E E E E E E E E E E E V E E V E V V E E V V E E E V E !"22%&#(O+/1.2.8'1(O.*62.*6(";1.66(*3'(F] 0?"1/%"& E V E E E E E E V E E E V E E E E E E E E E V E V E V V E V V E E V V E V E E E !.6;.8(!'*1.(A.:>6\(%&*'1";*%P'(:"2 0?"1/%"& E V E E E E E E V E E E V E E E E E E E E E E E V E E V E V V E E V V E V E E E B3'(X.1,/(=;.&.:+(B?1&6(*3'(9.1&'1 0?"1/%"& E V E E E E E E V E E E E E E E E E E E E E E E V E V V E V E E E V E E E E E E !%&&'6.*"(=:2,.+:'&*(=S2,.1'1 !%&&'6.*"(5?>,%;(M"/%. E V E E E E E E E E E V V E V E E E E E E V V E V E V V E V V E E V V V E E V E -(!"2(.@(I,+:2%;(!'/",6 Q'8(Y.1D(B%:'6 E V E E E E E E V V E E E E E E E E E E E V V E V E V V E V V V V V E E E E E E -,,(.@(R&@,"*%.&Z6(N%**,'(5"1*6 Q'8(Y.1D(B%:'6 E V E E E E E V V E E E V E E E V E E E E V V E V E V V E V E E E V V E E E V E 5"*36(*.(*3'(B.2(.@(*3'(O.:'(M?&(93"1*6 Q'8(Y.1D(B%:'6 E V E E E E E E V E E E V E V E E E E E E E E E V E V V E V V E V V V E E E E E B3'(=>>("&/(7,.8(.@(!.P%'6\(A.S(I@@%;'(M';'%2*6(`abc(d( Q'8(Y.1D(B%:'6 E V E E E E E E V V E E V E E E E E E V E E E E V E V V E V V E E V V E E E E E B3'(T.>,'66(M"*'(@.1(5'.2,'(N%D'(Y.? Q'8(Y.1D(B%:'6 E V E E E E E E V E V E V E E E E E E E E V V E V E V V E V V E E V E E E E E E -/P'1*%6':'&*\(A?6 F&%*'/(B';3&.,.#+ E V E E E E E E E E V E E V V E V E V E -/P'1*%6':'&*\(O',%;.2*'1 F&%*'/(B';3&.,.#+ E V E E E E E E E E V E E V V E V E V E -&",+$%&#(I>":"Z6();3'/?,' X"63%&#*.&(5.6* E V E E E E E E E V E E V E E E E V E E E E E E V E V V V E V E E E E E E E V E I6;"16(^_`_\(B3'(A'6*(5%;*?1'(Q.:%&''6 0?"1/%"& E E V E E E E V V E V E V E E E E E E E E E E E V E V V E V E E E V V E V E E E B3'(9.&6?:'1("&/(M'*"%,(51%;'(R&/%;'6(6%&;'(^__c 0?"1/%"& E E V E E E E V V V E E V E V E E E E E E V E E V E V V E V V E E V V V V E V E F](<.*%&#(R&*'&*%.&6 0?"1/%"& E E V E E E E V V V E E V E V E E E E E E V E E V E V V V V V E E V V E V E V E 9.:2"1%6.&(.@(A'"1(!"1D'*6 Q'8(Y.1D(B%:'6 E E V E E E E E V V E E V E V E E E E V E V V E V E V V E V V E V V V E E E E E 7";'6(.@(*3'(G'"/ Q'8(Y.1D(B%:'6 E E V E E E E E V E E E V E E E E E E E E E E E V E V V V V V E V V V E E E V E O.8(-:'1%;"&6()2'&/(B3'%1(G"+ Q'8(Y.1D(B%:'6 E E V E E E E V E E E E V E V E E E E E E V V E V E V V V E V E V V V V E E E E !%;3',,'(I>":"Z6(7":%,+(B1'' Q'8(Y.1D(B%:'6 E E V E E E E E V E E E V E E E E E E E E V V E V E V V V V V E V V V V V V V E Q'*7,%S(M'&*",6 Q'8(Y.1D(B%:'6 E E V E E E E E V V E E V E E E E E E E E E E E V E V V V E V E V V V E E E E E )*'1.%/6(.1(Q.*e(*3'(5?16?%*(%6(I& Q'8(Y.1D(B%:'6 E E V E E E E E V E E V V V E E V V E V V E E <"&;.?P'1Z6(I,+:2%;(<'&?' Q'8(Y.1D(B%:'6 E E V E E E E V E E E V V E V E V E V V E V V E V E V V V E V E E V V E E E E E I&(*3'(!"2\(7%P'(!"J.1(Q.1*3(].1'"&(51%6.&(9":26 X"63%&#*.&(5.6* E E V E E E E V E E E V V E E E E E E E E E E E V E V V V V V E E V E E V E V E )23'1'6(.@(R&@,?'&;'\(B3'(A?63(9":2"%#&(5%.&''16 X"63%&#*.&(5.6* E E V E E E E V E E E V V E E E E E E E E E E E V E V V E E V E V V V V E E V E -(<%6?",(0?%/'(*.(*3'(7%&"&;%",(91%6%6 7,.8%&#(G"*" E E E V E E E E E E E E V V V E E E E E =;.&.:%;(!',*/.8&(.@(^__bE^__a 7,.8%&#(G"*" E E E V E E E E E E E E V V V E V E E E X3'1'(G%/(-,,(*3'(!.&'+(0.[ 7,.8%&#(G"*" E E E V E E E V E E E E E V V V E V V E E N%@'(9+;,'(.@("(A''*,'(*31.?#3("(Y'"1 =/8"1/(B?@*' E E E E V E E V V V E E E E V V E E V E E E E E E E !;9,.?/Z6(!"D%&#(9.:%;6 );.**(!;9,.?/ E E E E V E E V E E V V V V V V V V E E V V V V V V V V -@#3"&%6*"&\(A'3%&/(*3'(71.&*(N%&' 7%&"&;%",(B%:'6 E E E E E V E V V V V E V E V E E V E E E E E E E V E V V E V E E V V E E E V E B.+.*"(B%:',%&'\(-(9.:2"&+(O%6*.1+ 7%&"&;%",(B%:'6 E E E E E V E E V V E E V E E E E E E E E E E E V E V V E V V E E V E V E E E E 0"2:%&/'1(O?:"&(G'P',.2:'&* 0"2:%&/'1 E E E E E V E V E V V V V E V E V V E V E V V E E V V V V V V V V V V E V V E V ="1*3f?"D'6\(X3+(B3'+(O"22'& 0?"1/%"& E E E E E V E V E E E V V E V E V V E E E V V E E V V V V V V E V V V E V V V E R1"&Z6(Q?;,'"1(51.#1"::' 0?"1/%"& E E E E E V E V E E E V V E V E V V E V E V V E E V V V V V V V V V V E V V V E )3"?&(X3%*'Z6(G.?>,'(!;B8%6* 0?"1/%"& E E E E E V E E V V E E V V E E E V E E E V E E E V E E V V E E E V V E V E E E B.+.*"Z6()*%;D(-;;','1"*.1(51.>,': 0?"1/%"& E E E E E V E E V E E V V E V E V V E E E V V E E V V E V V V E V V V E V E E E -,2%&'()D%%&#e(71.:(B';3&%;",(B?1&6(*.(B?;D6("&/()2''/ Q'8(Y.1D(B%:'6 E E E E E V E V E V V E V E E E E V E E E E V E E V E E V V E E E V V E E V V E A?/#'*(7.1';"6*6(P6U(M'",%*+ Q'8(Y.1D(B%:'6 E E E E E V E V V V V E V E V E E E E E E V V E E V V V V V V V V V V E V V V E O.8(*3'(0.P'1&:'&*(G'",*(8%*3(5"6*(M';'66%.&6 Q'8(Y.1D(B%:'6 E E E E E V E E V V E E V E E V E E E E E E E E E V V V E V E E V V V V V V E E !";(I1%'&*"*%.&(<%/'. -22,' E E E E E E V V E E E V V E V E V V E V V V V E E V E E E V E E V G',*"(-%12,"&'()"@'*+(<%/'. G',*" E E E E E E V V E E E V V V E E V V E V V V E E E V E E E V V E V B3'()*.1+(.@()*?@@ )*.1+(.@()*?@@(51.J';* E E E E E E V V V E V E V V V V E V E E E V V E E V V V V V V <%1#%&(-:'1%;"(-%12,"&'()"@'*+(<%/'. <%1#%&(-:'1%;" E E E E E E V E E E E V V V V V V V V V V E V E E V E E E V V E E 3"'')4&#4 5#,"$)0,&6&,7 8)$$),&6".2,$(0,($" %&'()*.8)$$),&6" 9$:"$&#4 ;$)#'&,&-#.!(&:)#0" <&4=*&4=,&#4 %&'()*.2,$(0,($&#4 > ? @ A Fig. 7. Design space analysis of narrative visualization. Columns indicate recurring design elements and selected regions highlight patterns in the data. Region (1) shows clusters of ordering strategies that correspond to distinct genres of visual narration. Region (2) highlights the consistency of interactive designs used by visualizations. Region (3) shows the under-utilization of strategies to engage the user in the interactive functionality. Region (4) shows the under-utilization of common storytelling techniques across narrative visualizations. Segal and Heer, 2010 Analysis of Vis in Media
37. %&'()*&+),&-#./"'0$&1,&-# 2-($0" !"#"$%&'()*+,' -&&.*"*'/(01"23(4(!"2 5"1*%*%.&'/(5.6*'1 7,.8(93"1* 9.:%;()*1%2 ),%/'()3.8 7%,:(4(<%/'.(4(-&%:"*%.& =6*">,%63%&#()3.*(4()2,"63();1 9.&6%6*'&*(<%6?",(5,"*@.1: 51.#1'66(A"1(4(B%:'>"1 C93';D,%6*C(51.#1'666(B1";D'1 -1;3%*';*?1'("&/(T?6*%;'(KA1..D,+&(91%:'(A,.;D6L 9.,?:>%"(F&%PU()RGN V E E E E E E V T.3&()&.8W6(93"1*(.@(G'"*36(@1.:(93.,'1" =/8"1/(B?@*' V E E E E E E 5.,%*%;%"&6(->?6'(*3'%1(71''E:"%,%&#(51%P%,'#'6(>'@.1'(=,';* =/8"1/(B?@*' V E E E E E E 7..*>",,(G1"8%&#6 <%6?",(9.:2,'S%*+ V E E E E E E 5'/'6*1%"&6(91.66%&#(*3'()*1''* <%6?",(9.:2,'S%*+ V E E E E E E B3'(9,%:"*'(-#'&/" X"63%&#*.&(5.6* V E E E E E E E V V E X3'&(G%/(Y.?1(9.?&*+Z6(T.>6(G%6"22'"1[ X"63%&#*.&(5.6* V E E E E E E E V V E -;"/":'*1%;6(O.?6'(51%;'(R&/'S 7%&"&;%",(B%:'6 E V E E E E E V V E E A"&D6W(="1&%&#6\(O.8(9.:2'&6"*%.&(M',"*'6(*.(5'1@.1:" 7%&"&;%",(B%:'6 E V E E E E E E V V E G'"/,+(I@@'&6%P'\(B",%>"&(-**";D6(%&(5"D%6*"& 7%&"&;%",(B%:'6 E V E E E E E E V V E 0G5(!.P'6(>+()';*.1 7%&"&;%",(B%:'6 E V E E E E E E V E E F](=;.&.:%;(G"*" 7%&"&;%",(B%:'6 E V E E E E E E V E E A?/#'*(^_`_\(M'";*%.&(@1.:("1.?&/(*3'(F] 0?"1/%"& E V E E E E E E V E E 7.1:?,"(I&'(^_`_\(G1%P'1Z6(M"&D%&#6 0?"1/%"& E V E E E E E E V E E N%#3*%&#(F2(O"/1%"&Z6(X",, 0?"1/%"& E V E E E E E V E E E !"22%&#(O+/1.2.8'1(O.*62.*6(";1.66(*3'(F] 0?"1/%"& E V E E E E E E V E E !.6;.8(!'*1.(A.:>6\(%&*'1";*%P'(:"2 0?"1/%"& E V E E E E E E V E E B3'(X.1,/(=;.&.:+(B?1&6(*3'(9.1&'1 0?"1/%"& E V E E E E E E V E E !%&&'6.*"(=:2,.+:'&*(=S2,.1'1 !%&&'6.*"(5?>,%;(M"/%. E V E E E E E E E E E -(!"2(.@(I,+:2%;(!'/",6 Q'8(Y.1D(B%:'6 E V E E E E E E V V E -,,(.@(R&@,"*%.&Z6(N%**,'(5"1*6 Q'8(Y.1D(B%:'6 E V E E E E E V V E E 5"*36(*.(*3'(B.2(.@(*3'(O.:'(M?&(93"1*6 Q'8(Y.1D(B%:'6 E V E E E E E E V E E B3'(=>>("&/(7,.8(.@(!.P%'6\(A.S(I@@%;'(M';'%2*6(`abc(d( Q'8(Y.1D(B%:'6 E V E E E E E E V V E B3'(T.>,'66(M"*'(@.1(5'.2,'(N%D'(Y.? Q'8(Y.1D(B%:'6 E V E E E E E E V E V -/P'1*%6':'&*\(A?6 F&%*'/(B';3&.,.#+ E V E E E E E -/P'1*%6':'&*\(O',%;.2*'1 F&%*'/(B';3&.,.#+ E V E E E E E -&",+$%&#(I>":"Z6();3'/?,' X"63%&#*.&(5.6* E V E E E E E E E V E I6;"16(^_`_\(B3'(A'6*(5%;*?1'(Q.:%&''6 0?"1/%"& E E V E E E E V V E V B3'(9.&6?:'1("&/(M'*"%,(51%;'(R&/%;'6(6%&;'(^__c 0?"1/%"& E E V E E E E V V V E F](<.*%&#(R&*'&*%.&6 0?"1/%"& E E V E E E E V V V E 9.:2"1%6.&(.@(A'"1(!"1D'*6 Q'8(Y.1D(B%:'6 E E V E E E E E V V E Analysis of Vis in Media Segal and Heer, 2010 vis.stanford.edu/papers/narrative
38. Frame of Reference: Journalism
42. STANFORD = TOOLS FOR VISUALIZATION TRANSITION
44. “Members of a digitally savvy humanists argue it is time to stop looking for inspiration in the next political or philosophical "ism" and start exploring how technology is changing our understanding of the liberal arts. The last frontier is about method, they say, using powerful technologies and vast stores of digitized materials that previous humanities scholars did not have.” –The New York Times
48. spatialhistory.stanford.edu
50. litlab.stanford.edu
51. Our work
52. • Story of Friedrich von Egloffstein, 19th century German aristocrat, explorer and cartographer • Part of the first group of white explorers to visit the Grand Canyon in 1858 • Considered a master cartographer, but a terrible landscape artist - “driven mad” by the majesty of the terrain • New evidence suggests this estimation is unfair Unraveling a Historical Mystery “Reassessing the Works of a Maligned Explorer and Artist,” Harper’s Magazine Interactive Storytelling Sequence and Headline Writing as Signposts
53. (Example: Harper’s map)
54. (Example: Harper’s map)
63. • Recapitulate conventional understanding of story • “Tell, Don’t Show:” reinforce points through language in texts • Then present alternative case, laying out evidence bit by bit
64. • Wanted to examine growth of newspapers across the US • See how it related to movement of the western frontier • Visualize the decline of American newspapers • Explore changes in subject matter, American attitudes and interests over time • Create a structure on which to build stories Exploring Historical Newspapers “Journalism’s Voyage West” and “Mapping Texts” Creating a Scaffold for Further Exploration Interactive Storytelling
68. Probabilistic Topic Decomposition of an Eighteenth-Century American Newspaper David J. Newman, Sharon Block, University of California, Irvine
69. Streamgraph example by Lee Byron, 2008
84. ruralwest.stanford.edu/newspapers
87. Rural West Initiative
95. THE EMPEROR BURIED GERMANYS RULER ENTOMBED WITH THE FATHERS Royalty ofMany Different Countries Witness the Ceremonies A Grand Pageant and Distinguished Honor to the Dead Kaiser Hit funeral of Emperor William took place at Brlln on the Itith Inst Ibo weather was tirain extremely cold and the troops wh were rungect four deep along the louta taken By the funeral lorteje wore heavy cloaks The temperature had no apparent effect upon the people and hundreds o thou ¬ sands o spectators occupied the space behind tb soldiers while every window along the Uuter den Linden was crowd ¬ ed All the heuses on the thorough re were covered with mourning and blbited flrgs with black drapery At e street crossings massive pillars surmounted by Pnuslan eagles had been erected The lamp posts were covered with crape an I at every fifty paies tuere were largo candelabra bearing darning crea ceou Thn toot uL UeLfuneral pio cesslun presented a miwtiinposiag is pect entirely in keeping with the deep snrro and reverence ot the people Thn centre of the road wan ntrewn with gravel and fir branches In Paruerplatz large stones entwined nil laurel were hung TheDuule burg gate &#060; vaa craped anil there was large arch in front of It upon which v re the words God lilts You Ihe funeral service took place In th athedral In accordance with the pro ¬ gramme Emperor Frederick wai no present the weatuer being too revere t lit him exposing himself Thusei ice beg n Kith a soft prelude in tb organ duri ng which tbe mourners be gun to assemble Dr Korgcl the cour chaplain read passages troin the DOtb Psalm and verses 15 an 1 2H of the 14th chapter of John The chnir sung I Know that my UoJeemcr Llvpth Pas sages were then read from iaalu OCR “Quality”
96. OCR “Quality”
97. Natural Language Processing: Interface Sketches
98. Natural Language Processing: Interface Sketches
99. Natural Language Processing: Interface Sketches
104. • Main interactive map as scaffold for larger story • Both linear and random-access navigation • Natural language processing visualization is more exploratory than explanatory • Need to consider better interfaces for explanation and narrrative storytelling
105. • Texas staggering out of epic drought in 2011 • Facing question: how to prepare for the future • Sought to compare major Texas cities water rates and use to the rest of the country Water Rates and Usage in the U.S. “Comparing the Cost of Water,” Texas Tribune Interactive Storytelling NPR User Paths for Narrative Sequences
112. • Linear narrative draws reader through sequence • Heavy use of text annotation and headline writing • Smooth transitions help eye follow change • Not a complete data set; rate info was missing for many cities • More a sampling than exhaustive survey – makes statistical analysis more difficult
113. Second Example: Brushing/rollover for global wests map; quick filtering Interactive Storytelling Quick Filtering to Browse a Set of Items
119. • Worked with researchers studying the Sacramento-San Joaquin Delta • 40% of California’s runoff passes through it • Environment radically altered over 160 years • How would you restore it? First you need to know what it looked like • Let users explore the evidence, learn about research process A Primer in Historical Ecology “Envisioning California’s Delta as It Was,” KQED Drawing Inspiration from Traditional Media Formats… Like Books Interactive Storytelling
120. Ended up using pagination to let users navigate from screen to screen Combination of narrative text with map “posed” to appropriate zoom level, center, and base map Text area with images has primacy on the page, rather than being in a tiny popup window but sometimes the map is more or less important Meant to be like an e-book Last page allows for free exploration Final version
121. Ended up using pagination to let users navigate from screen to screen Combination of narrative text with map “posed” to appropriate zoom level, center, and base map Text area with images has primacy on the page, rather than being in a tiny popup window but sometimes the map is more or less important Meant to be like an e-book Last page allows for free exploration Final version
129. • Pagination reduces need for complex menu system, enables more creative space on each “page” • Core of interactive feature is multi- layered web map instance • Rather than forcing all annotations and media into floating bubble windows, • Interacting with map is possible on most pages; final page allows for free exploration
130. Next Steps?
131. Environmental Dashboards • Hybrid of dashboard and atlas, lays out infographics, maps and data visualizations on western environmental topics • Contextual information, analysis and narrative text is important part of layout
132. • “Responsive” HTML design allows for multipurpose embedding • Consistent UI style and interaction elements • Draws data through public APIs and from curated material EcoWest: Environmental Data Clearinghouse “Containerizing” Vital Data and Maps
133. • Leverages Mozilla Foundation’s Popcorn.js library and “Maker” application • All page elements on a common timeline – text, html video, infographics etc • Want to plug in different visualization APIs (D3, Tableau Public, Fusion Tables, others) and sync with video time code – while preserving interactivity! DataPlayer Combining Video Narratives with Data in Native HTML
134. Thanks! Get in touch: gmcghee@stanford.edu, @mcgeoff Bill Lane Center for the American West http://west.stanford.edu Journalism in the Age of Data http://datajournalism.stanford.edu