Tweet
Tweet

Slide 1

Slide 1 text

VISUALIZING

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Collecting Data • IMDB Page • Movie Review (10 page long!) • Subtitle File • Script • Timeline (By blogger)

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Collecting data manually

Slide 6

Slide 6 text

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?

Slide 7

Slide 7 text

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?

Slide 8

Slide 8 text

Quick Analysis: Excel

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

http://rasagy.github.io/500days/

Slide 11

Slide 11 text

Progress

Slide 12

Slide 12 text

Progress

Slide 13

Slide 13 text

Progress

Slide 14

Slide 14 text

Progress

Slide 15

Slide 15 text

Progress

Slide 16

Slide 16 text

Progress

Slide 17

Slide 17 text

Todo • Axis & Legend • Explanatory text • Changing view: View by days vs View by Scene • Create icons for location/scene

Slide 18

Slide 18 text

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