Journalism, Communication and Life in the Age of Data · Telling Stories with Data Visualization...

Telling Stories with Data VisualizationJournalism, Communication and Life in the Age of DataGeoff McGhee @mcgeoffPresentation to Data Science Day IIIBerlin, 7 December, 2012

The Power of Data Visualization

Martin Wattenberg and Fernanda Viegas (hint.fm/wind)

NYTimes Obama Arrows

Then....?

The New York Times

• Bypass language centers, go direct to the visual cortex

• Leverage ability to recognize patterns, visual sense-making

• Powerful graphics chips enable animation, live data processing possible

Using the Eye-Brain Connection

Map of New Brainland by Unit Seven via Flickr

Everyday Use of Data to Make DecisionsThe Power of Data Visualization

Maps, GPS with live traffic

Donation Dashboard

Farecast search results

Greatschools.org

Zillow, Trulia, real estate search engines

SF Park

= We’re learning things that used to be unknown, unknowable or impractical to know.

Twitter visualizations Google Public Data Explorer

But also larger insights about society ...

Politifact Obameter U.S. State Department: “Opinion Space”

Google N-Grams Baby Name Voyager

… and new insights about the past.

Gapminder: Human Development Over Time Immigration Explorer

Categories of Data Vis

• Data that reveals previously unknown insights into patterns of life

• Visualization as a way to “throw things on the wall” and examine

• Things that used to be unknown, unknowable, or impractical to know

• Less about visualization than the dataGoogle N-Gram Viewer

Categories of Data Visualization

The Sketchbook: Making Sense of New Information

“Tourists vs. Locals,” Eric Fischer, (2010)http://www.flickr.com/photos/walkingsf/sets/72157624209158632/

Visualization as MirrorVisualizing New Information

“Flickr Flow,” Fernanda Viégas and Martin Wattenberg (2009)http://hint.fm/projects/flickr/

Visualization as RemixVisualization as MirrorVisualizing New Information

Visualization as MirrorVisualizing New Information

http://mlb.mlb.com

“GameDay,” Major League Baseball (2011)

http://blog.blprnt.com/blog/blprnt/goodmorning

“Good Morning,” Jer Thorp (2009)

Visualizing New Information

• Data that reveals previously unknown insights into patterns of life

• Visualization as a way to “throw things on the wall” and examine

• Things that used to be unknown, unknowable, or impractical to know

• Less about visualization than the dataGoogle N-Gram Viewer

The Sketchbook: Making Sense of New Information

• Innovations in graphic display can change how we experience an idea

• Less about data than the visualization

• “Now I see it”

The “Remix”: Familiar Information, Through a New Lens

“Here and There,” Berg Design (2009)

http://berglondon.com/projects/hat/

Visualization as Remix

“If San Francisco Crime Was Elevation,” Doug McCune (2010)http://dougmccune.com/blog/2010/06/05/if-san-francisco-crime-was-elevation/

“River Maps,” Daniel Huffman (2011)

http://somethingaboutmaps.wordpress.com/river-maps/

“River Maps,” Daniel Huffman (2011)

http://somethingaboutmaps.wordpress.com/river-maps/

http://hint.fm/projects/etc

“Flickr Flow,” Fernanda Viégas and Martin Wattenberg (2009)“Dimensions,” BBC and Berg Design (2010)http://howbigreally.com

http://hint.fm/projects/etc

“Flickr Flow,” Fernanda Viégas and Martin Wattenberg (2009)“Map of the Market,” Martin Wattenberg/Smart Money (1998)http://www.smartmoney.com/map-of-the-market/

The New York Times (2009)http://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html

• Innovations in graphic display can change how we experience an idea

• Less about data than the visualization

• “Now I see it”

The “Remix”: Familiar Information, Through a New Lens

An Environment for Exploring Data

• Tool for individual or collective exploration• Can show same data in multiple

dimensions, like time/space• Search, filter, drill down to details• Ideally, mark and share discoveries

within the toolAnalyzing OCR Quality of Newspapers

Visualization as a Database Front-End

Visualization as MirrorEnvironment for Exploration

http://projects.nytimes.com/census/2010/explorer

“Mapping America: Every City, Every Block,” The New York Times (2010)

http://workshop.chromeexperiments.com/projects/armsglobe/

