vueplotlib 1.11.8 | Documentation

Plot Components

mixin

Properties

data (string) : The data set key.

pWidth (number) : The plot width.

pHeight (number) : The plot height.

pMarginTop (number) : The plot top margin.

pMarginLeft (number) : The plot left margin.

pMarginRight (number) : The plot right margin.

pMarginBottom (number) : The plot bottom margin.

getData (function) : Function that takes a data key string and returns a DataContainer.

getScale (function) : Function that takes a scale key string and returns a scale instance.

clickHandler (function) : Function that will be called upon click of plot.

BarPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

y (string) : The y-scale variable key.

barMarginX (number) : The value for the horizontal margin between bars. Default: 2

barColor (string) : A color for all bars. Optional. If provided, overrides using the x scale for colors.

logY (boolean) : Whether or not to log-scale the y axis. Default: false

Example

<BarPlot
     data="exposures_single_data"
     x="signature" 
     y="exposure"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

BoxPlot

Extends mixin

Properties

variable (string) : The key to access the values in the data array objects.

y (string) : The y-scale variable key.

o (string) : The observation-scale variable key. Optional.

pointSize (number) : The diameter of outlier (and mean) points. Default: 6

drawOutliers (boolean) : Whether or not to draw outlier points on the plot. Default: true

Example

<BoxPlot
     data="boxplot_data"
     y="exposure"
     o="signature"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

CountBarPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

y (string) : The y-scale variable key.

o (string) : The observation-scale variable key. Used to filter observations.

filterFunction (function) : A function used to filter values to determine whether to count them.

barMarginX (number) : The value for the horizontal margin between bars. Default: 2

barColor (string) : A color for all bars. Optional. If provided, overrides using the x scale for colors.

logY (boolean) : Whether or not to log-scale the y axis. Default: false

Example

<CountBarPlot
     data="exposures_data"
     x="signature" 
     y="exposure"
     o="sample_id"
     :filterFunction="((val) => (val > 1))"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

DoubleStratifiedBoxPlot

Extends mixin

Properties

variable (string) : The key to access the values in the data array objects.

s (string) : The key for the data containing the variable to stratify by.

x (string) : The key for the scale to stratify by. Must be categorical.

s2 (string) : The key for the data containing the secondary variable to stratify by.

x2 (string) : The key for the secondary scale to stratify by. Must be categorical.

y (string) : The y-scale variable key.

o (string) : The observation-scale variable key. Required in order to match with the stratification data.

pointSize (number) : The diameter of outlier (and mean) points. Default: 6

drawOutliers (boolean) : Whether or not to draw outlier points on the plot. Default: true

Example

<DoubleStratifiedBoxPlot
     data="boxplot_data"
     variable="COSMIC 1"
     s="stratification_data"
     x="smoking_binary"
     s2="stratification_data"
     x2="sex"
     y="exposure"
     o="sample_id"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

DoubleStratifiedScatterPlot

Extends mixin

Properties

variable (string) : The key to access the values in the data array objects.

s (string) : The key for the data containing the variable to stratify by.

x (string) : The x-scale variable key. Must be continuous.

s2 (string) : The key for the data containing the secondary variable to stratify by.

x2 (string) : The secondary x-scale variable key.

y (string) : The y-scale variable key. Must be continuous.

o (string) : The observation-scale variable key. Required in order to match with the stratification data.

fillPoints (boolean) : Whether or not to fill points. Default: false

pointSize (number) : Default size for points. Default: 3

strokeColor (string) : Color for point outlines. Optional. Will override the x color scale if provided.

Example

<DoubleStratifiedScatterPlot
     data="exposures_data"
     variable="COSMIC 1"
     s="clinical_data"
     x="age"
     s2="clinical_data"
     x2="sex"
     y="cosmic_1_exposure"
     o="sample_id"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

DoubleStratifiedSinaPlot

Extends mixin

Properties

variable (string) : The key to access the values in the data array objects.

s (string) : The key for the data containing the variable to stratify by.

x (string) : The key for the scale to stratify by. Must be categorical.

s2 (string) : The key for the data containing the secondary variable to stratify by.

x2 (string) : The key for the secondary scale to stratify by. Must be categorical.

y (string) : The y-scale variable key.

o (string) : The observation-scale variable key. Required in order to match with the stratification data.

pointSize (number) : The diameter of points. Default: 3

seed (number) : A random seed. Optional.

fillPoints (boolean) : Whether to fill points. Default: true

strokeColor (string) : Color for point outlines. Optional. Will override the x color scale if provided.

Example

<DoubleStratifiedSinaPlot
     data="boxplot_data"
     variable="COSMIC 1"
     s="stratification_data"
     x="smoking_binary"
     s2="stratification_data"
     x2="sex"
     y="exposure"
     o="sample_id"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

GenomeMultiTrackPlot

Extends mixin

Properties

g (string) : The genome-scale variable key.

