Movie Analyser
A short break from Madagascar updates to talk about something I was working on before I left the UK – Movie-Analyser.com. A little web development project I was fiddling with in my spare time, it was an interesting experiment for me in infographic design as well as trying out a new API.
Movie Analyser combines two things that interest me: film and statistics. As I own quite a lot of DVDs, I’ve often wondered what kind of film I actually enjoy, who my favourite directors, actresses and actors are, and what other things my movie collection says about me. As I already had a list of everything in my collection, I decided to make a tool to query a film database about each film, then collate and crunch the data into some interesting stats (and preferably display a pretty infographic-style report at the end!).
APIs & implementation
After a bit of hunting around I found The Movie Database. They provide a free-to-use API to their community-maintained database of films, used by XMBC and Plex amongst others – perfect. It’s also really easy to get started, all you need is an account and an API key. It’s a simple RESTful API, which returns data in JSON or JSON-P formats and the documentation is refreshingly current. GitHub user Jonas De Smet (@glamorous) has written a nice PHP class for accessing TMDB (https://github.com/glamorous/TMDb-PHP-API), so you can skip the usual wheel re-inventing that comes with API work, and get on with accessing data.
The plan: Each film in the list provided by the user would need to be looked up, one-by-one, and any data returned could then be collated as the process went along, before doing some final analysis, and displaying the results. A nice benefit to this approach was that I could display feedback to the user as they were waiting – which film the script was currently looking for, and how many left to go. I decided to use a combination of PHP and JavaScript – PHP to make the API requests and collate/analyse the data, JavaScript to make AJAX requests to PHP, and to add some dynamism to the interfaces.
Files
- assets
- js
- movie-analyser.js – JavaScript/jQuery helpers for the UI, and for making AJAX requests to fetch.php
- js
- lib
- Helper.php – a few static helper functions for text/number manipulation
- MovieAnalyser.php – interacts with the TMDB API, collates and analyses data, persists data to disk
- TMDB.php – Jonas de Smet’s API wrapper
- fetch.php – Loads the 3 library classes and the API key, receives and responds to requests from the front-end
- show.php – Given a session ID, loads the data collated, does final analysis, and displays it back to the user
In order for users to see their results after they were generated, return to the link later, and share the output on Facebook and other social networks, they needed a static URL to return to, so as I didn’t need anything fancy or particularly long, I used PHP’s uniqid() function to generate this when the data collection starts. Each title is then given a bit of normalisation to strip out characters that TMDB doesn’t like, before the MovieAnalyser class looks up the title on TMDB. If results are found, we assume the first is the most relevant, and get further information on this title using the TMDB ID and a couple of other API requests. Relevant data is then extracted and added to the data set so far, which is saved to disk (as I wasn’t expecting high usage, serialized text files were a suitable storage method). The result is then sent back over JSON, displayed to the user, and movie-analyser.js requests the next title in the list from fetch.php. Once all the movies have been looked up, we redirect to show.php and the results are displayed.
Design & appearance
Visually, the output of Movie Analyser uses an infographic style, splitting the various facts and figures up into different sections, with emphasis on the data. This means large text, a high-contrast colour scheme, and use of large amounts of whitespace. To add interest, I used the Holtwood One font face (via Google Fonts), and a set of film icons by Nikolay Kuchkarov.
To represent the user’s film collection in terms of the year of release, I built a custom D3 JS chart, while a second D3 script creates the genre pie chart. D3 JS is a library for creating standards-based SVG charts, graphs and documents. I find it a fairly easy way to build up simple charts, but it can be rather contrived to add simple touches.
With a completed first iteration, I added a few finishing touches: “Share this” call-to-action buttons for users wanting to compare their results with friends, and a neat animation on the loading screen.
Future enhancements
Around the time I finished the first working version, I found out I was going to Madagascar, and everything got a little hectic. I’d like to do a bit more with the project, or if other contributors are interested, the code is open-sourced on GitHub: https://github.com/danielgwood/movie-analyser. I’m particularly keen to add some more statistics/data, and to improve the design. Future features could include an auto-suggest when adding films, and Facebook integration.