In this tutorial the basic widget functionality is explained.
Let’s begin with importing the library
Note: The input data will be described in more detail in the next section
example of list input (list of named vectors, each having a list of contained elements)
An UpSet plot consists of three areas:
Moving the mouse over a bar or a dot will automatically highlight the corresponding set or set intersection in orange. In addition, the number elements which are shared with the highlighted sets are also highlighted. This gives a quick overview how sets and set intersections are related to each other. More details, in the Interaction section.
In the current version the UpSet.js wrapper supports three input data formats: list, expression, and through a data.frame.
The first format is a list. The key of the list entry is the set name while the value is the vector of elements this set has. See also UpsetR
The second version is a a variant in which not the elements are given but their cardinality. Thus, besides the sets also all the set intersections have to be defined. Moreover, this version has only limited interactivty support.
The last format is a a binary/boolean data frame. The rownames contain the list of elements. Each regular column represents a set with boolean values (e.g., 0 and 1) whether the row represented by the rowname is part of the set or not.
The following data frame defines the same set structure as the dictionary format before.
# boolean table with rows = elements, columns = sets, cell = is row part of # this set dataFrame <- as.data.frame(list(one = c(1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1), two = c(1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0), three = c(1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1)), row.names = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m")) upsetjs() %>% fromDataFrame(dataFrame)
In case of an
expressionInput the combinations of sets are directly given.
generateUnions let you customize the generation of the set combinations
min… minimum number of sets in a set combination
max… maximum number of sets in a set combination, NULL means no limit
empty… include empty set combinations with no elements. By default they are not included
order.by… sort set combinations either by
cardinality(number of elements) or by
degree(number of sets
limit… show only the first limit set combinations
upsetjs() %>% fromList(listInput) %>% generateIntersections(min = 2, max = NULL, empty = T, order.by = "cardinality", limit = NULL)
by setting the
interactiveFlag flag, the user can interactively highlight sets within the chart.
setSelection one manually sets the selection that is currently highlighted. The set is referenced by its name, a vector with multiple names is detected as an intersection name
In case UpSet.js will be used in a R Shiny context, it reports the current selection based using two custom events:
<outputid>_hoverwhen the user hovers over an item
<outputid>_clickwhen the user clicks on an item
<outputid>_contextMenuwhen the user right clicks on an item
both events are list objects with a
name attribute that is either
NULL or the name of the set. In addition, there is an
elems attribute which contains the list of highlighted elements.
See also Shiny examples at events.R
besides the selection UpSet.js supports defining queries. A query can be a list of elements or a set that should be highlighted. A query consists of a name, a color, and either the list of elements or the set (combination) to highlight.
UpSet.js supports rendering boxplots as aggregations for numerical attributes of elements and mosaic plots for categorical attributes. The are given as part of the data frame. The attributes element has to be a list or a data frame.
dataFrame <- as.data.frame(list(one = c(1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1), two = c(1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0), three = c(1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1)), row.names = c("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m")) upsetjs() %>% fromDataFrame(dataFrame, attributes = list(attr = runif(nrow(dataFrame))))
UpSet.js supports thre themes: light, dark, and vega. The theme can be set by the