Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Data Visualization Process: 500 Days of Summer

Data Visualization Process: 500 Days of Summer

Presentation of my concept for visualizing the non-linear narrative of 500 Days of Summer, created as part of the Information Visualization module at NID, Bangalore.

The deck walks through the design process behind the visualization, which has also been covered on my blog: http://rasagy.in/blog/2013/09/visualizing-500-days-of-summer/

Final visualization: http://bit.ly/500DaysViz
Research paper on this technique: http://bit.ly/500DaysPaper

Rasagy Sharma

July 25, 2013
Tweet

More Decks by Rasagy Sharma

Other Decks in Design

Transcript

  1. Introduction • A movie about a boy & a girl,

    and how their relationship changes over the span of 500 days • Unlike most movies, it has a non-linear narrative • The movie got great reviews, even though a lot of people claim it’s just a typical relationship story Brief : “Visualize the non-linear narrative of 500 Days of Summer.”
  2. Collecting Data • IMDB Page • Movie Review (10 page

    long!) • Subtitle File • Script • Timeline (By blogger)
  3. Parse through data vs collect data manually • Subtitle file

    is hard to parse (+ typing/formatting errors) • Script doesn’t have uniform format • Hard to choose best part of data without the movie running (context-dependent) • Qualitative vs Quantitative data
  4. Final Dataset • Scene Number • Start time & End

    time • Scene length • Day Number • Interesting quotes • Scene Description • Scene Location * Scenes without days? * Scenes with many days?
  5. Quick Analysis: Asking questions • Which day is shown when

    during the movie? • How long is every scene & every day? • What times during the movie are they together & when are they not?
  6. Concept • Connected Arcs • Day 1 – Day 500

    • Highlight the non-linear flow • Color for together/not together • Narrative + Exploratory? • Finally, answer what is so great about the narrative
  7. Todo • Axis & Legend • Explanatory text • Changing

    view: View by days vs View by Scene • Create icons for location/scene
  8. Feedback! Reference • D3 Tutorial: Interactive Data Visualization for the

    Web by Scott Murray • SVG Reference: Mozilla Developer Network • JS tips: Doing without jQuery by Evan Hahn • Unicode Reference: CopyPasteCharacter