Aggreset Summary

AggreSet, introduced by Yalcin et al. [1] is a rich, scalable and interactive exploration tool of set-typed data using a 2-D grid which encodes set categories, set degrees and set-pair intersections. AggreSet visualizes datasets including multi-value attributes where each element can have multiple set memberships. These set memberships are encoded as set-pair intersections and visualized as size-dependent circles connecting two set categories within the 2-D aggregation matrix. In the matrix, the categories are placed only once in the diagonal where the intersections are encoded at the horizontal and vertical axis. In addition to the aggregation matrix, AggreSet uses histograms for set-lists, set-degrees and set attributes. Those histograms are used for selections and filtering purposes of the set aggregations of interest. The basic ordering of the set categories in the aggregation matrix arranges the categories with the highest intersection to the top right corner of the matrix and categories with fewer intersections to the bottom left corner. Furthermore, Yalcin et al. implemented a perceptional ordering mechanism which places connected sets along the diagonal of the matrix. This should reduce the salt and pepper effect which can occur through the basic sorting and ordering mechanism of the set categories.

Inspiration

AggreSet: Rich and Scalable Set Exploration using Visualizations of Element Aggregations

Fig. 1. Exploration of a movie dataset with multiple genres (sets) and ratings using AggreSet. Aggregate histograms are used for set-list and set-degrees, whereas the aggregate matrix (left) is used for set-pair intersections. The gray distributions visualize the number of elements per aggregate. The Action genre is selected by mouse-over . Mouse click will filter. We compare Romance (black lines) to Action (orange areas). 1 Most movies (+2k) have one genre. 7 movies have maximum (5) genres. 2 The Godfather is the only Action movie in the rating-sorted movie list. 3 Of Thrillers, 133 have Action (orange bar) and few have Romance (black line). 4 More than 50% of SciFi and Adventure movies have Action, while very few have Romance. 5 Thriller is more common with Action than with Children movies (circle size). 6 There is no Children movie with Crime (empty intersection) [1]

Screenshot of Our Application

AggreSet Screenshot

Goal

The primary goal of our re-implementation of AggreSet is to simplify the interaction possibilities and to support the interactions with context menus showing additional information. This information should help the user understand and interpret the currently visible parts of the visualization more quickly. Furthermore, using the different filtering options when hovering, clicking on elements and applying brushing it is possible to easily and interactively explore the data and gain information about its characteristics as well as discover correlations and connections.

App (Self-hosted)

Go to Vis2 AggreSet Demo (by Elitza Vasileva and Bernhard Pointner) - Try Google Chrome, if it does not work!

Video

Features

  • Basic aggregation/relation matrix
  • Additional set histogram
  • Interactive exploration of data with connections between visualizations
  • Cross-Highlighting of data between visualizations
  • Cross-Filtering and Cross-Selection of data between visualizations
  • Brushing and Details on Demand

Languages and Libraries

  • Web Technology Stack: HTML 5, CSS3, JavaScript ECMAScript 6
  • D3js as the external visualization library
  • Bootstrap 4 as CSS extension for faster style visualization elements.
  • Crossfilter to process the data, if necessary.

Our visualization is fully based on web/script languages like HTML, CSS and JavaScript. For the charts, D3.js are used as the visualization library. For filtering the data depending on the different dimensions we use Crossfilter.

Data

In the paper by Yalcin et al. they tested AggreSet with many different datasets that include multi-value attributes. Among these are the genres of movies, the relations in ingredients of different dishes, relations in border countries etc. Since so many different datasets were already tested it makes it difficult to find an appropriate choice for our implementation. For this reason, we also use a movie dataset provided by IMDB. Using this dataset we explore the genres of the movies - how many genres the movies have, how many genres are there in total as well as what are the intersections of these genres.

Source: Link to data

Source Code + Installation

GitHub Project: https://github.com/bernhard-pointner/vis2

Installation procedure
  • Clone our repo to your computer
  • Install an Apache Webserver like XAMPP or MAMP
  • Copy the cloned repo to your Webserver specific folder from where localhost starts (in XAMPP it would be C:\xampp\htdocs)
  • Start your Apache Webserver on the default port (80)
  • Open http://localhost/[..]/src with your browser (Google Chrome is recommended and the Application is tested in Chrome!)