Environment for Exploration

“Small Arms and Ammunition,” Google Creative Arts (2012)

An Environment for Exploring Data

• Tool for individual or collective exploration• Can show same data in multiple

dimensions, like time/space• Search, filter, drill down to details• Ideally, mark and share discoveries

within the toolAnalyzing OCR Quality of Newspapers

Visualization as a Database Front-End

But what about storytelling?Explanatory reporting?

Research and Teaching Center at Stanford University

A Decade in Infographics and Multimedia

Study at Stanford

2009-2010 Knight Journalism Fellowship

Study at Stanford

• Databases and database management• Web application development• Visualization theory and techniques• Geographic information systems• Statistics

Back to School

20-plus people in journalism, academia, research and art

Interviews About Data Visualization

datajournalism.stanford.edu

Video Documentary

Chapter 1 Video Here

Video: Journalism in the Age of Data, Chapter 1http://datajournalism.stanford.edu

How are journalists using data vis?Question:

Video Documentary

“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)

“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.’”

Seeds of Recovery (2008)

Stimulus Tracker (2008)

Re-tooling

“We've changed the focus of our team to concentrate more on database journalism.”

Re-tooling

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...”

But...

Communication Medium?

Learning toTell Stories

“You can do beautiful things with computers and lots of data that look very, very nice, and are almost completely incomprehensible.”

How do we tell stories with data?

“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.”

Data StorytellingStory Formats: Learning BestPractices

Visualization Description Source Magazi

Annota

raph /

ideo /

/ Spla

ual Pla

"Check

istinct

Motion

Continuity E

ontinuity

Random

Linear

hting /

Filteri

ation B

ited I

Explic

t Tuto

ting D

Captions

eadlin

Annota

panyin

Multi-

Repititio

