Movie Barcode Challenge

Your challenge this week is to use HTML <canvas> elements to create visual "barcodes" for different films. This has been a popular subject of online visualization blogs. Some folks have even made publicly available tools for generating them. For this challenge you'll be using a simplified dataset. Unlike MovieBarCodeGenerator.exe (where it samples colors from each row of frames sampled from the movie), your dataset contains one average color sample for each of 400 frames sampled evenly from a movie. Here is an example of what these data look like:

The dataset, accessible here, contains a list of objects. Each object has some metadata about the movie, and then a property, frames, which contains a list of 400 individual movie frames. Each of those frame objects has a number of average color values computed using different techniques (e.g. convert colors to LAB, average them, then back to RGB; just average in RGB; use k-means clustering and pick the most dominant cluster color). You can choose to use any of the averages you think works best for this challenge -- just be consistent!
I have generated this dataset using a eclectic set of different films. As I have some concerns about potential fair use issues outside of the academic context, I'm not making this code available (I'm happy to discuss it in a meeting if you're curious).

To complete this challenge, you must modify this file in the following ways:

Submit your answer to CMS in the form of a .zip file containing your own version of this page's HTML as well as the dataset, barcodes.json. Submissions will be graded for completeness in meeting the given criteria rather than quality or choice of averaging technique. You must meet all criteria in order to receive credit. You must turn in your final version before 11:59PM on Tuesday, May 12 in order to receive credit.