UpSet plots
Chart.UpSet compares membership across several sets using a dot matrix and bar charts.
It is useful when a Venn diagram would become difficult to read.
Each matrix column represents an exclusive intersection: a member belongs to every set marked with a dark dot and to none of the sets marked with a pale dot. Connecting lines join the dark dots. The bar above a column counts its members; the horizontal bars on the left show the full set sizes. Intersections are ordered by decreasing size by default.
Basic example
Provide one unique label for each set, in the same order as the sets input. Members are strings,
and duplicate entries within a set are ignored. Here, A and B share "2" and "3" exclusively;
"1" belongs to all three sets and is counted in a separate column.
The default MinIntersectionSize is 5. This small example uses 1 to show every nonempty
intersection, including those containing just one member.
open Plotly.NET
let labels = [| "A"; "B"; "C" |]
let sets =
[|
[| "1"; "2"; "3"; "4"; "5"; "6"; "11" |]
[| "1"; "2"; "3"; "7"; "8"; "9"; "10"; "12"; "13" |]
[| "1"; "4"; "5"; "6"; "7"; "8"; "9"; "10"; "14"; "15"; "16" |]
|]
let upset =
Chart.UpSet(
labels = labels,
sets = sets,
MinIntersectionSize = 1
)
|> Chart.withTitle "Membership across three sets"
|> Chart.withSize(640, 500)
|> Chart.withMarginSize(Left = 65, Right = 25, Top = 65, Bottom = 45)
Filtering and styling
Raise MinIntersectionSize to hide small intersections. The set-size bars still count all members
of each input set, including members whose intersection columns have been filtered out.
MainColor controls the bars and the active membership dots and lines. SecondaryColor controls
the inactive dots. MarkerSize, TextFont, and TextFontLabel adjust the matrix markers,
axis titles, and set labels respectively.
let upsetStyled =
Chart.UpSet(
labels = labels,
sets = sets,
MinIntersectionSize = 2,
MainColor = Color.fromHex "#2A6F97",
SecondaryColor = Color.fromHex "#DCE6ED",
MarkerSize = 18,
TextFont = Font.init(Family = StyleParam.FontFamily.Arial, Size = 14.),
TextFontLabel = Font.init(Family = StyleParam.FontFamily.Arial, Size = 16.)
)
|> Chart.withTitle "Intersections with at least two members"
|> Chart.withSize(640, 500)
|> Chart.withMarginSize(Left = 65, Right = 25, Top = 65, Bottom = 45)
Adding member measurements
SetData adds feature plots above the intersection counts. Each map associates a member identifier
with a measurement and must contain every member in every displayed intersection. A map covering
only one input set is insufficient; this example builds one map for the entire union.
Provide one (chart function, title) pair in SetDataChartsTitle for each map in SetData, in the
same order. The chart function receives the values for one exclusive intersection at a time.
Here, a box plot shows the measurements for each displayed intersection. For this illustration,
a member's score is simply the numeric value of its identifier.
let memberScores =
sets
|> Seq.collect id
|> Seq.distinct
|> Seq.map (fun memberId -> memberId, float (int memberId))
|> Map.ofSeq
let scoreBoxPlot (scores: float[]) =
Chart.BoxPlot(
Y = scores,
BoxPoints = StyleParam.BoxPoints.All,
Jitter = 0.15,
PointPos = 0.,
MarkerColor = Color.fromHex "#2A6F97",
OutlineColor = Color.fromHex "#2A6F97"
)
let upsetWithScores =
Chart.UpSet(
labels = labels,
sets = sets,
MinIntersectionSize = 2,
SetData = [ memberScores ],
SetDataChartsTitle = [ (scoreBoxPlot, "Member score") ],
MarkerSize = 18,
TextFont = Font.init(Family = StyleParam.FontFamily.Arial, Size = 14.),
TextFontLabel = Font.init(Family = StyleParam.FontFamily.Arial, Size = 16.)
)
|> Chart.withTitle "Member scores within each intersection"
|> Chart.withSize(640, 600)
|> Chart.withMarginSize(Left = 65, Right = 25, Top = 65, Bottom = 45)
<summary> Contains mutable global default values. Changing these values will apply the default values to all consecutive Chart generations. </summary>
type DisplayOptions = inherit DynamicObj new: unit -> DisplayOptions static member addAdditionalHeadTags: additionalHeadTags: XmlNode list -> (DisplayOptions -> DisplayOptions) static member addChartDescription: description: XmlNode list -> (DisplayOptions -> DisplayOptions) static member combine: first: DisplayOptions -> second: DisplayOptions -> DisplayOptions static member getAdditionalHeadTags: displayOpts: DisplayOptions -> XmlNode list static member getChartDescription: displayOpts: DisplayOptions -> XmlNode list static member getDocumentCharset: displayOpts: DisplayOptions -> string static member getDocumentDescription: displayOpts: DisplayOptions -> string static member getDocumentFavicon: displayOpts: DisplayOptions -> XmlNode ...
--------------------
new: unit -> Plotly.NET.DisplayOptions
<summary> Sets how plotly is referenced in the head of html docs. </summary>
static member Chart.withTitle: title: string * ?TitleFont: Font -> (GenericChart -> GenericChart)
static member Chart.withSize: ?Width: int * ?Height: int -> (GenericChart -> GenericChart)
<summary> The central type that gets created by all Chart constructors is GenericChart, which itself represents either a single chart or a multi chart (as a Discriminate Union type). A GenericChart consists of four top level objects: Trace (multiple of those in the case of a MultiChart), Layout, Config, and DisplayOptions. - `Trace` is in principle the representation of a dataset on a chart, including for example the data itself, color and shape of the visualization, etc. - `Layout` is everything of the chart that is not dataset specific - e.g. the shape and style of axes, the chart title, etc. - `Config` is an object that configures high level properties of the chart like making all chart elements editable or the tool bar on top - `DisplayOptions` is an object that contains meta information about how the html document that contains the chart. </summary>
<summary> Plotly color can be a single color, a sequence of colors, or a sequence of numeric values referencing the color of the colorscale obj </summary>
type Font = inherit DynamicObj new: unit -> Font static member init: ?Family: FontFamily * ?Size: float * ?Color: Color -> Font static member style: ?Family: FontFamily * ?Size: float * ?Color: Color -> (Font -> Font)
<summary> Font type inherits from dynamic object </summary>
--------------------
new: unit -> Font
<summary> Names of installed font families </summary>
val float: value: 'T -> float (requires member op_Explicit)
--------------------
type float = System.Double
--------------------
type float<'Measure> = float
val int: value: 'T -> int (requires member op_Explicit)
--------------------
type int = int32
--------------------
type int<'Measure> = int
module Map from Microsoft.FSharp.Collections
--------------------
type Map<'Key,'Value (requires comparison)> = interface IReadOnlyDictionary<'Key,'Value> interface IReadOnlyCollection<KeyValuePair<'Key,'Value>> interface IEnumerable interface IStructuralEquatable interface IComparable interface IEnumerable<KeyValuePair<'Key,'Value>> interface ICollection<KeyValuePair<'Key,'Value>> interface IDictionary<'Key,'Value> new: elements: ('Key * 'Value) seq -> Map<'Key,'Value> member Add: key: 'Key * value: 'Value -> Map<'Key,'Value> ...
--------------------
new: elements: ('Key * 'Value) seq -> Map<'Key,'Value>
static member Chart.BoxPlot: dataEncoded: EncodedTypedArray * orientation: StyleParam.Orientation * ?Name: string * ?ShowLegend: bool * ?Text: 'a * ?MultiText: 'a seq * ?FillColor: Color * ?MarkerColor: Color * ?Marker: TraceObjects.Marker * ?Opacity: float * ?WhiskerWidth: float * ?BoxPoints: StyleParam.BoxPoints * ?BoxMean: StyleParam.BoxMean * ?Jitter: float * ?PointPos: float * ?OutlineColor: Color * ?OutlineWidth: float * ?Outline: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?Notched: bool * ?NotchWidth: float * ?QuartileMethod: StyleParam.QuartileMethod * ?SizeMode: StyleParam.BoxSizeMode * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible)
static member Chart.BoxPlot: data: #System.IConvertible seq * orientation: StyleParam.Orientation * ?Name: string * ?ShowLegend: bool * ?Text: 'b * ?MultiText: 'b seq * ?FillColor: Color * ?MarkerColor: Color * ?Marker: TraceObjects.Marker * ?Opacity: float * ?WhiskerWidth: float * ?BoxPoints: StyleParam.BoxPoints * ?BoxMean: StyleParam.BoxMean * ?Jitter: float * ?PointPos: float * ?OutlineColor: Color * ?OutlineWidth: float * ?Outline: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?Notched: bool * ?NotchWidth: float * ?QuartileMethod: StyleParam.QuartileMethod * ?SizeMode: StyleParam.BoxSizeMode * ?UseDefaults: bool -> GenericChart (requires 'b :> System.IConvertible)
static member Chart.BoxPlot: ?X: 'a seq * ?MultiX: 'a seq seq * ?Y: 'b seq * ?MultiY: 'b seq seq * ?Name: string * ?ShowLegend: bool * ?Text: 'c * ?MultiText: 'c seq * ?FillColor: Color * ?MarkerColor: Color * ?Marker: TraceObjects.Marker * ?Opacity: float * ?WhiskerWidth: float * ?BoxPoints: StyleParam.BoxPoints * ?BoxMean: StyleParam.BoxMean * ?Jitter: float * ?PointPos: float * ?Orientation: StyleParam.Orientation * ?OutlineColor: Color * ?OutlineWidth: float * ?Outline: Line * ?AlignmentGroup: string * ?OffsetGroup: string * ?Notched: bool * ?NotchWidth: float * ?QuartileMethod: StyleParam.QuartileMethod * ?SizeMode: StyleParam.BoxSizeMode * ?UseDefaults: bool -> GenericChart (requires 'a :> System.IConvertible and 'b :> System.IConvertible and 'c :> System.IConvertible)
<summary> Visualizes the distribution of the input data as a box plot. A box plot is a method for graphically demonstrating the locality, spread and skewness groups of numerical data through their quartiles. The default style is based on the five number summary: minimum, first quartile, median, third quartile, and maximum. The sample data from which statistics are computed is set in `x` for vertically spanning boxes and in `y` for horizontally spanning boxes. </summary>
<param name="X">Sets the x sample data or coordinates</param>
<param name="MultiX">Sets the x sample data or coordinates. Use two inner arrays here to plot multicategorial data</param>
<param name="Y">Sets the y sample data or coordinates</param>
<param name="MultiY">Sets the y sample data or coordinates. Use two inner arrays here to plot multicategorial data</param>
<param name="Name">Sets the trace name. The trace name appear as the legend item and on hover.</param>
<param name="ShowLegend">Determines whether or not an item corresponding to this trace is shown in the legend.</param>
<param name="Text">Sets a text associated with each datum</param>
<param name="MultiText">Sets individual text for each datum</param>
<param name="FillColor">Sets the fill color. Defaults to a half-transparent variant of the line color, marker color, or marker line color, whichever is available.</param>
<param name="MarkerColor">Sets the marker color.</param>
<param name="Marker">Sets the marker for the box (use this for more finegrained control than the other marker-associated arguments).</param>
//
<param name="Opacity">Sets the opacity of this trace.</param>
<param name="WhiskerWidth">Sets the width of the whiskers relative to the box' width. For example, with 1, the whiskers are as wide as the box(es).</param>
<param name="BoxPoints">If "outliers", only the sample points lying outside the whiskers are shown If "suspectedoutliers", the outlier points are shown and points either less than 4"Q1-3"Q3 or greater than 4"Q3-3"Q1 are highlighted (see `outliercolor`) If "all", all sample points are shown If "false", only the box(es) are shown with no sample points Defaults to "suspectedoutliers" when `marker.outliercolor` or `marker.line.outliercolor` is set. Defaults to "all" under the q1/median/q3 signature. Otherwise defaults to "outliers".</param>
<param name="BoxMean">If "true", the mean of the box(es)' underlying distribution is drawn as a dashed line inside the box(es). If "sd" the standard deviation is also drawn. Defaults to "true" when `mean` is set. Defaults to "sd" when `sd` is set Otherwise defaults to "false".</param>
<param name="Jitter">Sets the amount of jitter in the sample points drawn. If "0", the sample points align along the distribution axis. If "1", the sample points are drawn in a random jitter of width equal to the width of the box(es).</param>
<param name="PointPos">Sets the position of the sample points in relation to the box(es). If "0", the sample points are places over the center of the box(es). Positive (negative) values correspond to positions to the right (left) for vertical boxes and above (below) for horizontal boxes</param>
<param name="Orientation">Sets the orientation of the box(es). If "v" ("h"), the distribution is visualized along the vertical (horizontal).</param>
<param name="OutlineColor">Sets the color of the box outline</param>
<param name="OutlineWidth">Sets the width of the box outline</param>
<param name="Outline">Sets the box outline (use this for more finegrained control than the other outline-associated arguments).</param>
<param name="AlignmentGroup">Set several traces linked to the same position axis or matching axes to the same alignmentgroup. This controls whether bars compute their positional range dependently or independently.</param>
<param name="OffsetGroup">Set several traces linked to the same position axis or matching axes to the same offsetgroup where bars of the same position coordinate will line up.</param>
<param name="Notched">Determines whether or not notches are drawn. Notches displays a confidence interval around the median. We compute the confidence interval as median +/- 1.57 " IQR / sqrt(N), where IQR is the interquartile range and N is the sample size. If two boxes' notches do not overlap there is 95% confidence their medians differ. See https://sites.google.com/site/davidsstatistics/home/notched-box-plots for more info. Defaults to "false" unless `notchwidth` or `notchspan` is set.</param>
<param name="NotchWidth">Sets the width of the notches relative to the box' width. For example, with 0, the notches are as wide as the box(es).</param>
<param name="QuartileMethod">Sets the method used to compute the sample's Q1 and Q3 quartiles. The "linear" method uses the 25th percentile for Q1 and 75th percentile for Q3 as computed using method #10 (listed on http://www.amstat.org/publications/jse/v14n3/langford.html). The "exclusive" method uses the median to divide the ordered dataset into two halves if the sample is odd, it does not include the median in either half - Q1 is then the median of the lower half and Q3 the median of the upper half. The "inclusive" method also uses the median to divide the ordered dataset into two halves but if the sample is odd, it includes the median in both halves - Q1 is then the median of the lower half and Q3 the median of the upper half.</param>
<param name="SizeMode">Sets the upper and lower bound for the boxes quartiles means box is drawn between Q1 and Q3 SD means the box is drawn between Mean +- Standard Deviation Argument sdmultiple (default 1) to scale the box size So it could be drawn 1-stddev, 3-stddev etc</param>
<param name="UseDefaults">If set to false, ignore the global default settings set in `Defaults`</param>
Plotly.NET