Architecture and Justice (Brooklyn Crime Blocks) Columbia Univ. SIDL + - - - - - - + + + - - - + + - + - - + +John SnowWs Chart of Deaths from Cholera Edward Tufte + - - - - - - - - - + - - + - - - - -Politicians Abuse their Free-mailing Privileges before Elect Edward Tufte + - - - - - - - - - + - - - + + - - +Football Drawings Visual Complexity + - - - - - - - - - + - - - - - - - -Pedestrians Crossing the Street Visual Complexity + - - - - - - - + - + - - - - - - - -The Climate Agenda Washington Post + - - - - - - - + + - - + - + - - + - - - + + - + - + + + + + - - + - + - - + -When Did Your County's Jobs Disappear? Washington Post + - - - - - - - + + - - + - - - - - - - - - - - + - + + + + + + - + - + - - + -Acadametrics House Price Index Financial Times - + - - - - - + + - - - + - - - - - - - - - - - + - + + + + - - - + - - - - + -BanksW Earnings: How Compensation Relates to Performa Financial Times - + - - - - - - + + - - - - + - - - - - - - + - + - - + + + + - - + - - - - + -Deadly Offensive: Taliban Attacks in Pakistan Financial Times - + - - - - - - + + - - + - - - - + - - - - - - - + - + + + - + - + + - + - + -GDP Moves by Sector Financial Times - + - - - - - - + - - - + - - - - - - - - - - - + - + + + + + - - - - - - - + -UK Economic Data Financial Times - + - - - - - - + - - - + - - - - - - - - - - - + - + + - + + - - + - - - - + -Budget 2010: Reaction from around the UK Guardian - + - - - - - - + - - - + - - - - + - - - - - - + - + + - + - - - + + - + - - -Formula One 2010: Driver's Rankings Guardian - + - - - - - - + - - - + - - - - + - - - - - - + - + + - + + - - + - - - - - -Lighting Up Hadrian's Wall Guardian - + - - - - - + - - - - + - - - - - - - - - - - + - - + - + + - - + + - - - + -Mapping Hydropower Hotspots across the UK Guardian - + - - - - - - + - - - + - - - - - - - - - + - + - + + - + + - - + + - + - - -Moscow Metro Bombs: interactive map Guardian - + - - - - - - + - - - + - - - - - - - - - - - + - - + - + + - - + + - + - - -The World Economy Turns the Corner Guardian - + - - - - - - + - - - - - - - - - - - - - - - + - + + - + - - - + - - - - - -Minnesota Employment Explorer Minnesota Public Radio - + - - - - - - - - - + + - + - - - - - - + + - + - + + - + + - - + + + - - + -A Map of Olympic Medals New York Times - + - - - - - - + + - - - - - - - - - - - + + - + - + + - + + + + + - - - - - -All of Inflation's Little Parts New York Times - + - - - - - + + - - - + - - - + - - - - + + - + - + + - + - - - + + - - - + -Paths to the Top of the Home Run Charts New York Times - + - - - - - - + - - - + - + - - - - - - - - - + - + + - + + - + + + - - - - -The Ebb and Flow of Movies: Box Office Receipts 1986 d New York Times - + - - - - - - + + - - + - - - - - - + - - - - + - + + - + + - - + + - - - - -The Jobless Rate for People Like You New York Times - + - - - - - - + - + - + - - - - - - - - + + - + - + + - + + - - + - - - - - -Advertisement: Bus United Technology - + - - - - - - - - + - - + + - + - + -Advertisement: Helicopter United Technology - + - - - - - - - - + - - + + - + - + -Analyzing Obama's Schedule Washington Post - + - - - - - - - + - - + - - - - + - - - - - - + - + + + - + - - - - - - - + -Oscars 2010: The Best Picture Nominees Guardian - - + - - - - + + - + - + - - - - - - - - - - - + - + + - + - - - + + - + - - -The Consumer and Retail Price Indices since 2006 Guardian - - + - - - - + + + - - + - + - - - - - - + - - + - + + - + + - - + + + + - + -UK Voting Intentions Guardian - - + - - - - + + + - - + - + - - - - - - + - - + - + + + + + - - + + - + - + -Comparison of Bear Markets New York Times - - + - - - - - + + - - + - + - - - - + - + + - + - + + - + + - + + + - - - - -Faces of the Dead New York Times - - + - - - - - + - - - + - - - - - - - - - - - + - + + + + + - + + + - - - + -How Americans Spend Their Day New York Times - - + - - - - + - - - - + - + - - - - - - + + - + - + + + - + - + + + + - - - -Michelle Obama's Family Tree New York Times - - + - - - - - + - - - + - - - - - - - - + + - + - + + + + + - + + + + + + + -NetFlix Rentals New York Times - - + - - - - - + + - - + - - - - - - - - - - - + - + + + - + - + + + - - - - -Steroids or Not, the Pursuit is On New York Times - - + - - - - - + - - + + + - - + + - + + - -Vancouver's Olympic Venue New York Times - - + - - - - + - - - + + - + - + - + + - + + - + - + + + - + - - + + - - - - -On the Map: Five Major North Korean Prison Camps Washington Post - - + - - - - + - - - + + - - - - - - - - - - - + - + + + + + - - + - - + - + -Spheres of Influence: The Bush Campaign Pioneers Washington Post - - + - - - - + - - - + + - - - - - - - - - - - + - + + - - + - + + + + - - + -A Visual Guide to the Financial Crisis Flowing Data - - - + - - - - - - - - + + + - - - - -Economic Meltdown of 2008-2009 Flowing Data - - - + - - - - - - - - + + + - + - - -Where Did All the Money Go? Flowing Data - - - + - - - + - - - - - + + + - + + - -Life Cycle of a Beetle through a Year Edward Tufte - - - - + - - + + + - - - - + + - - + - - - - - - -McCloud's Making Comics Scott McCloud - - - - + - - + - - + + + + + + + + - - + + + + + + + +Afghanistan: Behind the Front Line Financial Times - - - - - + - + + + + - + - + - - + - - - - - - - + - + + - + - - + + - - - + -Toyota Timeline: A Company History Financial Times - - - - - + - - + + - - + - - - - - - - - - - - + - + + - + + - - + - + - - - -Gapminder Human Development Gapminder - - - - - + - + - + + + + - + - + + - + - + + - - + + + + + + + + + + - + + - +Earthquakes: Why They Happen Guardian - - - - - + - + - - - + + - + - + + - - - + + - - + + + + + + - + + + - + + + -Iran's Nuclear Programme Guardian - - - - - + - + - - - + + - + - + + - + - + + - - + + + + + + + + + + - + + + -Shaun White's Double McTwist Guardian - - - - - + - - + + - - + + - - - + - - - + - - - + - - + + - - - + + - + - - -Toyota's Stick Accelerator Problem Guardian - - - - - + - - + - - + + - + - + + - - - + + - - + + - + + + - + + + - + - - -Alpine Skiing, From Technical Turns to Tucks and Speed New York Times - - - - - + - + - + + - + - - - - + - - - - + - - + - - + + - - - + + - - + + -Budget Forecasts vs. Reality New York Times - - - - - + - + + + + - + - + - - - - - - + + - - + + + + + + + + + + - + + + -How the Government Dealt with Past Recessions New York Times - - - - - + - - + + - - + - - + - - - - - - - - - + + + - + - - + + + + + + - -Mac Orientation Video Apple - - - - - - + + - - - + + - + - + + - + + + + - - + - - - + - - +Delta Airplane Safety Video Delta - - - - - - + + - - - + + + - - + + - + + + - - - + - - - + + - +The Story of Stuff Story of Stuff Project - - - - - - + + + - + - + + + + - + - - - + + - - + + + + + +Virgin America Airplane Safety Video Virgin America - - - - - - + - - - - + + + + + + + + + + - + - - + - - - + + - -