c (string) : The event color-scale variable key. Takes precedence over eventColor prop.

y (string) : The y-scale variable key.

chromosomeVariable (string) : The axis chromosome variable key. Default: "chromosome"

positionVariable (string) : The axis position variable key. Default: "position"

eventWidth (number) : The width of each observation rectangle. Default: 4

eventColor (string) : The color of each observation. Default: "#000000".

backgroundColor (string) : The background color of the track. Optional.

lineColor (string) : The background color of the track. Optional.

barMarginY (number) : The value for the vertical margin between bars. Default: 2 // TODO: bar padding

Example

<GenomeMultiTrackPlot
     data="rand_genome_multi_data"
     g="genome" 
     y="sample_id"
     c="event_type"
     :pWidth="500"
     :pHeight="40"
     :pMarginTop="10"
     :pMarginLeft="10"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :getStack="getStack"
     :clickHandler="myClickHandler"
/>

GenomeScatterPlot

Extends mixin

Properties

g (string) : The genome-scale variable key.

y (string) : The y-scale variable key.

c (string) : The color-scale variable key.

chromosomeVariable (string) : The axis chromosome variable key. Default: "chromosome"

positionVariable (string) : The axis position variable key. Default: "position"

logY (boolean) : Whether to have log scaled y. Default: false

Example

<GenomeScatterPlot
     data="rainfall_data"
     g="genome" 
     y="mut_dist"
     c="category"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

GenomeStackedBarPlot

Extends mixin

Properties

g (string) : The genome-scale variable key.

y (string) : The y-scale variable key.

c (string) : The color-scale variable key.

chromosomeVariable (string) : The axis chromosome variable key. Default: "chromosome"

positionVariable (string) : The axis position variable key. Default: "position"

Example

<GenomeStackedBarPlot
     data="rainfall_data"
     g="genome" 
     y="exposure"
     c="signature"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

GenomeTrackPlot

Extends mixin

Properties

g (string) : The genome-scale variable key.

c (string) : The event color-scale variable key. Takes precedence over eventColor prop.

chromosomeVariable (string) : The axis chromosome variable key. Default: "chromosome"

positionVariable (string) : The axis position variable key. Default: "position"

eventWidth (number) : The width of each observation rectangle. Default: 4

eventColor (string) : The color of each observation. Default: "#000000".

backgroundColor (string) : The background color of the track. Optional.

lineColor (string) : The background color of the track. Optional.

Example

<GenomeTrackPlot
     data="rand_genome_data"
     g="genome" 
     c="event_type"
     :pWidth="500"
     :pHeight="40"
     :pMarginTop="10"
     :pMarginLeft="10"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :getStack="getStack"
     :clickHandler="myClickHandler"
/>

HierarchicalMultiTrackPlot

Extends mixin

Properties

h (string) : The hierarchy data container key (passed to getData).

x (string) : The x-scale variable key.

y (string) : The y-scale variable key.

c (string) : The color-scale variable key.

barMarginX (number) : The value for the horizontal margin between bars. Default: 2

barMarginY (number) : The value for the vertical margin between bars. Default: 2

Example

<HierarchicalMultiTrackPlot
     data="exposures_data"
     h="clustering"
     x="sample_id" 
     y="signature"
     c="exposure"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

MultiBoxPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

y (string) : The y-scale variable key.

o (string) : The observation-scale variable key. Optional.

pointSize (number) : The diameter of outlier (and mean) points. Default: 6

drawOutliers (boolean) : Whether or not to draw outlier points on the plot.

Example

<MultiBoxPlot
     data="exposures_data"
     x="signature"
     y="exposure"
     o="sample_id"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

MultiDataRectPlot

Extends mixin

Properties

dataArray (string) : An array of data keys.

cArray (string) : An array of color-scale variable keys.

z (string) : The observation-scale variable key.

o (string) : The observation (observation-scale domain element of interest).

rectMargin (number) : The margin between each rect.

rectSize (number) : The size of rects (only used if text values are enabled).

disableText (boolean) : Whether to disable the rendering of text for each value.

disableTooltip (boolean) : Whether to disable tooltips. Default: false

Example

<MultiDataRectPlot
     :dataArray="['BRCA1', 'BRCA2', 'NTHL1']"
     :cArray="['mut_class', 'mut_class', 'mut_class']"
     z="sample_id" 
     o="SA12345"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

MultiDataTrackPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

dataArray (string) : An array of data keys.

cArray (string) : An array of color-scale keys.

barMarginX (number) : The value for the horizontal margin between bars. Default: 2

barMarginY (number) : The value for the vertical margin between bars. Default: 2

Example

<MultiDataTrackPlot
     x="sample_id" 
     :dataArray="['gene_A', 'gene_B', 'gene_C']"
     :cArray="['mut_class', 'mut_class', 'mut_class']"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

MultiTrackPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

y (string) : The y-scale variable key.

c (string) : The color-scale variable key.

