Requirements

The demo uses D3.js and hence needs a JavaScript-enabled browser to work correctly.

It has been tested to work correctly in Mozilla Firebox and Google Chrome.

It works best on a wide screen having 1660 or 1920 pixels in width.

In the following you find explanation of the interface and the interactions it support.

Go back to the demo!

The Interface

The user interface is divided into three parts:

• Overview:
  The left panel shows overview of how the movies are distributed to the genres.
  Notice: A movie can belong to multiple genres and therefore might be contained in multiple bars!
  The bottom bar chart shows a breakdown of the movies by the number of genres they belong to.
• The Radial Sets View:
  This is the main part of the interface.
  It shows how the genres overlap. Two genres overlap if there are movies that belong to each of them.
  This overlap is represented by an arc between the two genres. The number of these movies is encoded by the thickness of the arc.
  You can click all items in this view (bars, regions, sectors) to select the movies they represent.
  Also the tooltips for these items show information about what do they represent.
   
• The Detail View:
  This view shows details about selected movies such as title, release date, average rating and number of watches.
  The view is automatically updated after a selection is made in the main view.
  The view also shows textual search results.
   

Selection Instructions

When manipulating the selection by clicking on a bar or an arc, you have four options:

• Overwriting the existing selection: Simply click on a bar or an arc with the left mouse button
• Adding the new items to the existing selection: Hold the SHIFT key while clicking on the new items.
• Intersecting the new items with the existing selection: Hold the CTRL key while clicking on the new items.
• Subtracting the new items from the existing selection: Hold the ALT key while clicking on the new items.