Final project report MODAVI Movie Database Visualization

Transcription

1 Final project report MODAVI Movie Database Visualization Group 7 Juha Hjelm Johanna Huhtala Petri Laitinen Tiina Malinen 72957

2 2 Table of Contents 1 Introduction Problem statement The tools Design process Task structure of the group Guidelines Scenarios Scenario Scenario Sketches of the visualization user interface The visualization The data set Visual mappings and structures The overall view Interaction design Prototype Open questions and further development ideas Main view Timeline view Detailed view (of a movie) Filtering and searching Miscellaneous... 12

3 1 Introduction 3 This chapter introduces the starting point, problem statement and the main goals of the project. 1.1 Problem statement On information visualization point of view, there is a lot of material concerning films or even one film. This can be problematic when a data set of movies has multiple variables and attributes. A data item of one movie consists of many different attributes. One may for example be interested in certain genre, director, the most popular film of certain year, one's favorite actor, a combination of those things mentioned, and so on. Because of that, on the user point of view, it is quite hard to make movie comparisons and find what one's looking for. Also, when one wants to make comparisons with many films, things can get even more complicated. The aim of this project is to create a visualization tool that provides information about different attributes of movies. The application (Movie Database Visualization, or, Modavi) provides a possibility to compare different attributes, and to illustrate if they have correlation with each other. The comparisons introduced on the Information Visualization Project work -lecture slides were: Which actors have been the most active in different genres in the recent years? Is there a positive/negative relationship between Oscar winning production teams or cast and box office performance? Are there genres that have risen to prominence or gone out of vogue? Are there cross-over actors that have gone from genre to another, or multi-talented artists that straddle various genres? Do viewer ratings correlate with critical acclaim and/or financial success? At first, we started our design process aiming to cover all those comparisons. They worked as a first signposts on our way to implement something. At first we weren't quite sure which is possible on this time and with these skills, but it was clear that all of those aren't necessarily included in our prototype.