barMarginX (number) : The value for the horizontal margin between bars. Default: 2

barMarginY (number) : The value for the vertical margin between bars. Default: 2

Example

<MultiTrackPlot
     data="exposures_data"
     x="sample_id" 
     y="signature"
     c="exposure"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

RectPlot

Extends mixin

Properties

c (string) : The color-scale variable key.

z (string) : The observation-scale variable key.

o (string) : The observation (observation-scale domain element of interest).

disableTooltip (boolean) : Whether to disable tooltips. Default: false

Example

<RectPlot
     data="clinical_data"
     z="sample_id" 
     o="SA12345"
     c="age"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

ScatterPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

y (string) : The y-scale variable key.

c (string) : The color-scale variable key. Takes precedence over pointColor prop.

fillPoints (boolean) : Whether or not to fill points. Default: false

pointColor (string) : Default color for points. Default: "#4682B4"

pointSize (number) : Default size for points. Default: 3

logY (boolean) : Whether or not to log-scale the y axis. Default: false

logX (boolean) : Whether or not to log-scale the x axis. Default: false

Example

<ScatterPlot
     data="xy_data"
     x="x" 
     y="y"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

StackedBarPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

y (string) : The y-scale variable key.

c (string) : The color-scale variable key.

barMarginX (number) : The value for the horizontal margin between bars. Default: 2

filterX (boolean) : Set to false to ignore the filtered domain of the x scale. Default: true

filterY (boolean) : Set to false to ignore the filtered domain of the y scale. Default: true

Example

<StackedBarPlot
     data="exposures_data"
     x="sample_id" 
     y="exposure"
     c="signature"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

StratifiedBoxPlot

Extends mixin

Properties

variable (string) : The key to access the values in the data array objects.

s (string) : The key for the data containing the variable to stratify by.

x (string) : The key for the scale to stratify by. Must be categorical.

y (string) : The y-scale variable key.

o (string) : The observation-scale variable key. Required in order to match with the stratification data.

pointSize (number) : The diameter of outlier (and mean) points. Default: 6

drawOutliers (boolean) : Whether or not to draw outlier points on the plot. Default: true

Example

<StratifiedBoxPlot
     data="boxplot_data"
     variable="COSMIC 1"
     s="stratification_data"
     y="exposure"
     o="sample_id"
     x="smoking_binary"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

StratifiedKaplanMeierPlot

Extends mixin

Properties

deathVariable (string) : The survival "days to death" variable key. Default: "days_to_death"

followupVariable (string) : The survival "days to last followup" variable key. Default: "days_to_last_followup"

s (string) : The key for the data containing the variable to stratify by.

variable (string) : The key for the variable to stratify by in the s dataset.

c (string) : The color-scale (line-scale) variable key. Should contain the categories of the stratified variable. Must be categorical.

x (string) : The x-scale variable key. Should represent survival time. Must be continuous.

y (string) : The y-scale variable key. Should represent survival percentage. Must be continuous.

o (string) : The observation-scale variable key. Required in order to match the survival data with the stratification data.

lineWidth (number) : The line width. Default: 2

tickHeight (number) : The tick height. Default: 8

Example

<StratifiedKaplanMeierPlot
     data="survival_data"
     s="dominant_signature_data"
     variable="dominant_signature"
     c="signatures"
     x="survival_time"
     y="survival_pct"
     o="sample_id"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

StratifiedScatterPlot

Extends mixin

Properties

variable (string) : The key to access the values in the data array objects.

s (string) : The key for the data containing the variable to stratify by.

x (string) : The x-scale variable key. Must be continuous.

y (string) : The y-scale variable key. Must be continuous.

o (string) : The observation-scale variable key. Required in order to match with the stratification data.

fillPoints (boolean) : Whether or not to fill points. Default: false

pointSize (number) : Default size for points. Default: 3

strokeColor (string) : Color for point outlines. Optional. Will override the x color scale if provided.

Example

<StratifiedScatterPlot
     data="exposures_data"
     variable="COSMIC 1"
     s="clinical_data"
     y="cosmic_1_exposure"
     o="sample_id"
     x="age"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

StratifiedSinaPlot

Extends mixin

Properties

variable (string) : The key to access the values in the data array objects.

s (string) : The key for the data containing the variable to stratify by.

x (string) : The key for the scale to stratify by. Must be categorical.

y (string) : The y-scale variable key.

o (string) : The observation-scale variable key. Required in order to match with the stratification data.

pointSize (number) : The diameter of points. Default: 3

seed (number) : A random seed. Optional.

fillPoints (boolean) : Whether to fill points. Default: true

strokeColor (string) : Color for point outlines. Optional. Will override the x color scale if provided.

Example

<StratifiedSinaPlot
     data="boxplot_data"
     variable="COSMIC 1"
     s="stratification_data"
     y="exposure"
     o="sample_id"
     x="smoking_binary"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

TrackPlot

