Interactive UpSet Plots on the Web
UpSet Web is focused on creating task-driven aggregates, communicating the size and properties of aggregates and intersections, and a duality between the visualization of the elements in a dataset and their set membership.
UpSet has three guiding principles:
- Use perceptually efficient visual encodings, i.e., make it easy to read the data accurately.
- Make it possible to not just visualize intersections, but to visualize combinations of intersections (e.g., all the intersections involving two particular sets).
- Visualize attributes about the intersections. It is not just the magnitude of an intersection that is interesting, but we also want to know whether the data associated with intersection is different or similar.
To get an idea of what the interactive UpSet is about, you can watch this 30-second video:
UpSet Preview Video
In many cases, analysts are interested in understanding more complex set relationships than just individual intersections. UpSet addresses this by making use of aggregations. Aggregations summarize multiple intersection according to a specific pattern. The figure on the right shows an aggregation by sets. Note the extra row labeled “A” - it summarizes all of the intersections where A participates, as shown in the corresponding Venn diagram. These aggregations can show data just the same way as individual intersections can, but they can be collapsed to show only the aggregate, as is the case for B and C in the figure.
UpSet supports various types of aggregation. The figure on the left, for example, aggregates the Simpsons dataset by degree, but aggregation by sets, pairwise aggregation, and nested aggregation is also possible.
A concept closely related to aggregation is querying: UpSet allows users to define a group of intersections that must, may, or must not include a specific set. The query in the following picture defines a subset of Simpsons characters that are either exclusively male or that have blue hair and aren’t male. The first part of the query (first row) is indicated by two empty circles in the evil and blue hair cells. This part is combined as an “or” with the second part, that is set to “must” for blue hair, “may” for evil and “must not” for male.
UpSet can also query based on attributes. For example, you could define a query that only includes all Simpsons characters that are older than 18 years.
UpSet visualizes numerical attributes of the intersections and aggregates as boxplots in line with the matrix rows (see image below). Additional attributes can be visualized for selections in the Element View, for example, in scatterplots or histograms. The figure below shows two queries, a violet and a green one. The green query is active (see the green overlays on the bars, the green table header and the green dots in the scatterplot). The violet query is evident in the scatterplot and is indicated with triangles on the bars.
The elements of the active selection are shown in a scrollable table.
The new version of the tool is live here.
The features in new version are:
- Data Upload
- Provenance Integration
- Embedding as iFrames (see above)
- Downloading of selections
- Use UpSet as library
The embed code for the above widget is:
Do you provide documentation for UpSet?
Yes, through the GitHub Wiki. Right now it only covers data import, but more will follow soon. Don’t forget to watch the videos! They give you a good idea on how things are done.
Which Browsers are supported?
We currently test only on the latest version of Google Chrome. Other recent browsers might work too.