Edward segel interactive_storytelling
Upcoming SlideShare
Loading in...5
×
 

Edward segel interactive_storytelling

on

  • 6,200 views

Presentation slides: Interactive Storytelling

Presentation slides: Interactive Storytelling

Edward Segel helped Bloomberg develop a datavis strategy. He also wrote a really great paper: Narrative Visualization

Statistics

Views

Total Views
6,200
Views on SlideShare
5,521
Embed Views
679

Actions

Likes
26
Downloads
253
Comments
2

13 Embeds 679

http://martaherca.posterous.com 293
http://recampaign.de 235
http://www.linkedin.com 56
http://posterous.com 24
http://www.pinterest.com 23
http://media.juiceanalytics.com 12
https://twitter.com 11
https://www.linkedin.com 10
http://pinterest.com 8
http://es.pinterest.com 2
http://intrelcomm.wordpress.com 2
https://translate.googleusercontent.com 2
http://static.squarespace.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Edward segel interactive_storytelling Edward segel interactive_storytelling Presentation Transcript

  • HOWTO TELLSTORIESWITH DATA(REALLY)edward segel
  • WHYINTERACTIVEVISUALIZATIONS
  • ANALYSIS PERSONALIZATION youSOCIAL STORYTELLING
  • ANALYSIS PERSONALIZATIONBusinessweek Ask. Explore. Find. Top 100 M&A Deals Too much info at once. you BGOV Scenario testing. Federal Spending SOCIAL STORYTELLING
  • NYTimesINFORMATIVE ANALYSIS Jobless Rate PERSONALIZATION for People Like You Make relevant. NYTimes Households Increase engagement. like Yours Make emotional. Aaron Koblin Arcade Fire’s Wilderness Downtown SOCIAL STORYTELLING
  • INFORMATIVE ANALYSIS PERSONALIZATION you Jeff Heer SOCIAL STORYTELLING Sensus Aaron Koblin Sharing. Sheep, Cash, Bicycle Collaborative. Real-Time sentiment. Stamen Design NYTimesMTV VMA Twitter Reactions to Osama
  • ANALYSIS PERSONALIZATION youSOCIAL STORYTELLING
  • INFORMATIVE ANALYSIS PERSONALIZATION you SOCIAL STORYTELLING
  • HOWWE GOTHERE
  • STORYTELLINGas ancient as mankind
  • STORYTELLINGChanges with technologyPEOPLE TELL STORIESWORDS TELL STORIESIMAGES TELL STORIESCOMICS TELL STORIESMOVIES TELL STORIES
  • HOW CAN YOU TELL STORIES WITH DATA ?
  • VISUALIZATION DESIGNERS ARE MELDING THE SKILLS OF COMPUTERSCIENCE, STATISTICS, ARTISTIC DESIGN AND STORYTELLING. THE ECONOMIST // FEB 2010
  • PEOPLE HAVE BEGUN TO FORGET HOW POWERFUL HUMAN STORIES ARE,EXCHANGING THEIR SENSE OF EMPATHY FOR A FETISHISTIC FASCINATION WITH DATA... THE HUMAN STUFF IS THE MAIN STUFF, AND THE DATA SHOULD ENRICH IT. JONATHAN HARRIS // 2008
  • smallsupport ght rthouafte boring
  • exciting! beautiful! BUT technical! [ what does it mean?
  • center st agestandalone interactive guided
  • THENARRATIVEFRAMEWORK
  • VISUAL STRUCTURE MAGAZINE ANNOTATED SCIENCE FAIR STYLE CHART POSTER FLOWCHART COMICSTRIP SLIDESHOW MOVIE Duo- Tacit Selection Captions Specific Tutorial Details on Attached Navigation Demand Annotations ArticleTimelines Filtering Summaries Interpret Headlines Highlighting INTERACTIVITY MESSAGING O RE M
  • Genres + Interactivity + Messaging = DESIGN SPACESTORYTELLING Author Driven Reader Driven ASK QUESTIONS CLARITY strong ordering weak ordering EXPLORE SPEED heavy messaging light messaging FIND limited interactivity free interactivity martini drill-down glass story interactive slideshow
  • (more patterns)
  • THEDESIGNPRINCIPLES
  • Guide. Highlight. Interpret. VISUAL MESSAGING INTERACTIVITY STRUCTURE tell engage support the story the story the story
  • VISUALSTRUCTUREsupport the story
  • June 27, 2010Choose yourvisualizationtype carefully.Know youroptions. Evenobscure ones.“Cool” and “readability” are at odds.Recognize the trade-off andchoose your audience.
  • dirty Avoid “chart junk” (Tufte). Extra marks distract from the data.better clean But... chart junk may reflect cool design choices Businessweek... sexy does great with labeling only as much as needed
  • Make it clearwhere tostart.Don’t letreadersdefect. re? whe
  • The more linear, themore like a story.Stories have abeginning, middle,and end. Make it clear what to look at and when. Guide readers through the story or they’ll get lost.
  • Highlighting Techniques Character Direction Feature Distinction Close-Ups Zooming Framing Motion Audio
  • Consistentvisualframeworks.Keep thingstidy.
  • CONTINUED...Consistentvisualframeworks.Keep thingstidy.
  • Use staging andanimation forcomplicated transitions.Stage big transitions toavoid confusing readers Transitions Guidance Familiar Objects Viewing Angle Viewer (Camera) Motion Continuity Editing Object Continuity
  • Useestablishingshots.Situate theviewerbeforediving in.
  • CONTINUED...Useestablishingshots.Situate theviewer beforediving in. good bad
  • (1) Choose your visualization type carefully.Know your options. Even obscure ones.(2) The more linear, the more like a story.Stories have a beginning, middle, and end.(3) Use establishing shots.Situate the viewer before diving in. VISUAL(4) Make it clear what to look at and when—especially where to start. STRUCTUREGuide readers through the story or they’ll get lost. support the story(5) Limit complexity at first. Reveal as needed.Don’t confuse the reader with extraneous information.(6) Consistent visual frameworks.Keep things tidy.(7) Use staging and animation for complicated transitions.Stage big transitions to avoid confusing readers(8) Design Matters.Duh.(9) Avoid “chart junk” (Tufte).Extra marks distract from the data.(10) “Cool” and “readability” are at odds.Recognize the trade-off and choose your audience.
  • MESSAGING tells the story
  • headline Use headlines, caption captions, & annotations. Quickly draw attention to what’s important. tion annota ing) (noth
  • Weave text into the graphic—not just at the beginning. T and graphics work better ext solated together than apart. i integrat ed Aug 16, 2010June 20, 2011
  • CONTINUED...Word-Specific Weave text into the graphic—not just at the beginning.Pictures illustrate the words T and graphics work better together than apart. extPicture-SpecificWords accentuateaspects of the sceneDuo-SpecificWords and pictures sendthe same messageIntersectingWords and picturescontribute informationindependentlyInterdependentWord and pictures combine toconvey an idea neither conveysaloneParallelWords and picturesseem to be independent.MontageWords and picturescombine pictorially.
  • Start with an editorially interesting view. Default Make data views can be relatable. Put boring. numbers and Curate the facts in context. experience 250 thousand from the square miles beginning. means nothing. It’s the size of T exas!Connect the text tothe relevant graphics. Aug 16, 2010See Fig. 5 Fig. 5
  • Mind your precision.Significant digits, tickmarks, and labels suggestwhat deserves attention. fine precise too thoughtful Good: Lance Armstrong, Popularity issue
  • (1) The more text, the more storytelling.Graphs tell stories. But words really tell stories.(2) Say the point you’re making with the graphic.Don’t make the reader figure it out on his own.(3) Use headlines, captions, & annotations.Quickly draw attention to what’s important. MESSAGING tells the story(4) Weave text into the graphic—not just the beginning.T and graphics work better together than apart. ext(5) Start with an editorially interesting view.Default views can be boring. Curate the experience from the beginning.(6) Make data relatable. Put numbers and facts in context.250 thousand square miles means nothing. It’s the size of Texas!(7) Connect the text to the relevant graphics.See Fig. 5(8) Don’t ignore summaries & conclusions.Answer the “so what?” or the reader leaves empty handed.(9) Mind your precision.Significant digits, tickmarks, and labels suggest what deserves attention.
  • INTERACTIVITY engage the story
  • Interactive featuresshould scream Be explicit.interactivity. Click here.Avoid a click-and-seekexperience. suggested actions visual cues familiar widgets
  • Interactivefeatures shouldreact to the user.Depress buttons,highlight items,animate widgets. Don’t obscure data. Avoid letting pop- ups obscure data.
  • Make the visualization “look alive”. Things move even without the user!Demonstrateinteractivity.Animateinteractivewidgets fortacit tutorials.
  • Include a progress bar and “back” and “reset” buttons Linear navigation is important— especially with lots of interactivity.Restrictinteractivity tokeydimensions.The moreinteractivity,the less story.
  • (1) Demonstrate interactivity.Animate interactive widgets for tacit tutorials.(2) Interactive features should scream interactivity.Avoid a click-and-seek experience. INTERACTIVITY(3) Interactive features should react to the user. engage the storyDepress buttons, highlight items, animate widgets.(4) Restrict interactivity to key dimensions.The more interactivity, the less story.(5) Make the visualization “look alive”.Things move even without the user!(6) Don’t obscure data.Avoid letting pop-ups obscure data.(7) Include a progress bar and “back” and “reset” buttonsLinear navigation is important—especially with lots of interactivity.
  • Sound & Video Mobile Linking Fluid INTERACTIVETHEFUTURE ? Mixing DataVis & Infographics
  • DATA JOURNALISM IS NOT GRAPHICS AND VISUALISATIONS. ITS ABOUT TELLING THE STORY IN THE BEST WAY POSSIBLE.SOMETIMES THAT WILL BE A VISUALISATION OR A MAP...BUT SOMETIMES ITS A NEWS STORY. SOMETIMES, JUST PUBLISHING THENUMBER IS ENOUGH. IF DATA JOURNALISM IS ABOUT ANYTHING, ITS THE FLEXIBILITY TOSEARCH FOR NEW WAYS OF STORYTELLING. SIMON ROGERS, THE GUARDIAN // 2011
  • New York TimesNew York Times. The jobless rate for people like you.http://www.nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.htmlNew York Times. How many households are like yours? LINKShttp://www.nytimes.com/interactive/2011/06/19/nyregion/how-many-households-are-like-yours.htmlNew York Times. The Death of a Terrorist: a Turning Point? 1http://www.nytimes.com/interactive/2011/05/03/us/20110503-osama-response.htmlNew York Times. Paths to the Top of the Home Run Charts.http://www.nytimes.com/ref/sports/20070731_BONDS_GRAPHIC.htmlNew York Times. A Peek Into Netflix Queues.http://www.nytimes.com/interactive/2010/01/10/nyregion/20100110-netflix-map.htmlNew York Times. A Map of Olympic Medals.http://www.nytimes.com/interactive/2008/08/04/sports/olympics/20080804_MEDALCOUNT_MAP.htmlNew York Times. Aerial Photographs of Joplin Before and After the Tornadohttp://www.nytimes.com/interactive/2011/05/25/us/joplin-aerial.htmlNew York TImes. How different groups spend their day.http://www.nytimes.com/interactive/2009/07/31/business/20080801-metrics-graphic.htmlNew York Times. Taking the Corners.http://www.nytimes.com/interactive/2010/02/20/sports/olympics/20100220-davis-graphic.htmlNew York Times. Alpine Skiing, From Technical Turns to Tucks and Speedhttp://www.nytimes.com/interactive/2010/02/20/sports/olympics/downhill-overview.htmlNew York Times. Luge Crash at the Olympics.http://www.nytimes.com/interactive/2010/02/12/sports/olympics/LUGEDEATH.htmlNew York Times. Budget forecasts compared to reality.http://www.nytimes.com/interactive/2010/02/02/us/politics/20100201-budget-porcupine-graphic.htmlNew York Times. Fractions of a Second: An Olympic Musical.http://www.nytimes.com/interactive/2010/02/26/sports/olympics/20100226-olysymphony.htmlNew York Times. How the Government Dealt with Past Recessions.http://www.nytimes.com/interactive/2009/01/26/business/economy/20090126-recessions-graphic.html
  • The GuardianGuardian. Toyotas sticky accelerator problem.http://www.guardian.co.uk/business/interactive/2010/feb/04/toyota-automotive-industryGuardian. Shaun Whites Double McTwist. LINKShttp://www.guardian.co.uk/sport/interactive/2010/feb/19/winterolympics2010-vancouverGuardian. Earthquakes: Why they happen. 2http://www.guardian.co.uk/world/interactive/2008/jan/23/earthquakesGuardian. Oscars 2011: an interactive guide to this years best picture nomineeshttp://www.guardian.co.uk/film/interactive/2011/feb/21/oscars-2011-best-picture-nominations-interactive-guideGuardian. Inflation in the UK.http://www.guardian.co.uk/business/interactive/2009/mar/24/rpi-inflation?intcmp=239Guardian. The World’s Economy Turns the Corner.http://www.guardian.co.uk/business/interactive/2010/jan/26/recession-gdpMiscellaneousAaron Koblin. Personal website with work.http://www.aaronkoblin.com/work.htmlJeff Heer. Seneus.http://vis.stanford.edu/papers/senseusStamen. MTV Video Music Awards.http://stamen.com/clients/mtvSimon Rogers. Data journalism at the Guardian: what is it and how do we do it?http://www.guardian.co.uk/news/datablog/2011/jul/28/data-journalismGapMinderhttp://www.gapminder.orgGapminder. Human Development Trends 2005.http://www.gapminder.org/downloads/human-development-trends-2005/People Movinhttp://peoplemov.in/Visual Complexity. Football Drawings.http://www.visualcomplexity.com/vc/project_details.cfm?id=452&index=452&domainDan Archer. Nisoor square shootings of 2007http://www.cartoonmovement.com/icomic/11
  • BGOVBGOV. Federal Programs on Debt-Limit Bubblehttp://about.bgov.com/2011/07/12/august-invoices-show-u-s-treasury%E2%80%99s-limited-choices/BGOV. Hospitals Wary of Data Breaches Seek Cyber Insurance From AIG LINKShttp://www.bgov.com/news_item/4D53U6teO2rko9nUq8XDoQBGOV. Medicare-Medicaid Costs $1.5 Trillion by 2020: Chart of the Day. 3http://www.bgov.com/news_item/XwqMzluxD58Dh0n6lvp8WABGOV. Kentucky Bourbon’s Seoul Appeal May Rise With Trade Agreement.http://www.bgov.com/news_item/PtRA9_pVGxAHjVVsjZev_gBGOV. Preparing Americans for Death Lets Hospices Neglect End of Life.http://www.bgov.com/news_item/On7zzjnP-22zIl6mQUeigwBGOV. Tea Party Debt Deal Opponents Gain From U.S. Awards.http://www.bgov.com/news_item/JcPzqhvW8bn8LuuhhO8KNABGOV. August Invoices show Treasury’s Limited Choices.http://about.bgov.com/2011/07/12/august-invoices-show-u-s-treasury%E2%80%99s-limited-choices/BGOV. Dodd-Frank One Year Later: The Key Playershttp://www.bgov.com/news_item/WMrg8I6JoxhifG-KDDpytgBusinessweekBusinessweek. The Credit Boom’s Best and Worst Deals.http://images.businessweek.com/mz/10/34/1034mergers47.pdf?chan=magazine+channel_news+-+markets+%2B+financeBusinessweek. Amid doping furer, Lance Armstrong’s reputation heads downhill.http://images.businessweek.com/mz/10/34/1034endorsments22.pdf?chan=magazine+channel_news+-+companies+%2B+industriesBloomberg Interactive Insights. America tied up by debt record.http://www.bloomberg.com/insight/america-tied-up-by-record-debt.htmlBusinessweek. How to save Greece.http://www.businessweek.com/magazine/content/11_27/b4235000567802.htmBusinessweek. The Big Apple is Recovering its Shine.http://images.businessweek.com/mz/10/34/1034therecovery11.pdf?chan=magazine+channel_news+-+global+economicsBusinessweek. Problem? What Problem?http://www.businessweek.com/magazine/content/11_26/b4234013596135.htmBusinessweek. Oil on Troubled Waters.http://images.businessweek.com/mz/10/34/1034oilbp53.pdf
  • The Washington PostWashington Post. Obama’s Calendar.http://projects.washingtonpost.com/potus-tracker/Washington Post. Spheres of Influence: The Bush Campaign Pioneers. LINKShttp://www.washingtonpost.com/wp-srv/politics/pioneers/pioneers_spheres.htmlWashington Post. On the Map: On the Map: Five Major North Korean Prison Camps 4http://www.washingtonpost.com/wp-srv/special/world/north-korean-prison-camps-2009/