MessagingInteractivity

Narrative StructureVisual NarrativeOrderingTransition GuidanceHighlightingVisual Structuring

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 orderingstrategies 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 strategiesto engage the user in the interactive functionality. Region (4) shows the under-utilization of common storytelling techniques across narrative visualizations.

Segal and Heer, 2010

Data StorytellingAnalysis of Visin Media

Data Storytelling

Annota

raph /

ideo /

/ Spla

ual Pla

"Check

istinct

Motion

Continuity E

ontinuity

Random

Linear

hting /

Filteri

ation B

ited I

Explic

t Tuto

ting D

Captions

eadlin

Annota

panyin

Multi-

Repititio

Architecture and Justice (Brooklyn Crime Blocks) Columbia Univ. SIDL + - - - - - - + + + - - - + + - + - - + +John SnowWs Chart of Deaths from Cholera Edward Tufte + - - - - - - - - - + - - + - - - - -Politicians Abuse their Free-mailing Privileges before Elect Edward Tufte + - - - - - - - - - + - - - + + - - +Football Drawings Visual Complexity + - - - - - - - - - + - - - - - - - -Pedestrians Crossing the Street Visual Complexity + - - - - - - - + - + - - - - - - - -The Climate Agenda Washington Post + - - - - - - - + + - - + - + - - + - - - + + - + - + + + + + - - + - + - - + -When Did Your County's Jobs Disappear? Washington Post + - - - - - - - + + - - + - - - - - - - - - - - + - + + + + + + - + - + - - + -Acadametrics House Price Index Financial Times - + - - - - - + + - - - + - - - - - - - - - - - + - + + + + - - - + - - - - + -BanksW Earnings: How Compensation Relates to Performa Financial Times - + - - - - - - + + - - - - + - - - - - - - + - + - - + + + + - - + - - - - + -Deadly Offensive: Taliban Attacks in Pakistan Financial Times - + - - - - - - + + - - + - - - - + - - - - - - - + - + + + - + - + + - + - + -GDP Moves by Sector Financial Times - + - - - - - - + - - - + - - - - - - - - - - - + - + + + + + - - - - - - - + -UK Economic Data Financial Times - + - - - - - - + - - - + - - - - - - - - - - - + - + + - + + - - + - - - - + -Budget 2010: Reaction from around the UK Guardian - + - - - - - - + - - - + - - - - + - - - - - - + - + + - + - - - + + - + - - -Formula One 2010: Driver's Rankings Guardian - + - - - - - - + - - - + - - - - + - - - - - - + - + + - + + - - + - - - - - -Lighting Up Hadrian's Wall Guardian - + - - - - - + - - - - + - - - - - - - - - - - + - - + - + + - - + + - - - + -Mapping Hydropower Hotspots across the UK Guardian - + - - - - - - + - - - + - - - - - - - - - + - + - + + - + + - - + + - + - - -Moscow Metro Bombs: interactive map Guardian - + - - - - - - + - - - + - - - - - - - - - - - + - - + - + + - - + + - + - - -The World Economy Turns the Corner Guardian - + - - - - - - + - - - - - - - - - - - - - - - + - + + - + - - - + - - - - - -Minnesota Employment Explorer Minnesota Public Radio - + - - - - - - - - - + + - + - - - - - - + + - + - + + - + + - - + + + - - + -A Map of Olympic Medals New York Times - + - - - - - - + + - - - - - - - - - - - + + - + - + + - + + + + + - - - - - -All of Inflation's Little Parts New York Times - + - - - - - + + - - - + - - - + - - - - + + - + - + + - + - - - + + - - - + -Paths to the Top of the Home Run Charts New York Times - + - - - - - - + - - - + - + - - - - - - - - - + - + + - + + - + + + - - - - -The Ebb and Flow of Movies: Box Office Receipts 1986 d New York Times - + - - - - - - + + - - + - - - - - - + - - - - + - + + - + + - - + + - - - - -The Jobless Rate for People Like You New York Times - + - - - - - - + - + - + - - - - - - - - + + - + - + + - + + - - + - - - - - -Advertisement: Bus United Technology - + - - - - - - - - + - - + + - + - + -Advertisement: Helicopter United Technology - + - - - - - - - - + - - + + - + - + -Analyzing Obama's Schedule Washington Post - + - - - - - - - + - - + - - - - + - - - - - - + - + + + - + - - - - - - - + -Oscars 2010: The Best Picture Nominees Guardian - - + - - - - + + - + - + - - - - - - - - - - - + - + + - + - - - + + - + - - -The Consumer and Retail Price Indices since 2006 Guardian - - + - - - - + + + - - + - + - - - - - - + - - + - + + - + + - - + + + + - + -UK Voting Intentions Guardian - - + - - - - + + + - - + - + - - - - - - + - - + - + + + + + - - + + - + - + -Comparison of Bear Markets New York Times - - + - - - - - + + - - + - + - - - - + - + + - + - + + - + + - + + + - - - - -Faces of the Dead New York Times - - + - - - - - + - - - + - - - - - - - - - - - + - + + + + + - + + + - - - + -How Americans Spend Their Day New York Times - - + - - - - + - - - - + - + - - - - - - + + - + - + + + - + - + + + + - - - -Michelle Obama's Family Tree New York Times - - + - - - - - + - - - + - - - - - - - - + + - + - + + + + + - + + + + + + + -NetFlix Rentals New York Times - - + - - - - - + + - - + - - - - - - - - - - - + - + + + - + - + + + - - - - -Steroids or Not, the Pursuit is On New York Times - - + - - - - - + - - + + + - - + + - + + - -Vancouver's Olympic Venue New York Times - - + - - - - + - - - + + - + - + - + + - + + - + - + + + - + - - + + - - - - -On the Map: Five Major North Korean Prison Camps Washington Post - - + - - - - + - - - + + - - - - - - - - - - - + - + + + + + - - + - - + - + -Spheres of Influence: The Bush Campaign Pioneers Washington Post - - + - - - - + - - - + + - - - - - - - - - - - + - + + - - + - + + + + - - + -A Visual Guide to the Financial Crisis Flowing Data - - - + - - - - - - - - + + + - - - - -Economic Meltdown of 2008-2009 Flowing Data - - - + - - - - - - - - + + + - + - - -Where Did All the Money Go? Flowing Data - - - + - - - + - - - - - + + + - + + - -Life Cycle of a Beetle through a Year Edward Tufte - - - - + - - + + + - - - - + + - - + - - - - - - -McCloud's Making Comics Scott McCloud - - - - + - - + - - + + + + + + + + - - + + + + + + + +Afghanistan: Behind the Front Line Financial Times - - - - - + - + + + + - + - + - - + - - - - - - - + - + + - + - - + + - - - + -Toyota Timeline: A Company History Financial Times - - - - - + - - + + - - + - - - - - - - - - - - + - + + - + + - - + - + - - - -Gapminder Human Development Gapminder - - - - - + - + - + + + + - + - + + - + - + + - - + + + + + + + + + + - + + - +Earthquakes: Why They Happen Guardian - - - - - + - + - - - + + - + - + + - - - + + - - + + + + + + - + + + - + + + -Iran's Nuclear Programme Guardian - - - - - + - + - - - + + - + - + + - + - + + - - + + + + + + + + + + - + + + -Shaun White's Double McTwist Guardian - - - - - + - - + + - - + + - - - + - - - + - - - + - - + + - - - + + - + - - -Toyota's Stick Accelerator Problem Guardian - - - - - + - - + - - + + - + - + + - - - + + - - + + - + + + - + + + - + - - -Alpine Skiing, From Technical Turns to Tucks and Speed New York Times - - - - - + - + - + + - + - - - - + - - - - + - - + - - + + - - - + + - - + + -Budget Forecasts vs. Reality New York Times - - - - - + - + + + + - + - + - - - - - - + + - - + + + + + + + + + + - + + + -How the Government Dealt with Past Recessions New York Times - - - - - + - - + + - - + - - + - - - - - - - - - + + + - + - - + + + + + + - -Mac Orientation Video Apple - - - - - - + + - - - + + - + - + + - + + + + - - + - - - + - - +Delta Airplane Safety Video Delta - - - - - - + + - - - + + + - - + + - + + + - - - + - - - + + - +The Story of Stuff Story of Stuff Project - - - - - - + + + - + - + + + + - + - - - + + - - + + + + + +Virgin America Airplane Safety Video Virgin America - - - - - - + - - - - + + + + + + + + + + - + - - + - - - + + - -

