Blockbuster - A Visual Explorer for Motion Picture Data

InfoVis 2007 Contest
Blockbuster – A Visual Explorer for Motion Picture Data

Contest webpage:

Authors and Affiliations:

Sebastian Rexhausen, University of Konstanz, rexhause@inf.uni-konstanz.de
Mischa Demarmels, University of Konstanz, demarmel@inf.uni-konstanz.de
Hans-Christian Jetter, University of Konstanz, jetter@inf.uni-konstanz.de
Mathias Heilig, University of Konstanz, heilig@inf.uni-konstanz.de
Jens Gerken, University of Konstanz, gerken@inf.uni-konstanz.de
Harald Reiterer, University of Konstanz, reiterer@inf.uni-konstanz.de

Tool(s):

The Blockbuster system is a stand-alone Java application, which was developed entirely by the Human-Computer Interaction Group (WG HCI) at the University of Konstanz. The system architecture and design rationale is based on the visual search system for digital libraries “MedioVis”, which has been developed at the WG HCI since 2003 (http://hci.uni-konstanz.de/MedioVis). For the InfoVis 2007 Contest newly developed visualizations, interaction techniques and visualization components (e.g. parallel bargrams, network visualization, visualization- and layout-management with “drag and drop”, multiple document interface with tab browsing…) were integrated. Furthermore Blockbuster uses open source libraries for web browser integration (JDesktop Integration Components JDIC, http://jdic.dev.java.net), database connectivity (PostgreSQL JDBC driver, http://jdbc.postgresql.org) and graph visualization (Java Universal Network/Graph Framework, http://jung.sourceforge.net).

Please find the Blockbuster video under http://hci.uni-konstanz.de/Blockbuster/InfoVis_Final.mov
Download the 2-page summary under http://hci.uni-konstanz.de/Blockbuster/Paper_InfoVis2007Contest_Blockbuster.pdf

TASK 1: Innovative Design

Like any user interface and interaction design process, designing information visualization should follow an end-user-centered approach, not only limited to pragmatic qualities like usability (respectively effectiveness and efficiency [1]) but also in regard to "hedonic” qualities [2] like aesthetics [3], "joy-of-use" or pleasurable design [4].

To achieve a rich and pleasing user experience the forerunner of Blockbuster "MedioVis" was developed following a holistic user-centered design process and was continuously tested with real end-users in usability labs and with large-scale observation of real work practice in the Library of the University of Konstanz through logging and analysis of interaction data. The knowledge gained from these user evaluations has been used to iteratively improve the interaction and user interface design of the system. The superiority by means of effectiveness, usability and attractiveness was empirically validated in user tests and published in [5]. Based on these insights and experiences gained from "MedioVis" we have formulated a design rationale for Blockbuster that has served as a guideline for the system design and as a heuristic for evaluating the system's user experience throughout development.

With respect to the pragmatic qualities of Blockbuster there are two design principles, which have been considered during the selection of employed visualization techniques and their integration into the consistent interaction paradigm of the system:

Blockbuster is end-user oriented and not only focused on expert but also on novice users. For such users understanding new visualization techniques is always a demanding challenge. This is especially true considering the nature of visualization as a technical science, "where the technical achievement of doing something new usually outweighs any questions on how useful or necessary a technique is" [6]. Therefore our intention with Blockbuster is to deliberately use and combine only well-proven and straightforward visualization techniques (e.g. scatter plots, network graphs, bargrams, tables, see part 2), which are especially appropriate for interactive exploration and direct manipulation (e.g. through dynamic queries [7], "on-the-fly" filtering or semantic zooming approaches [8]). Furthermore Blockbuster tries, wherever possible, to visualize each individual data set or entity (e.g. a film or a person) as a coherent visual object (e.g. glyphs, graph vertices, table rows) following Gestalt laws [9]. Blockbuster tries to avoid visualizations with high degrees of aggregation of data sets in single visual objects in order to facilitate interpretation by the novice user, who is familiar with thinking in individual objects not aggregations from the real world.
Inspired by multiple coordinated views [10] and snap-together visualizations [11] with linking and brushing interaction, the different visualization techniques in Blockbuster can be applied simultaneously on arbitrary subsets of the data and can be displayed in arbitrary combinations and screen layouts. The user can choose the subset of visualized data and the employed visualization techniques with direct manipulation, e.g. by selecting subsets and layouts or dragging visualizations into visualization slots with the mouse, or by entering filter criteria incrementally with the keyboard. This way Blockbuster is capable of supporting the user in gaining complex insights by iteratively applying different combinations of easy-to-understand visualization and filtering techniques to narrow down the amount of displayed information to relevant subsets and to explore the data in task-specific ways. The focus of the design of Blockbuster therefore lies on facilitating the selection, combination and mutual filtering of those views suited for the user's specific tasks with an appropriate direct-manipulative interaction design.

With respect to aesthetic and emotional aspects of Blockbuster there are two design principles, which were considered during the user interface and interaction design:

The selection of colors, transparencies, fonts, font sizes, icons and animations follows a consistent style guide based on the experiences from the MedioVis project and is aimed at achieving high attractiveness for the user. Instead of the pragmatic and simplistic look of common visual information systems, Blockbuster tries to evoke positive emotions by offering an organic and slightly playful look and feel (e.g. by using rounded edges, color gradients, shadows, …). Furthermore it takes up design concepts known from popular applications (e.g. Apple iTunes or Firefox) to create a feeling of familiarity and mastery for the user and to improve the system's learnability.
On the level of interaction design Blockbuster tries to create a rich and satisfying user experience by integrating external multimedia content (e.g. images, videos, maps, web pages) into the visualized data to provide a "browsing the shelves sensation for large collections of information items" as is recommended by [12]. This is especially provided by the novel zoomable table visualization "HyperGrid" (see task 2), which is able to provide the user with a quick and efficient access to all attributes and to external content harvested from resources like online databases (e.g. Wikipedia) or web services (Google Maps).

Following this design rationale we created a system aimed at demonstrating the potential of information visualization for end-user- or consumer-centered applications that blur the boundaries of information visualization, visual information seeking and browsing. Like Blockbuster's forerunner "MedioVis" the system illustrates how visualization techniques can support novice users in decision making and also how interactive visualization techniques could be used in a consumer-oriented context like e-commerce or information retrieval on the Web.

TASK 2: Effective Exploration

As decribed in the above design principles, the exploration of data within Blockbuster is based on the usage simultaneous views on the data set, which are linked by linking and brushing behavior. This allows identifying, focusing and selecting single data sets by complementary use of different visualization techniques. All these visualization combinations and their layout are organized on tabbed panes similar to a multiple-document interface with tab browsing known from state-of-the-art internet browsers. This way Blockbuster allows an easy switching between views and data subsets to allow the user to switch between her different tasks and to keep interesting views or intermediate results during the exploration process.

In Blockbuster all views within a tab are synchronized and allow mutual filtering of data. If the user reduces the amount of data in one visualization (e.g. by drawing a bounding box into the scatter plot and zooming into it or by selecting filtering criteria in the bargrams visualization), the data will be instantly removed from all other views on the tab. This way the consequences of filtering in one spot can be interpreted by looking at the effect on the other visible visualizations, which is especially helpful to identify and select data sets for further exploration or adding them to the user's "favorites".

... filtering in plot (bottom) ...

... filters HyperGrid (top).

Effective exploration within the individual visualizations is especially facilitated by the possibility for the user to freely assign film metadata to the visualization, e.g. to the axis of the scatter plot, to columns in the HyperGrid or to the attributes displayed in the parallel bar grams.

Following four visualization techniques were integrated into the Blockbuster system and can be chosen and arbitrarily arranged for complementary use to explore the data according to the user’s task:

HyperGrid - a novel zoomable table visualization developed by the WG HCI which allows relating, sorting and comparing individual data sets as rows in a table [13]. The semantic zooming functionality enables the user to control the amount of displayed information in each table cell by direct manipulation with the mouse. Zooming into a table cell leads to an enlargement of the cell and more detailed information about the item. After a certain level of detail is reached, external multimedia information becomes visible and can be explored within the table as well. This exploration entirely takes place in a sticky browser window overlaying the sizable table cell. This way the HyperGrid allows a free exploration of rich external content without leaving the table as context, orientation frame and conceptual model. This semantic zooming approach overcomes typical problems of loss of orientation or change blindness [14], which typically arise from rapid changes in page layouts, modalities or screen content distant from the current locus of attention. Furthermore the user effort for window management is reduced by this variant of "elastic windows" [15].

HyperScatter - the HyperScatter is a zoomable two-dimensional scatter plot which allows an overview and the exploration of correlations between quantitative data. The mapping of attributes to the axis follows a traditional scheme as it is known from visualization like the FilmFinder [16]. The HyperScatter is effective for the selection, zooming and filtering of arbitrary rectangular subsections of the plot and therefore especially supports quantitative filtering and reasoning.
The functionality of semantic zooming and details on demand was inspired by the results of research work at the WG HCI in the field of zoomable scatter plots for mobile devices [17]: Details on demand about displayed films are revealed in a zoomable and transparent information layer floating above the plot, regardless whether the items are single objects or multiple data points. To receive further details a semantic zoom similar to the table cells in the HyperGrid can be initiated by the user.

Parallel Bargrams - the parallel bargrams in Blockbuster follow the work of [18] and [19] and have strong similarities to their EZChooser and MultiNav approaches. In Blockbuster a single bargram serves as a visualization of the size of data subsets with certain attributes (e.g. films of a certain language). Multiple attributes can be specified by displaying several bargrams of different attributes simultaneously. These bargrams are displayed with the same horizontal width and position one below the other. The individual data sets displayed within the bargrams are connected with lines. Each line can be interpreted as one data set (or one film) connecting the bargrams according to its individual attributes. This way the connecting lines between the parallel bargrams function as a parallel coordinate visualization of the data [20], which allows the user to discover correlations and typical distributions. Furthermore the bargrams can be used as an interactive filter to reduce the amount of data in synchronized visualizations by selecting a combination of sections (or attribute values) in the bargrams with the mouse.

Network Visualization - the network visualization allows analyzing the relation between key persons of different categories (e.g. actors, directors, writers, …) or important user tags (e.g. plot keywords from the IMDb). The network visualizes the most occurring persons or keywords in the data as vertices and aggregates all films connecting these vertices in the edges. The number of occurrences is mapped to the color and size of the vertices' shapes. The shapes represent the category of the vertex (e.g. a circle for an actor, a rectangle for an director, …). The amount of films within an edge is mapped to its thickness and transparency. Depending on the graph density and size a Fruchterman-Reingold [21] or a spring layout algorithm is used for placing the vertices using the JUNG open source library for graph drawing. In case of the spring layout the number of films contained in an edge is inversely mapped on its length: The more films are contained in an edge, the shorter is the edge. The network is useful to identify clusters of persons or keywords that often occur together. For example it is possible to identify the favorite composer, cinematographer or actor for a certain director or the most popular user keywords among action movies.

TASK 3: Data Specific Tasks

According to the user-centered approach during the development of Blockbuster, we have selected data specific tasks, which should correspond to those decisions that film producers have to make throughout the process of motion picture production in reality. Hereby we assume that the data of past US movie releases can be regarded as an indicator for the commercial success of future motion pictures and that the user of Blockbuster is interested in producing a film with a good relation between budget and box office revenues. The data used in our scenario contains all US movie releases from 1970 to 2007 from the IMDb and therefore exceeds the amount of data, which was provided for the InfoVis Contest. Furthermore the 32.000 data sets were enriched with additional data available from the publicly available IMDb offline database files. Due to the nature of quantitative data like "budget" or "user rating" we have not addressed missing value issues by sophisticated interpolation or similar strategies.

Task 3.1: Which actors were active in the genres adventure and action in the recent years and have been involved in successful movies? How is their recent success rate compared to that in the past?

Process:
- Reduce the data with clicking a bargram visualization to filter the genres "adventure" and "action" from 1996-2007.
- Use a combination of scatter plot (visualizing "gross" vs. "production year"), bargrams (visualizing IMDb rating, production year and gross/budget) and network (visualizing key actors)
- Select recent years with a bounding box in the HyperScatter. The selected films are highlighted in all other visualizations.
- Move the mouse over the actors in the network visualization to highlight their films in all other visualizations. Look for active actors represented by large circles as vertices. (We chose Samuel L. Jackson as an example because he has been the most active actor).
- Look at the bargrams to discover that the lines representing the recent films are converging towards the commercially less successful films in the left section of the lowest bargram.
- Look at the bargrams to discover that the lines leading to the topmost bargram with the user rating are scattered and approximately equally distributed.

Image 3.1:
Insight: Samuel L. Jackson has been the most active actor in genres of adventure and action movies from 1996-2007. While his commercial success is clearly decreasing in the last years the rating of his movies remains approximately equally distributed in a range of 5.0 to 8.0.

Task 3.2: Is there a typical relation between boxoffice gross revenues and rentals revenues?

Process:

Reduce the data with the HyperGrid to remove all movies without data for "gross" and "rentals". There are 721 items remaining.
Display "rentals" vs. "gross" in the HyperScatter: a lot of the movies are plotted close to a diagonal line with a slope of gross/rentals around 2.
Count the outliers by dragging bounding boxes to select them. Around 120 of 721 movies do not lie within the range of the diagonal.

Image 3.2.1:
Insight: There seems to be a linear relation between boxoffice gross revenues and rentals revenues for around 80% of the movies. In these cases the revenues from rentals are around 50% of those from the boxoffice.
This arises the question if this linear relation has changed over the decades?

Process:
- Display parallel bargrams in addition to the HyperScatter. Select "Production Year" as one attribute in the bargram.
- By selecting one or more time intervals in the bargram the HyperScatter only plots the movies within the selected time intervals. By looking at the changes resulting from switching certain intervals on and off the user can interactively explore the changes over time.

Image 3.2.2:
Insight: The linear relation between boxoffice and rentals stays linear over the past 40 years.

Task 3.3: Who were the commercially most successful teams among the producers in 2000 to 2005? Who were the teams with the best IMDb ratings?

Process:
- Reduce the data with the HyperGrid to remove all movies without data for "gross/budget" and "rating". There are 2810 items remaining.
- Display the social network (with producers) and parallel bargrams simultaneously. Select "gross/budget", "production year" and "rating" as attributes in the bargrams.
- Only display the data for films between 2000 and 2005 by selecting the corresponding sections of the bargram for "production year".
- Image 3.3.1
- Insight: For discovering commercially successful producer teams, select a section with high "gross/budget" from the bargrams (e.g. the "11.19 or above" section). The social network then only shows the producers who were involved in films with 11 times or higher revenue than budget during 2000 and 2005. The most successful teams can be identified by looking at the size and thickness of the vertices and edges and identifying closely related groups.
  
  The producers and their cooccurences can be explored by hovering over the vertices and edges with the mouse. It becomes clear that Bob and Harvey Weinstein have been producing 13 commercially very successful films in the selected time period and can be considered as a winning team in respect to commercial success.
- Image 3.3.2
- Insight: We would like to check, if the Weinsteins are equally successful in respect to the user rating in the IMDb. The filtering in the "gross/budget" bargram is deactivated and the filtering in the "rating" bargram is set to user rating 9.0 and above. There remain two very successful networks of producers in the visualization (see image above). One network (top left) is the producer team of the "Kill Bill" movies, the other is consisting of the producers of "Lord of the Rings" (bottom right). Again the Weinsteins play an important role: they are the connection between the two production networks.

Acknowledgements:

We would like to thank Werner König and Daniel Klinkhammer for their valuable input and all the contributors to the JDIC and JUNG Java open source projects which made Blockbuster possible.

References:

[1] I. O. f. Standardization, "ISO 9241-11: Ergonomic requirements for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability." vol. 2003, 1996.
[2] M. Hassenzahl, A. Platz, M. Burmester and K. Lehner, "Hedonic and ergonomic quality aspects determine a software's appeal," in CHI '00: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 2000, pp. 201-208.
[3] N. Tractinsky, "Aesthetics and apparent usability: Empirically assessing cultural and methodological issues," in CHI '97: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1997, pp. 115-122.
[4] P. W. Jordan, Designing Pleasurable Products : An Introduction to the New Human Factors. London: Taylor & Francis, 2000
[5] C. Grün, J. Gerken, H. Jetter, W. König and H. Reiterer, "MedioVis - A user-centred library metadata browser." in Proceedings of the 9th European Conference, ECDL, Research and Advanced Technology for Digital Libraries, 2005, pp. 174-185.
[6] R. Kosara. 2006, Visualization criticism - A new way of thinking about visualization. EagerEyes.com (last checked on 13 July 2007). http://eagereyes.org/VisCrit/VisualizationCriticism.html, 2006.
[7] C. Ahlberg, C. Williamson and B. Shneiderman, "Dynamic queries for information exploration: An implementation and evaluation," in CHI '92: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, 1992, pp. 619-626.
[8] K. Perlin and D. Fox, "Pad: An alternative approach to the computer interface," in SIGGRAPH '93: Proceedings of the 20th Annual Conference on Computer Graphics and Interactive Techniques, 1993, pp. 57-64.
[9] C. Ware, Information Visualization: Perception for Design., 2nd ed. San Francisco, CA, USA: Morgan Kaufmann Publishers Inc, 2004
[10] M. Q. W. Baldonado, A. Woodruff and A. Kuchinsky, "Guidelines for using multiple views in information visualization," in AVI '00: Proceedings of the Working Conference on Advanced Visual Interfaces, 2000, pp. 110-119.
[11] C. North and B. Shneiderman, "Snap-together visualization: A user interface for coordinating visualizations via relational schemata," in AVI '00: Proceedings of the Working Conference on Advanced Visual Interfaces, 2000, pp. 128-135.
[12] M. Hearst, A. Elliott, J. English, R. Sinha, K. Swearingen and K. Yee, "Finding the flow in web site search," Commun ACM, vol. 45, pp. 42-49, 2002.
[13] H. Jetter, J. Gerken, W. König, C. Grün and H. Reiterer, "HyperGrid - accessing complex information spaces," in People and Computers XIX - the Bigger Picture, Proceedings of HCI 2005, 2005
[14] R. Spence, Information Visualization : Design for Interaction. ,2nd ed.New York: Addison Wesley, 2007
[15] E. Kandogan and B. Shneiderman, "Elastic windows: Improved spatial layout and rapid multiple window operations," in AVI '96: Proceedings of the Workshop on Advanced Visual Interfaces, 1996, pp. 29-38.
[16] C. Ahlberg and B. Shneiderman, "Visual information seeking using the FilmFinder," in CHI '94: Conference Companion on Human Factors in Computing Systems, 1994, pp. 433-434.
[17] T. Buering, J. Gerken and H. Reiterer, "User Interaction with Scatterplots on Small Screens - A Comparative Evaluation of Geometric-Semantic Zoom and Fisheye Distortion," IEEE Trans. Visual. Comput. Graphics, vol. 12, pp. 829-836, 2006.
[18] K. Wittenburg, T. Lanning, M. Heinrichs and M. Stanton, "Parallel bargrams for consumer-based information exploration and choice," in UIST '01: Proceedings of the 14th Annual ACM Symposium on User Interface Software and Technology, 2001, pp. 51-60.
[19] T. Lanning, K. Wittenburg, M. Heinrichs, C. Fyock and G. Li, "Multidimensional information visualization through sliding rods," in AVI '00: Proceedings of the Working Conference on Advanced Visual Interfaces, 2000, pp. 173-180.
[20] A. Inselberg and B. Dimsdale, "Parallel coordinates: A tool for visualizing multi-dimensional geometry," in VIS '90: Proceedings of the 1st Conference on Visualization '90, 1990, pp. 361-378.
[21] T. M. J. Fruchterman and E. M. Reingold, "Graph Drawing by Force-directed Placement," Software Pract Exper, vol. 21, pp. 1129-1164, 1991.

InfoVis 2007 Contest Blockbuster – A Visual Explorer for Motion Picture Data