Extends mixin

Properties

x (string) : The x-scale variable key.

c (string) : The color-scale variable key.

barMarginX (number) : The value for the horizontal margin between bars. Default: 2

Example

<TrackPlot
     data="clinical_data"
     x="sample_id" 
     c="age"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getData="getData"
     :getScale="getScale"
     :clickHandler="myClickHandler"
/>

Axis Components

Axis

Properties

variable (string) : The axis variable key.

side (string) : The side for the scale.

tickRotation (number) : An angle used to rotate axis tick text.

pWidth (number) : The plot width.

pHeight (number) : The plot height.

pMarginTop (number) : The plot top margin.

pMarginLeft (number) : The plot left margin.

pMarginRight (number) : The plot right margin.

pMarginBottom (number) : The plot bottom margin.

getScale (function) : Function that takes a scale key string and returns a scale instance.

getStack (function) : Function that returns a HistoryStack instance.

disableBrushing (boolean) : Whether to disable brushing functionality and hide the zoomed-out "context" view. Default: false

log (boolean) : Whether to have log scaled variable. Default: false

time (boolean) : Whether to have time scaled variable. Default: false

showLabel (boolean) : Whether to show the label. Default: true

maxCharacters (number) : The maximum number of characters, where the rest will be trimmed. Optional.

Example

<Axis
     variable="y"
     side="left" 
     :tickRotation="-35"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getScale="getScale"
     :getStack="getStack"
 />

GenomeAxis

Properties

scaleKey (string) : The key for the genome scale instance, passed to getScale.

side (string) : The side for the scale.

pWidth (number) : The plot width.

pHeight (number) : The plot height.

pMarginTop (number) : The plot top margin.

pMarginLeft (number) : The plot left margin.

pMarginRight (number) : The plot right margin.

pMarginBottom (number) : The plot bottom margin.

getScale (function) : Function that takes a scale key string and returns a scale instance.

getStack (function) : Function that returns a HistoryStack instance.

Example

<GenomeAxis
     :scaleKey="genome_scale"
     side="bottom" 
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="10"
     :pMarginLeft="120"
     :pMarginRight="10"
     :pMarginBottom="150"
     :getScale="getScale"
     :getStack="getStack"
 />

DendrogramAxis

Properties

variable (string) : The axis variable key.

h (string) : The hierarchy data container key (passed to getData).

side (string) : The side for the scale.

pWidth (number) : The plot width.

pHeight (number) : The plot height.

pMarginTop (number) : The plot top margin.

pMarginLeft (number) : The plot left margin.

pMarginRight (number) : The plot right margin.

pMarginBottom (number) : The plot bottom margin.

getScale (function) : Function that takes a scale key string and returns a scale instance.

getStack (function) : Function that returns a HistoryStack instance.

getData (function) : Function that takes a data key string and returns a DataContainer instance.

Example

<DendrogramAxis
     variable="sample_id"
     h="sample_clusters"
     side="top"
     :pWidth="500"
     :pHeight="300"
     :pMarginTop="300"
     :pMarginLeft="10"
     :pMarginRight="10"
     :pMarginBottom="10"
     :getData="getData"
     :getScale="getScale"
     :getStack="getStack"
 />

Container Components

PlotContainer

This component is a container for axis and plot components, which passes its props to its children and imposes styles.

PlotContainer

Properties

pWidth (number) : The plot width.

pHeight (number) : The plot height.

pMarginTop (number) : The plot top margin.

pMarginLeft (number) : The plot left margin.

pMarginRight (number) : The plot right margin.

pMarginBottom (number) : The plot bottom margin.

showDownloadButton (boolean) : Show a download button (in top left corner). Optional. Default: false.

downloadButtonOffsetX (number) : x-offset of the download button. Optional. Only makes sense to use if showDownloadButton is true.

downloadButtonOffsetY (number) : y-offset of the download button. Optional. Only makes sense to use if showDownloadButton is true.

downloadButtonSize (number) : size of the download button. Optional. Default: 16. Only makes sense to use if showDownloadButton is true.

downloadButtonFill (string) : color of the download button. Optional. Default: "#C0C0C0". Only makes sense to use if showDownloadButton is true.

Example

<PlotContainer
   :pWidth="500"
   :pHeight="300"
   :pMarginTop="10"
   :pMarginLeft="120"
   :pMarginRight="10"
   :pMarginBottom="150"
 >
   <Axis
     slot="axisLeft" <!-- note the slot prop -->
     variable="exposure"
     side="left" 
     :tickRotation="-35"
     :getScale="getScale"
     :getStack="getStack"
     <!-- note the axis props that are omitted because they are being inherited -->
   />
   <BarPlot
     slot="plot" <!-- note the slot prop -->
     data="exposures_single_data"
     x="signature" 
     y="exposure"
     :getData="getData"
     :getScale="getScale"
     <!-- note the plot props that are omitted because they are being inherited -->
   />
   <Axis
     slot="axisBottom" <!-- note the slot prop -->
     variable="signature"
     side="bottom" 
     :tickRotation="-65"
     :getScale="getScale"
     :getStack="getStack"
     :disableBrushing="true"
     <!-- note the axis props that are omitted because they are being inherited -->
   />
 </PlotContainer>