MessagingInteractivity

Narrative StructureVisual NarrativeOrderingTransition GuidanceHighlightingVisual Structuring

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 orderingstrategies 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 strategiesto engage the user in the interactive functionality. Region (4) shows the under-utilization of common storytelling techniques across narrative visualizations.

Annota

raph /

ideo /

/ Spla

ual Pla

"Check

Architecture and Justice (Brooklyn Crime Blocks) Columbia Univ. SIDL + - - - - - - +John SnowWs Chart of Deaths from Cholera Edward Tufte + - - - - - -Politicians Abuse their Free-mailing Privileges before Elect Edward Tufte + - - - - - -Football Drawings Visual Complexity + - - - - - -Pedestrians Crossing the Street Visual Complexity + - - - - - -The Climate Agenda Washington Post + - - - - - - - + + - - + - + - - + - - - + + - + -When Did Your County's Jobs Disappear? Washington Post + - - - - - - - + + - - + - - - - - - - - - - - + -Acadametrics House Price Index Financial Times - + - - - - - + + - - - + - - - - - - - - - - - + -BanksW Earnings: How Compensation Relates to Performa Financial Times - + - - - - - - + + - - - - + - - - - - - - + - + - -Deadly Offensive: Taliban Attacks in Pakistan Financial Times - + - - - - - - + + - - + - - - - + - - - - - - - + - + + + - + - + + - + - + -GDP Moves by Sector Financial Times - + - - - - - - + - - - + - - - - - - - - - - - + -UK Economic Data Financial Times - + - - - - - - + - - - + - - - - - - - - - - - + - + + - + + - - + - - - - + -Budget 2010: Reaction from around the UK Guardian - + - - - - - - + - - - + - - - - + - - - - - - + - + + - + - - - + + - + - - -Formula One 2010: Driver's Rankings Guardian - + - - - - - - + - - - + - - - - + - - - - - - + - + + - + + - - + - - - - - -Lighting Up Hadrian's Wall Guardian - + - - - - - + - - - - + - - - - - - - - - - - + - - + - + + - - + + - - - + -Mapping Hydropower Hotspots across the UK Guardian - + - - - - - - + - - - + - - - - - - - - - + - + - + + - + + - - + + - + - - -Moscow Metro Bombs: interactive map Guardian - + - - - - - - + - - - + - - - - - - - - - - - + - - + - + + - - + + - + - - -The World Economy Turns the Corner Guardian - + - - - - - - + - - - - - - - - - - - - - - - + - + + - + - - - + - - - - - -Minnesota Employment Explorer Minnesota Public Radio - + - - - - - - - - - + + - + - - - - - - + + - + - + + - + + - - + + + - - + -A Map of Olympic Medals New York Times - + - - - - - - + + - - - - - - - - - - - + + - + - + + -All of Inflation's Little Parts New York Times - + - - - - - + + - - - + - - - + - - - - + + - + - + + - + - - - + + - - - + -Paths to the Top of the Home Run Charts New York Times - + - - - - - - + - - - + - + - - - - - - - - - + - + + - + + - + + + - - - - -The Ebb and Flow of Movies: Box Office Receipts 1986 d New York Times - + - - - - - - + + - - + - - - - - - + - - - - + - + + - + + - - + + - - - - -The Jobless Rate for People Like You New York Times - + - - - - - - + - + - + - - - - - - - - + + - + - + + - + + - - + - - - - - -Advertisement: Bus United Technology - + - - - - -Advertisement: Helicopter United Technology - + - - - - -Analyzing Obama's Schedule Washington Post - + - - - - - - - + - - + - - - - + - - - - - - + - + + + - + - - - - - - - + -Oscars 2010: The Best Picture Nominees Guardian - - + - - - - + + - + - + - - - - - - - - - - - + - + + - + - - - + + - + - - -The Consumer and Retail Price Indices since 2006 Guardian - - + - - - - + + + - - + - + - - - - - - + - - + - + + - + + - -UK Voting Intentions Guardian - - + - - - - + + + - - + - + - - - - - - + - - + -Comparison of Bear Markets New York Times - - + - - - - - + + - - + - + - - - - + - + + - + - + + - + + - + + + - - - - -Faces of the Dead New York Times - - + - - - - - + - - - + - - - - - - - - - - - + -

