https://github.com/rasagy/500days

Visualizing the narrative of 500 Days of Summer (Movie)
https://github.com/rasagy/500days

d3js movie narrative visualization

Last synced: 3 months ago
JSON representation

Visualizing the narrative of 500 Days of Summer (Movie)

• Host: GitHub
• URL: https://github.com/rasagy/500days
• Owner: rasagy
• Created: 2013-07-25T20:52:01.000Z (about 12 years ago)
• Default Branch: gh-pages
• Last Pushed: 2017-08-14T12:03:36.000Z (about 8 years ago)
• Last Synced: 2025-06-07T20:09:46.222Z (4 months ago)
• Topics: d3js, movie, narrative, visualization
• Language: HTML
• Homepage: http://rasagy.in/500days
• Size: 1.07 MB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
500 days of Summer

==================

### Visualizing the narrative of 500 Days of Summer (Movie)

Final Visualization: http://rasagy.in/500days

Read more about the process here: [Visualizing 500 days of Summer: Process](rasagy.in/blog/2013/09/visualizing-500-days-of-summer/)

## How to run locally

1. Use `git clone`, [Github Desktop](https://desktop.github.com/) or download the repository

![image](https://user-images.githubusercontent.com/1117531/29270573-1f2ee6ec-8115-11e7-9539-6f061acec5e4.png)

2. Navigate to the directory you saved/cloned the repo in via command prompt (Windows)/terminal (Mac) and start a Python server

![image](https://user-images.githubusercontent.com/1117531/29270708-a32223ec-8115-11e7-8b73-10552ef8a32c.png)

If you’re on Windows:

- Install [Python](https://www.python.org/downloads/windows/)

- Open command prompt (Win+R → `cmd` (press enter))

- Navigate to the folder

- Run either `python3 -m http.server` (Python 3+) or `python -m SimpleHTTPServer` (Python 2)

If you’re on Mac:

- Open terminal

- Navigate to the folder

- Run `python -m SimpleHTTPServer`

You’ll get the url that this is hosted on locally — in the screenshot above it is http://0.0.0.0:8000/ . This will run this as if it’s running on a server (thus allowing you to use the .js files that might not work otherwise).

## Future directions

- [ ] Add Play button instead of auto-play

- [x] Add description during animation (Desc/quotes/short text) (HT Prakhar)

- [ ] Add Explanatory text below the viz (What/How/Who)

- [x] Create Print poster (A4?)

- [ ] Create Physical Visualization (HT Venkat)

- [ ] Add icons for each scene (Maybe!)

- [ ] Consolidate the findings into a paper (HT Venkat)