Legend Components

CategoricalLegend

Properties

variable (string) : The legend variable key.

lStyle (string) : The legend style.

lWidth (number) : The legend width.

lItemHeight (number) : The height of each legend item.

getScale (function) : Function that takes a scale key string and returns a scale instance.

getStack (function) : Function that returns a HistoryStack instance.

clickHandler (function) : Function that is called when clicking on legend element names. Optional.

Example

<CategoricalLegend
     variable="y"
     lStyle="bar"
     :lWidth="500"
     :getScale="getScale"
     :getStack="getStack"
 />

ContinuousLegend

Properties

variable (string) : The legend variable key.

lWidth (number) : The legend width.

getScale (function) : Function that takes a scale key string and returns a scale instance.

getStack (function) : Function that returns a HistoryStack instance.

disableBrushing (boolean) : Whether to disable brushing functionality and hide the zoomed-out "context" view. Default: false

Example

<ContinuousLegend
     variable="y"
     :lWidth="500"
     :getScale="getScale"
     :getStack="getStack"
 />

Legend

Properties

variable (string) : The legend variable key. Accepts any props that CategoricalLegend or ContinuousLegend accept and passes them on.

Example

<Legend
     variable="y"
     :lWidth="500"
     :getScale="getScale"
     :getStack="getStack"
 />

Other Components

SortOptions

This component helps make simple sorting controls. To sort by an individual variable use optionName and optionVariable props. To give provide sort-by options in terms of a scale's domain use optionScale prop instead.

SortOptions

Properties

variable (string) : The key of the scale to be sorted.

data (string) : The key of the data that will be used to do the sorting.

optionScale (string) : A categorical scale of variables to sort by. Ignored if using optionVar and optionName props instead.

optionVariable (string) : A variable to sort by. Ignored if using optionScale instead.

optionName (string) : The human-readable name of the variable to sort by. Ignored if using optionScale instead.

comparatorScale (string) : The key of the scale whose comparator is to be used to do the sorting.

getScale (function) : The scale getter function.

getStack (function) : The stack getter function.

getData (function) : The data getter function.

Example

<SortOptions 
   variable="sample_id" 
   data="exposure_sbs" 
   optionScale="sig_sbs"
   :getScale="getScale" 
   :getData="getData"
   :getStack="getStack"
/>
<SortOptions 
   variable="sample_id" 
   data="exposure_sbs"
   optionVariable="age"
   optionName="Age"
   :getScale="getScale" 
   :getData="getData"
   :getStack="getStack"
/>

Data

DataContainer

Represents a container of a data array.

new DataContainer(id: string, name: string, data: any, expected: Expected)

Parameters

id (string) The ID for the data.

name (string) The name for the data.

data (any) The data to hold, or a promise that will return the data.

expected (Expected) An object on which to subscribe to data.

Instance Members

▸ id

id

Returns

string: The ID for the data.

▸ name

name

Returns

string: The name for the data.

▸ data

data

Returns

array: The data.

▸ dataCopy

dataCopy

Returns

any: The data copied.

▸ isLoading

isLoading

Returns

boolean: The loading status.

▸ setData(newData)

Set the data variable.

setData(newData: any)

Parameters

newData (any) The data to be set, or a promise that will return the data to be set..

▸ onUpdate(componentId, callback)

Subscribe to update events.

onUpdate(componentId: string, callback: function)

Parameters

componentId (string)

callback (function)

▸ emitUpdate()

Emit the update event.

emitUpdate()

History

HistoryEvent

Represents a single event in the application's history. Given an event type, ID, action, and parameters, the event will be able to be executed in the following way:

the history stack will use the type (e.g. SCALE) to identify a function that it knows about (e.g. getScale)
the event-type-specific function will be called using the provided ID (e.g. getScale(ID) ), which will return an object
the function specified by action will be invoked on the returned object, using the array of params as parameters

new HistoryEvent(type: number, subtype: number, id: string, action: string, params: array)

Parameters

type (number) Event type, such as SCALE, etc...

subtype (number) Event subtype, such as SCALE_DOMAIN, etc...

id (string) Event identifier, used for history

action (string) Method to call on the object.

params (array) Parameters with which to call the method.

Instance Members

▸ type

type

Returns

number: The event type.

▸ subtype

subtype

Returns

number: The event subtype.

▸ id

id

Returns

string: The event identifier.

▸ action

action

Returns

string: The name of the method to call on the target object.

▸ params

params

Returns

array: The params to pass to the method specified by action .

▸ isRelated(event)

isRelated(event: HistoryEvent): boolean

Parameters