Segal and Heer, 2010

vis.stanford.edu/papers/narrative

Sources of Inspiration:Comic Books

MoviesVideo Games

Scott McCloud:Understanding Comics

Data Storytelling Techniques

Laying It All Out: The “Science Fair Poster”

• Only one “screen” – needs to be self-contained• Critically important that all context and explanatory

information be included: scales, legends, labels• Use space to lay out information:

• "Stimulating default view” central image that grabs eye• Additional “small multiples” as sidebar elements, show

information in sequence without animation

Laying It All Out: The “Science Fair Poster”

The “Data Slide Show”

Linear Presentation: The “Data Slide Show”

ruralwest.stanford.edu/newspapers

Bill Lane Center for the American West, Stanford University

Texas Tribune / Bill Lane Center for the American West, Stanford University

The Guardian Data Blog

• Descriptive headlines help lead one screen to the next• Navigation can be by numbers, slider-type control or

headlines; headline navigation allows for non-linear use• Best examples allow interaction within each slide• Animated transitions between slides help you follow

• Flash to white background is hardest to follow• Ability to “deep link” or embed at middle slide helpful

The “Martini Glass”

Linear, then User-Directed: The “Martini Glass”

The New York Times

First read: narrative

First read: narrativeSecond read: reference

The “Drill-Down Story”

