The Motivation
In the past two years, I have been using Letterboxd to log my daily film viewings. Letterboxd, like IMDB, is a global social network for grassroots film discussion and discovery. It has all the wonderful features I need: watched date specification, support for logging rewatched films, tag management, and a wonderful online community. I particularly love their stats service, where subscribers can have a look at their film viewing data visualizations, ranging from the bar charts of genres, countries & languages, pie charts of watches vs re-watches, world map with heat colours, etc. And yet, there are some custom data visualizations I am hoping to see, like the calendar heatmap, pie charts for how I watched a film, in theatre or on a streaming platform. Freshly coming off my CPEN400A: Building Modern Webapp course, I'd like to build a data visualization WebApp using the Letterboxd dairy data and d3.js during my winter break.
The Data
The Letterboxd dairy export format is a CSV file (with UTF-8 character encoding) that supports the following column titles, Date, Name, Year, Letterboxd URI, Rating, Rewatch, Tags, and Watched Date. For example, a valid file might look like this:
Date,Name,Year,Letterboxd URI,Rating,Rewatch,Tags,Watched Date
2019-01-02,Frances Ha,2012,https://letterboxd.com/cindyshi/film/frances-ha/1/,5,Yes,netflix,2019-01-01
2020-01-01,Little Women,2019,https://letterboxd.com/cindyshi/film/little-women-2019/2/,4.5,Yes,"cineplex, fifth ave",2019-12-31
The CSV file uses the comma character (",") to delimit columns. Strings containing commas (such as tags) are placed inside quotes, eg: "cineplex, fifth ave".
The Library
D3.js is a JavaScript library for manipulating documents based on data. D3 stands for Data Driven Documents. There are so many libraries out there, including ChartJS, threeJS, Recharts, and many more. I chose D3.js due to its popularity, extensive samples and vibrant open-source community.
DEALING WITH DATA FROM A LOCAL FILE
In CPEN400A: Building Modern Webapp course, I learned about using Promises in JavaScript. To read the CSV file from a local dictionary, I used async and await, the extensions of promises. Notice after the csvToArray function, it is important to deal with the commas within the strings.
THE SOURCE CODE
Source code for a responsive website with three different data visualizations: heatmap, pie chart and bar chart. For source code, you will need Node.js to run it locally.
To present the visualization in a more direct way, I created some live demo code snippets for heatmap and pie chart. Here I'm not reading from a CSV file. I used JSON.stringify to populate the array data to an associate array.
Click the "EDIT ON CODEPEN" for better interations!
HEATMAP
Pie Chart