event (HistoryEvent) Another history event.

Returns

boolean: Whether the other history event is related to this.

▸ toJson()

toJson(): object

Returns

object: JSON representation of the event.

HistoryStack

Represents a history of all application interaction events, which can be used for forward(redo)/backward(undo) navigation.

new HistoryStack(getterFunctionMapping: object, resetFunctionNameMapping: object)

Parameters

getterFunctionMapping (object) Mapping from event type (int) -> getter function (function).

resetFunctionNameMapping (object) Mapping from event subtype (int) -> reset function name (string).

Instance Members

▸ push(event)

Push an event onto the stack.

push(event: HistoryEvent)

Parameters

event (HistoryEvent) The event to push.

▸ pop()

Pop an event from the top of the stack.

pop(): HistoryStack

Returns

HistoryStack: The last event.

▸ prune()

Prune the stack, removing any events "above" the current pointer

prune()

▸ getPrevRelated(event, pointer)

Find the most recent "related" event. Dips into the "initial" events if needed.

getPrevRelated(event: HistoryEvent, pointer: any): HistoryEvent

Parameters

event (HistoryEvent) The event to reference.

pointer (any)

Returns

HistoryEvent: A "related", but previous event.

▸ canGoBack()

canGoBack(): boolean

Returns

boolean:

▸ goBack()

Goes back by executing the most recent "related" event, in relation to the currently-pointed-to event. Decrements the stack pointer.

goBack()

▸ canGoForward()

canGoForward(): boolean

Returns

boolean:

▸ goForward()

Goes forward by executing the next event. Increments the stack pointer.

goForward()

▸ isEmpty()

isEmpty(): boolean

Returns

boolean:

▸ decrementPointer()

Decrements the stack pointer, or sets to undefined.

decrementPointer()

▸ incrementPointer()

Increments the stack pointer, or sets to zero.

incrementPointer()

▸ parseParams(params)

Parse parameters to check for the need to call a getter function.

parseParams(params: array): array

Parameters

params (array) The serialized parameter array.

Returns

array: Parsed params, replacing with calls to getter functions if necessary.

▸ execute(event)

Execute a provided event.

execute(event: HistoryEvent)

Parameters

event (HistoryEvent)

▸ export()

Get the complete history stack as an array. Prunes the stack if necessary.

export(): array

Returns

array: The current stack as an array.

▸ import(stack)

Set the history stack array, but do not increment the pointer. Assumes the history stack is empty.

import(stack: array)

Parameters

stack (array) The array of events to set as the stack.

Scale

AbstractScaleDispatcher

Scale parent class to handle dispatching for highlights, updates.

new AbstractScaleDispatcher()

Instance Members

▸ onHighlight(componentId, callback)

Subscribe to highlight events.

onHighlight(componentId: string, callback: function)

Parameters

componentId (string)

callback (function)

▸ onHighlightDestroy(componentId, callback)

Subscribe to highlight destroy events.

onHighlightDestroy(componentId: string, callback: function)

Parameters

componentId (string)

callback (function)

▸ onUpdate(componentId, callback)

Subscribe to update events.

onUpdate(componentId: string, callback: function)

Parameters

componentId (string)

callback (function)

▸ emitHighlight()

Emit the highlight event.

emitHighlight()

▸ emitHighlightDestroy()

Emit the highlight destroy event.

emitHighlightDestroy()

▸ emitUpdate()

Emit the update event.

emitUpdate()

AbstractScale

Abstract class representing a scale.

new AbstractScale(id: any, name: any, domain: any, colorScaleKey: any, expected: Expected)

Extends AbstractScaleDispatcher

Parameters

id (any) The ID for the scale.

name (any) The name for the scale.

domain (any) The domain for the scale.

colorScaleKey (any) The key of the color scale to be used.

expected (Expected) An object on which to subscribe to data.

Static Members

▸ colorScales

colorScales

▸ isUnknown(domainValue)

Check whether a domain value should be considered unknown

isUnknown(domainValue: any): boolean

Parameters

domainValue (any) A domain value

Returns

boolean: True if the domain value should be considered unknown

Instance Members

▸ id

id

Returns

string: The ID for the scale.

▸ name

name

Returns

string: The name for the scale.

▸ isLoading

isLoading

Returns

boolean: The loading status.

▸ domain

domain

Returns

array: The values that variables using this scale can take.

▸ domainFiltered

domainFiltered

Returns

array: The values that variables using this scale can take after filtering.

▸ colorScale

colorScale

Returns

function: Function that converts a value between [0, 1] to a color

▸ color(domainValue)

Converts a domain value to a color

color(domainValue: any): color

Parameters

domainValue (any) A domain value

Returns

color: A color value

▸ comparator(a, b, ascending)

Compares two domain values

comparator(a: any, b: any, ascending: any): number

Parameters

a (any) A domain value

b (any) Another domain value

ascending (any)

Returns