4 1.2 The tools 4 The tool we are using is Exhibit 2.0 ( It is a web application framework that is possible to include to web pages in the same manner as Google maps. At first we wondered if we could use Flash or some other kind of programming, which would have enabled 3D-design. But after a small amount of experimenting we felt, that Exhibit would let us concentrate on the actual design work and burden us less with the basic level code writing process, because on this schedule none of us would have had enough time to become skilled enough with any of the more challenging programming tools. Exhibit is written in javascript and it is meant to show a few hundred records of data on the Internet. To make an Exhibit presentation you only need a jsonformat datafile and a HTML-page to show the data. To use Exhibit no programming skills are needed, you only have to know how to write and modify HTML-files. At the moment the supported and documented visualizations include the tile, thumbnail, tabular views that show the information in a way that is easily modified by the pages HTML-code. The other views include the timeline and the map view. The map view shows the items on the map acquired from Google maps. The map view wasn't used on our visualization. The timeline shows the items on a rolling timeline. Two other new and so far undocumented views are the scatterplot and barchart. The scatterplot was used, but the barchart wasn't stable enough to be used yet. The Exhibit also provides search functions and filtering. These functions provide the core of the functionality of the tool. The filtering provide a realtime modifications to the visualizations, by adding and removing objects. The goal was to modify the basic visualizations and filtering to make interesting visualizations, but during the project it was discovered that the Exhibit cannot be easily modified. To modify Exhibit in any significant level you would have to change the javascript-code. Modifications made to the HTMLcode are the only modifications, that can be easily made. 2 Design process This chapter demonstrates the design process of the visualization. 2.2 Task structure of the group The desing process of the group consisted of weekly meetings held to share ideas and to keep everyone up with the state of the process. Much of the desing was also made individually and group members communicated via e- mail and IRC. The experience and capabilities of each group member seemed to be rather similar. No one of us has any good programming skills or work experience and we have taken only the basic programming courses at the university. However

5 5 (and because of that), everyone tried to participate basically both to design and implementation. Diagram 1 show the task structure of the group as it was discussed at the start of the project and how it was accomplished. Johanna Tiina Petri Juha 1 st phase 2 nd phase First brainstorming session sketches and ideas (everyone) documentation, scenarios collecting all the ideas and development suggestions together raw data data set testing data in Exhibit & initial design of the possible application Familiarizing Exhibit & initial design of the possible application 3 rd phase collecting film icons into a single file for further use 4 th phase Second brainstorming session 5 th phase overall layout of the prototype fixing the data set development of the prototype development of the prototype 6 th phase Collecting everything together, writing the document, finalizing the prototype Diagram 1: Task structure of the group 2.3 Guidelines We did not use any specific design patterns or a reference model, but most likely our process reminds user-centered design model. We have also taken a closer study on Craft s sketching-oriented method for information visualization design and Pfizner et al. unified taxonomic framework for information visualization. Our initial design was also made quite liberately and basically brainstormed with paper and pen. Because of the limited time and uncertainties of what we were capable to do, the group decided to rely on light weighted and agile software development model, and just agree that everyone does what one can and has skills and time for. Therefore we did not either hang on any particular guidelines or design

6 patterns Scenarios As mentioned in the introduction chapter, the main purpose of the application is to perform various movie related searches and present the results. Here are just a couple of scenarios to illustrate examples of the possible research tasks Scenario 1 A film enthusiast wants recommendations for her tonights film experience. She particularly wants to see a film that is directed by her favorite director Michael Mann, and it would also be nice, if Robert de Niro were on the cast. She launches the application and selects the favorable director and actor. The search is executed and result are shown Scenario 2 A film director wants to know what kind of film should he make next in order to make most money and gain fame. He does a search where he first selects the attribute box-office and especially the top criteria of the box-office scale. Then he selects the attribute rating and launches the search. On the result of that, the application shows films listed on groups by their popularity and with the box-office numbers to compare. 2.5 Sketches of the visualization user interface Illustration 1: Some sketches from the planning- and designing sessions.

7 7 Illustration 2: One of the first versions of Modavi. 2.6 The visualization After discussion and meditation here's what we decided to do The data set From the three possible data sets we were given for this subject we chose Internet Movie Database. There were several reasons for this. It featured those pieces of information we wanted to use in our visualization (title, genre, release time, criticism, comparable income, director, actors), as well as those we gave up for simplicity's sake (Oscars and other awards, producer, scriptwriter), so we would not have to dig anything from other places or discard it because of the initial data set. In this demo version of our visualization we did not want to use every single movie ever published, so we needed a clear method to choose some sample group, and IMDB featured reasonable lists of best and worst rated movies. Also, we have all used IMDB's web pages and found them useful, so it felt interesting to get to know it deeper. Unfortunately the tool we had chosen for the implementation does not support reading straight from a database. It can only read a javascript file, in which

8 8 items are organized in a certain way. Here is an example of one item, a movie called A Clockwork Orange: }, { "Release+Date" : " ", "Actor" : [ "McDowell, Malcolm", "Magee, Patrick", "Bates, Michael","Clarke, Warren", "Clive, John" ], "Genre" : [ "Crime", "Drama", "Thriller" ], "imageurl" : "Release+Year" : "1972", "kuvat/49.jpg", "Box+Office": "26,589,355", "Rating" : "8.5", "type" : "Item", "label" : "Clockwork Orange, A (1971)", "First+Genre" "Crime", "Director" : [ "Kubrick, Stanley" ], "Box+Office+range" : "30,000,000" We were able to automate some parts of the conversion process, but others had to be done by hand. The names of the actors and names of the cover images were copy-pasted and box office earnings had to chosen from a group of values. In addition, we were not certain at the beginning what attributes and forms of attributes we exactly needed. Changes had to be done gradually, almost every time we learned something new about Exhibit. For instance, to make Exhibit understand multiple values correctly they had to be inside square brackets and separated by quotation marks and commas. We also had to make a separate value for rounded numbers to make categorizing a possible feature and turn the date order upside down, from day first to year first format. All in all there were eight versions of the data file, though many changes were usually made at once Visual mappings and structures In the project's brainstorming stage we had many ideas of the data structures we could use. However, because of the limits of our implementation tool, we simply used nearly all the possible visual structures available. Some of them are quite new and do not have proper documentation yet, so we experienced constant crash problems with them. The ones we did not find useful were tile view and the map structure, powered by Google Maps. Because of this limitation, the power of our visualization comes strongly from

9 the way it is possible to combine different views and filters, not so much of a wholly new or experimental model of structuring. The prototype includes timeline, ordered item view, table view, scatterplot view and barchart view. 9 The same limitations encountered our plans of the visual mappings. Primary genres are coded with different colors, but they are only available in the timeline, in which genre color marks individual movies and shows in larger scale what kind of films there are mostly made in some time period. In the other structures all the movies are shown in the same way. In the timeline movies are also located based on their release date, as the name suggests. Figures in ratings and box offices are easily understood as scatterplot dots and barcharts. In the thumbnail view and table view location is also the key feature, but its reference object is up to the user to decide. In the menus each selection shows by number how many items there are behind this individual selection, which gives the user a quickly a good understanding of the features of selected movies The overall view The initial plan was to make it possible to compare movies based on any of our chosen features, especially stressing genres and ratings. We decided that our overall view will be based on genre classification in a way that one movie can belong to one or many genres and be more or less influenced by a specific genre. We think genres are this relevant because they affect so greatly on other judgments of any given movie. We had to forget the genre chart we planned, because we did not find a way to realize it with Exhibit, so the first view now shows best rated films and a small timeline in the top of the view. From the overall view the user can select some other primary or secondary classification (rating, box office income, genre, label, release date) and its order (a-z, z-a) or another view (thumbnails, table, rating/box office scatterplot or rating barchart), because we wanted the visualization to be flexible in order to make this tool suitable for very different types of uses. Many of these view changes show their best benefit after the user has limited the amount of films with different criteria, but they can be interesting to look at all by themselves. Numeral and categorical menus are located on the left side of the view and names on the right side. Ordering and view changing menus are located in the middle, right above the timeline. The main view, where the user can find the actual movies take most of the space in the middle of the layout. After finding a movie the user wants to know more, he/she can click it and get a detailed information in a small window. This feature works in both the main view and timeline.

10 10 3 Interaction design With Exhibit it was not possible to create very personal designs. All the search fields and different views (timeline, thumbnail view etc.) are created automatically. It was only possible to determine the position of these components and modify some appearance values like size and color. That s why the overall view is pretty much created in terms of Exhibit. The design process started with determining the placement of the main view (where the movies are listed with thumbnails). It was pretty obvious that it should be placed in the center of the page because it is the most important view and also the view where the interaction is shown. We also decided that it should fit in one window so there is no need to scroll the page down before the view could be seen (or at least part of it because with lots of movies this is impossible). In our case the interaction components are quite large. The problem was to find free space for filtering boxes and different views. Because of the requirements we decided for the main view, it was not possible to place the filtering boxes on top of the page. So the only reasonable possibility was to place them besides the main view. These boxes include Rating, Genre, Box Office, Release year, Movie (name), Actors and Directors. In all of these boxes it is possible to select multiple attributes at the same time. When something is selected all the other boxes are filtered in real time so that impossible crossselections are not possible. There are also search forms to make the selection easier. Because the main view was lacking visualization we also decided to add the timeline view to the front page. This increased the interactivity and also intensified the visualization experience. There are also two other views: table view and scatterplot view. These views did not fit to the main page so we had to separate them. The view can be changed from the menu in the center of a page. In the timeline view user can scroll the timeline with his/her mouse. By clicking the movie a more detailed view is opened. Timeline view is also updated and filtered in real time when user is changing any of the filters. The timeline view uses color coding: every different genre has its own color and the movies color in the timeline is based on that. In thumbnail view (main view) the movies can be sorted by any of the attributes (Rating, Box office, Genre and Name). It s also possible to sort the movies to ascending or descending order. When a user changes any of the filters from the filter boxes the view is updated and the movies that not meet the new requirements are dropped off. By clicking the name of the movie more detailed information can be seen. In table view the order of the movies can be changed by clicking the selected attribute (Name, Picture, Genre, Released, Box Office and Rating). They can also be sorted by ascending or descending order. By clicking the name of the

11 movie more detailed information can be seen. Scatterplot view has Box office values on its Y-axis and Ratings on its X-axis. A dot in the scatterplot is a movie (or many movies that meet the criteria). By clicking it more detailed view is opened Prototype The prototype was made using the Exhibit and because of the limitations of the tool, many features planned during design process could not be implemented. Although many features could not be implemented, the prototype itself is fully working and all the features in the prototype work as they should. Most of the planned features could be implemented in the prototype. The only major feature that could not be implemented was a visualization that would have shown the user lists of movies sorted by genre, each in their own column, and each column would be sorted by rating. The used data also limits the visualizations. Because the Exhibit only supports a few hundred items, the used data set also includes only 260 items. This limits the scatterplotvisualization especially, but also limits the filtering and search possibilities. Also the Exhibit uses its own datafile, so that used datafiles have to be modified to be used with Exhibit. 5 Open questions and further development ideas Because of the lack of time, programming skills and limitations of Exhibit we couldn t implement all that we wanted and planned. The reason of this chapter is to give some idea about what we would have wanted to implement. 5.1 Main view The layout should be scalable. The main view should have been arranged by genres. This could not be implemented because of the limitations of Exhibit. All the movie data should be updated directly from the IMDB database. Probably there are limitations and sections of an act that prevent this kind of database usage. Detailed view of a movie should open when the picture of the movie is clicked (now it opens only when the name is clicked). It should be possible to see different views at the same time (like timeline-, scatterplot- and table views).

12 5.2 Timeline view The colors of the genres should be changed so that they wouldn t be so close to each other. 5.3 Detailed view (of a movie) The layout should be designed. The view should include a picture. All the unnecessary data should be removed (like type and second box office information). The link should lead to the movies IMDB page. 5.4 Filtering and searching Dynamic search for nominal attributes. When a user types a single letter to the search field the attribute box should react and move to the selected letter (for example when a user types C to the actors search the search box should show actors starting with a letter C ). Box Office attributes should have limits ( , etc.) The gray color in the filter forms should be changed to something more eye catching. It should be possible to search for many different actors, directors and movies simultaneously by - for example - using some kind of search characters (AND, &, +, -). 5.5 Miscellaneous The database should include all the IMDB movie information (if that is technically and legally possible). 12