Random Access to Information: the “Drill-Down Story”

Wide-Angle View; Presents Links to Selected Closer Views

The Washington Post

Find yourself in the data

MSNBC.com

• "Tacit tutorial" - interaction should be clear and intuitive, usable without a manual

• Interface lessons from video games can be very valuable• Decide whether or not there is a sequence here – should

points be highlighted by numbers, i.e. “1,2,3,4”?• If not, how does a user know when they've seen

everything? Do they need to know?• Does information change over time, or is it static?

Videographics

Video: Television, The Last Medium (The Economist)http://economist.com/videographics

Animated Sequences with Narration: “Videographics”

Linear Narratives Using Motion Graphics, Voiceover“Videographics”

Video: Hans Rosling:http://www.youtube.com/watch?v=jbkSRLYSojo

VPRO: Nederland van boven

• Most emotional format for data visualization• Pacing is extremely important• Narration helps draw the eye off of the text and onto the

graphic forms• Decide how you will handle information that gets old

• Could be as simple as time and date stamping• Or you could plan to update in installments

• Since no legend, need to be especially clear about symbology, even if explained through narration

Animated Sequences with Narration: “Videographics”

Other Narrative TechniquesSequencing and Headline Writing

• 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 StorytellingSequence and Headline Writing as Signposts

(Example: Harper’s map)

• Begin with conventional version of story

• “Tell, Don’t Show:” reinforce points through language in texts

• Then present alternative case, laying out evidence bit by bit

Interactive StorytellingSequence and Headline Writing as Signposts

“Book-Like” Interface Other Narrative Techniques

• 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 BooksInteractive Storytelling

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 mapText area with images has primacy on the page,

rather than being in a tiny popup windowbut sometimes the map is more or less

importantMeant to be like an e-book