number: Comparison result of -1, 0, or 1.

▸ toHuman(domainValue)

Convert a domain value to a human-readable value.

toHuman(domainValue: any): any

Parameters

domainValue (any) A domain value

Returns

any: The corresponding humanDomain value

▸ setDomain(newDomain)

Set the domain directly.

setDomain(newDomain: array)

Parameters

newDomain (array) An array of new domain values, or a promise that will return the array.

▸ setDomainFiltered(newDomainFiltered)

Set the filtered domain directly.

setDomainFiltered(newDomainFiltered: array)

Parameters

newDomainFiltered (array) An array of new filtered domain values.

▸ setColorScaleByKey(scaleKey)

Set the color scale function by its name.

setColorScaleByKey(scaleKey: string)

Parameters

scaleKey (string) The string key for the color scale.

▸ resetColorScale()

Resets the color scale.

resetColorScale()

▸ resetFilter()

Resets the filtered domain, using the full domain.

resetFilter()

BinaryScale

Scale class for binary variables.

new BinaryScale(id: string, name: string, expected: Expected)

Extends CategoricalScale

Parameters

id (string) The ID for the scale.

name (string) The name for the scale.

expected (Expected) An object on which to subscribe to data.

Instance Members

▸ color(domainValue)

color(domainValue: any)

Parameters

domainValue (any)

▸ comparator(a, b)

comparator(a: any, b: any)

Parameters

a (any)

b (any)

CategoricalScale

Scale class for categorical variables.

new CategoricalScale(id: string, name: string, domain: array, humanDomain: array, colorOverrides: object, colorScaleKey: any, expected: Expected)

Extends AbstractScale

Parameters

id (string) The ID for the scale.

name (string) The name for the scale.

domain (array) The domain for the scale, or a promise.

humanDomain (array) The humanDomain for the scale, or a promise. Optional.

colorOverrides (object) The default colorOverrides for the scale. Optional.

colorScaleKey (any)

expected (Expected) An object on which to subscribe to data.

Instance Members

▸ humanDomain

Human-readable domain values

Example domain: [0, 1, 2]
Example humanDomain: ["string0", "string1", "string2"]

humanDomain

Returns

array: The human-readable domain values

▸ humanScale

humanScale

Returns

function: Function that converts domain value -> humanDomain value

▸ colorOverrides

colorOverrides

Returns

object: Mapping from domain value to colors for overridden values.

▸ toHuman(domainValue)

toHuman(domainValue: any)

Parameters

domainValue (any)

▸ color(domainValue)

color(domainValue: any)

Parameters

domainValue (any)

▸ setColorOverrides(colorOverrides)

Set overridden values for colors.

setColorOverrides(colorOverrides: object)

Parameters

colorOverrides (object) Mapping of domain values to colors.

▸ comparator(a, b, ascending)

comparator(a: any, b: any, ascending: any)

Parameters

a (any)

b (any)

ascending

(any
            = true)

▸ zoom(newMinIndex, newMaxIndex)

Zooms the scale.

zoom(newMinIndex: number, newMaxIndex: number)

Parameters

newMinIndex (number) Index of the new minimum element (inclusive)

newMaxIndex (number) Index of the new maximum element (exclusive)

▸ filter(indicesToKeep)

Filters the scale.

filter(indicesToKeep: array)

Parameters

indicesToKeep (array) Array of indices of elements to include.

▸ sort(dataContainer, var1D, comparatorScale, ascending)

Sort the domain based on the data passed.

sort(dataContainer: object, var1D: string, comparatorScale: any, ascending: boolean)

Parameters

dataContainer (object) DataContainer instance holding the data used to sort.

var1D (string)

comparatorScale (any)

ascending

(boolean
            = true)

Whether to sort ascending or descending.

▸ sortByHierarchy(dataContainer)

Sort the domain based on the hierarchy passed.

sortByHierarchy(dataContainer: object)

Parameters

dataContainer (object) DataContainer instance holding the hierarchy data.

▸ filterByHierarchy(dataContainer, newParentKey)

Filter the domain based on the hierarchy passed.

filterByHierarchy(dataContainer: object, newParentKey: string)

Parameters

dataContainer (object) DataContainer instance holding the hierarchy data.

newParentKey (string) Key of the node that will be used as the parent of the filtered nodes.

▸ resetColorOverride()

Resets the color override object.

resetColorOverride()

▸ resetSort()

Resets the color override object.

resetSort()

ContinuousScale

Scale class for continuous variables.

new ContinuousScale()

Extends AbstractScale

Instance Members

▸ color(domainValue)

color(domainValue: any)

Parameters

domainValue (any)

▸ comparator(a, b, ascending)

comparator(a: any, b: any, ascending: any)

Parameters

a (any)

b (any)

ascending

(any
            = true)

▸ zoom(newMin, newMax)

Zooms the scale.

zoom(newMin: number, newMax: number)

Parameters

