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

Transcript

1. VISUALIZING
2. 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.”
3. Collecting Data • IMDB Page • Movie Review (10 page long!) • Subtitle File • Script • Timeline (By blogger)
4. 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
5. Collecting data manually
6. 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?
7. 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?
8. Quick Analysis: Excel
9. 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
10. http://rasagy.github.io/500days/
11. Progress
12. Progress
13. Progress
14. Progress
15. Progress
16. Progress
17. Todo • Axis & Legend • Explanatory text • Changing view: View by days vs View by Scene • Create icons for location/scene
18. 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