Last page allows for free exploration

Final version

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 mapText area with images has primacy on the page,

rather than being in a tiny popup windowbut sometimes the map is more or less

importantMeant to be like an e-book

Last page allows for free exploration

Final version

• Pagination reduces need for complex menu system, enables more creative space on each “page”

• Underneath pages, at core of interactive feature is multi-layered web map instance

• Rather than forcing all annotations and media into floating bubble windows, page is divided into regions over map

• Interacting with map is possible on most pages; final page allows for free exploration

Drawing Inspiration from Traditional Media Formats… Like BooksInteractive Storytelling

Other Narrative TechniquesAnnotated Video

Narrative TechniquesAnnotated Video

• 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!

Annotated Video + Interactive Graphics = “DataPlayer”Our Proposal to Combine Video Narratives with Data in Native HTML

Other Narrative TechniquesUser Involvement

User InvolvementLinked Comment Thread

User InvolvementAnnotation

User InvolvementPrediction

Emerging Design Conventions“The Scroller”

Emerging Design Conventions“Responsive” Design

“Responsive” DesignCreate Once (in HTML) for Many Devices

• “Responsive” HTML design allows for multipurpose embedding• Consistent UI style and interaction elements• Draws data through public APIs and from curated material

“Responsive” DesignAllows for Embedding in Blogs, Websites

The View from Academia

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?”

Map of the Market (1998)

Timeflow, an analytical timeline for journalists (2010)

STANFORD = TOOLS FOR VISUALIZATION

TRANSITION

Image: Elijah Meeks, Network of Collaboration and Digital Innovation in Higher Education at Stanford University

Tooling Up for Digital Humanities: a weekly lunchtime workshop

Spring 2011 Fridays, 12-12:50pm

Wallenberg Hall, Room 124

Come learn about new tools empowering and transforming research, scholarly communications, and teaching in the

humanities at Stanford and beyond. Topics include: managing your online scholarly identity, archiving your digital

sources, digitization, databases, text mining and analysis, spatial analysis, visualization, pedagogy, and what's next in

humanities 3.0.

Optional 1 unit credit available in History & English 299D/399D.

More info at http://toolingup.stanford.edu

“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

http://www.stanford.edu/group/toolingup/rplviz/

Visualizing the Enlightenment

“Mapping the Republic of Letters,” Stanford University (2009)

spatialhistory.stanford.edu

http://mappingtexts.org

“Assessing Digitization Quality,” Bill Lane Center for the American West/University of North Texas (2011)

“Assessing Language Patterns,” Bill Lane Center for the American West/University of North Texas (2012)

Thanks!

Get in touch:Email: geoffmcghee@gmail.com Twitter: @mcgeoff

Bill Lane Center for the American Westhttp://west.stanford.edu

Journalism in the Age of Datahttp://datajournalism.stanford.edu

Journalism, Communication and Life in the Age of Data · Telling Stories with Data Visualization...

Documents

Transcript of Journalism, Communication and Life in the Age of Data · Telling Stories with Data Visualization...

New Age Tools in Data Journalism - Analytics & Visualization

Reconsidering Participatory Journalism in the Internet Age

Data Journalism - Storytelling with Data

Open data e Data journalism

Data journalism

Global journalism in the digital age - QUT · Global journalism in the digital age Amanda Gearing PhD candidate, Creative Industries, QUT

Open data journalism

Journalism in the digital age

DATA-DRIVEN REVELATION? Epistemological tensions in ... · DATA-DRIVEN REVELATION? Epistemological tensions in investigative journalism in the age of ‘big data’ Sylvain Parasie

Data driven journalism

Reuters Institute Fellowship Paper University of Oxford...c. Data-journalism and the rise of data Data journalism or data-driven journalism is a broader use of the data for journalism.

EPILOGUE: DIGITAL JOURNALISM - Toby Miller › wp-content › uploads › 2016 › ...: DIGITAL . JOURNALISM. A golden age, a data-driven dream, a paradise for readers—or the proletarianization

Data journalism in the second machine age

Journalism in the Age of New Media

Data Journalism (City Online Journalism wk8)

Data Journalism 101

Quality journalism in the digital age

Journalism in the Age of Data: Telling Stories with Vis and Infographics

Open Data – Data Journalism

Data Journalism Handbook