newMin (number) New minimum domain element value.

newMax (number) New maximum domain element value.

GenomeScale

Scale class for a genome variable. Note: this does NOT inherit from AbstractScale.

new GenomeScale(id: any, name: any)

Extends AbstractScaleDispatcher

Parameters

id (any) The ID for the scale.

name (any) The name for the scale.

Instance Members

▸ id

id

Returns

string: The ID for the scale.

▸ name

name

Returns

string: The name for the scale.

▸ chromosomes

chromosomes

Returns

array: Array of chromosome names.

▸ chromosomesFiltered

chromosomesFiltered

Returns

array: Filtered array of chromosome names.

▸ getDomain(chromosome)

getDomain(chromosome: string): array

Parameters

chromosome (string) A chromosome name.

Returns

array: Tuple-like array of inter-chromosome domain.

▸ getDomains()

getDomains(): array

Returns

array: Array of tuple-like arrays of inter-chromosome domains.

▸ getDomainFiltered(chromosome)

getDomainFiltered(chromosome: string): array

Parameters

chromosome (string) A chromosome name.

Returns

array: Tuple-like array of inter-chromosome domain filtered.

▸ getDomainsFiltered()

getDomainsFiltered(): array

Returns

array: Array of tuple-like arrays of inter-chromosome domains filtered.

▸ getChromosomeRatios()

getChromosomeRatios(): array

Returns

array: Array of ratios corresponding to chromosome length over genome length.

▸ getChromosomeRatiosFiltered()

getChromosomeRatiosFiltered(): array

Returns

array: Array of ratios corresponding to chromosome length over genome length, for filtered chromosomes.

▸ getChromosomeRatiosCumulative()

getChromosomeRatiosCumulative(): array

Returns

array: Array of cumulative ratios corresponding to chromosome length over genome length.

▸ getChromosomeRatiosCumulativeFiltered()

getChromosomeRatiosCumulativeFiltered(): array

Returns

array: Array of cumulative ratios corresponding to chromosome length over genome length, for filtered chromosomes.

▸ convertPositionToRatio(chromosome, position)

Converts a genomic position to a proportion over the whole genome

convertPositionToRatio(chromosome: string, position: number): float

Parameters

chromosome (string) The chromosome

position (number) The position on the

Returns

float: Ratio of position to total genome length

▸ convertPositionToRatioFiltered(chromosome, position)

Converts a genomic position to a proportion over the whole genome

convertPositionToRatioFiltered(chromosome: string, position: number): float

Parameters

chromosome (string) The chromosome

position (number) The position on the

Returns

float: Ratio of position to total genome length

▸ toHuman(chromosome, position)

Convert a domain value to a human-readable value.

toHuman(chromosome: string, position: number): string

Parameters

chromosome (string) A chromosome value.

position (number) A chromosome position value.

Returns

string: The corresponding humanDomain value.

▸ filterByChromosome(selectedChromosome)

Filter by limiting to a single chromosome.

filterByChromosome(selectedChromosome: string)

Parameters

selectedChromosome (string) The chromosome to select.

▸ filterByChromosomeAndPosition(selectedChromosome, start, end)

Filter by limiting to a single chromosome and specific position.

filterByChromosomeAndPosition(selectedChromosome: string, start: number, end: number)

Parameters

selectedChromosome (string) The chromosome to select.

start (number) The start position.

end (number) The end position.

▸ resetFilter()

Resets the filtered domain, using the full original domain.

resetFilter()

Expected

Represents an object on which an external consumer may await data from a particular source.

Schema for emitted data payloads: { "data": { "my-dataset-id": , ... }, "scales": { "my-scale-id": , ... } }

new Expected()

Instance Members

▸ emitData(data)

Called by an external data provider that receives data.

emitData(data: any)

Parameters

data (any)

▸ onData(receiverType, receiverId, callback)

Subscribe to emitted data updates from this data source.

onData(receiverType: string, receiverId: string, callback: Function)

Parameters

receiverType (string) The class name of the subscriber, e.g. DataContainer or CategoricalScale

receiverId (string) The id of the subscriber, e.g. proj_id or age

callback (Function) The function to call when emitting received data.

seededRandom

Generate seeded random numbers, e.g. for jitter plot

seededRandom

Parameters

seed (number) The seed.

Returns

function: The random number generator function.

EVENT_TYPES

Enum of the base event types.

EVENT_TYPES

EVENT_SUBTYPES

Enum of the base event subtypes.

EVENT_SUBTYPES

EVENT_SUBTYPE_RESETS

Enum of the base event subtype resets.

EVENT_SUBTYPE_RESETS

computedParam

Returns an object that represents a "computed" history event parameter.

computedParam

Parameters

getterFunctionKey (int) Key of function to be called (match to getterFunctionMapping passed to HistoryStack).

getterParams (array) Params passed to the function to be called.

Returns

object: Returns an object with an identifier signifying that this parameter should be computed.