html `

The data we worked with was a comprehensive IMDB dataset, and we modified the data by creating a new database to focus on the specific attributes we wanted to examine (genres, average rating, year). We began our approach by brainstorming ideas on paper, then trying to create each element separately in Observable. We started with a static word cloud, transitioned into a design that included a circle packing graph, sunburst graph, and a zoomable time series. We decided to abandon the word cloud, circle graph, sunburst and chose to use the zoomable time series. We realized area wasn’t the best metric for what we wanted to describe, mainly since we wanted to keep the dimension correlated with the data. When constructing these visualizations, we found it difficult to work with d3 and Observable. We wanted to create a more interactive project by setting up a database on Amazon RDS and a rest API to interactively fetch extra data from the server on user request. Unfortunately, when we tried to call our API from Observable, we were faced with a ‘mixed content error.’ To overcome this issue, we downloaded the JSON response from our API to a Github gist. This issue imposed a content limitation on our project and prevented us from expanding the project with another visualization.

With user testing, the biggest confusion we noticed was the genre legend/selection tool. Since the genre legend/selection tool is placed below the visualization, when the page first loads, the user sees the time series only and has to scroll down to see the tool. This made the visualization confusing without scrolling down, and the selection tool has a double-click that was not very intuitive to the users. If we had another week, we could work to reorient the genre legend/selection tool to be visible without scrolling.

The final visualization is a multi-line time series chart that plots the average rating of all movies in a genre against time. The brush and zoom interaction feature allows the user to view more specific time frames within the data. The genre legend and selection tool will enable the user to display genres on the graph selectively. We also incorporated shortcut buttons to hide all genres, show all genres, and reset the zoom, allowing the user to navigate more quickly and conveniently. Each genre is differentiated by color.

We also created a sunburst diagram (Click to view) to show the genres of all the movies. We chose this diagram because the genre data in the dataset is a hierarchical data where every movie belong to three hierarchical genres. The issue with this graph is it is very slow due to the size of the loaded data. If we had another week, we can try and modify our REST API and add an SSL certificate so we wouldn't need to worry about the size of data. Also, we would be able to link it to the time-series and apply the same filters on it.

Abandoned Designs

Figure 1: Circle Packing Graph

Figure 2: Word Cloud

Figure 3: Sunburst diagram

List of the resources that helped us