RectplotGL

RectplotGL

new RectplotGL()

Source:

Class to create traditional heatmap plots

Extends

Classes

RectplotGL

Methods

_generateSpecForEncoding(spec,, attribute,, value,)

Source:
Inherited From:

Internal method that defines the spec for each encoding

Parameters:
Name Type Description
spec, object

the specification object
attribute, string

attribute to set in the specification
value, Array | int | string

value can be either an array of values or singular (int, string).

attachResizeEvent()

Source:
Inherited From:

Attach a callback for window resize events

calcBounds() → {object}

Source:
Inherited From:

Calculate bounds for the visualization.

Returns:

object containing x and y bounds.

Type
object

clearHighlight()

Source:
Inherited From:

Clear the highlight for the plot.

Example
// Clear highlight
plot.clearHighlight();

clearHighlightedIndices() → {void}

Source:
Inherited From:

Clear the highlighted indices

Example
clearHighlightedIndices()
// clears all the highlighted indices
Returns:
Type
void

clickCallback(pointIdx,) → {object}

Source:
Inherited From:

Default callback handler when a point is clicked

Parameters:
Name Type Description
pointIdx, object

an object with the nearest point to the click event.
Returns:

an object with the nearest point to the click event.

Type
object

createOpacityArray(length,, indexes,) → {Array}

Source:
Inherited From:

Create an array of length length with the specified indexes set to 1

Parameters:
Name Type Description
length, number

length of the array
indexes, Array

indexes to be set to 1
Returns:

an array of length length with the specified indexes set to 1

Type
Array

disableHighlight()

Source:
Inherited From:

Disable highlight for the plot. This is useful when the plot is rendered with a subset of data and we want to highlight the points that are not rendered.

Example
// Disable highlight
plot.disableHighlight();

enableHighlight()

Source:
Inherited From:

Enable highlight for the plot. This is useful when the plot is rendered with a subset of data and we want to highlight the points that are not rendered.

Example
// Enable highlight
plot.enableHighlight();

generateSpec() → {object}

Source:
Overrides:

Generate the specification for Rect heatmap Plots. checkout epiviz.gl for more information.

Returns:

a specification object that epiviz.gl can understand

Type
object

highlightedIndicesCallback() → {array}

Source:
Inherited From:

Default callback handler when highlighted indices are updated

Example
highlightedIndicesCallback()
// returns highlighted indices
// [1, 2, 3]
// [4, 5, 6]
// [7, 8, 9]
Returns:

highlighted indices

Type
array

highlightIndices(indices,, forceSet,)

Source:
Inherited From:

Highlight the indices on the plot.

Example
// Highlight indices
plot.highlightIndices([1, 2, 3]);
Parameters:
Name Type Description
indices, Array

indices to be highlighted.
forceSet, boolean

if true, set the indices to be highlighted, else toggle the indices.

hoverCallback(pointIdx,) → {object}

Source:
Inherited From:

Default callback handler when mouse if hovered over the rending provides information on nearest points and their distance.

Parameters:
Name Type Description
pointIdx, object

points close to range from the mouse
Returns:

points close to range from the mouse

Type
object

labelHoveredCallback(label,) → {object}

Source:
Inherited From:

Default callback handler when a label is hovered

Example
labelHoveredCallback()
Parameters:
Name Type Description
label, object

label hovered
Returns:

label hovered

Type
object

labelUnhoveredCallback(label,) → {object}

Source:
Inherited From:

Default callback handler when a label is unhovered

Example
labelUnHoveredCallback()
Parameters:
Name Type Description
label, object

label unhovered
Returns:

label unhovered

Type
object

render(width,nullable, height,nullable)

Source:
Inherited From:

Render the plot. Optionally provide a height and width.

Parameters:
Name Type Attributes Description
width, number <nullable>

width of the canvas to render the plot.
height, number <nullable>

height of the canvas to render the plot.

renderColumnGroupingLegend()

Source:
Inherited From:

Render the column grouping legend. This is used to render the column grouping legend.

renderGroupingLabels(parentElement, groupingRowData, orientation) → {void}

Source:
Inherited From:

Renders the grouping labels for the grouping legend

Parameters:
Name Type Description
parentElement HTMLElement

The parent element to render the grouping labels in
groupingRowData Array

The data to render the grouping labels with
orientation string

The orientation of the grouping labels
Returns:
Type
void

renderLegend()

Source:
Inherited From:

Render the legend for the intensity plot. This is used to render the legend for the intensity plot.

renderRowGroupingLegend()

Source:
Inherited From:

Render the row grouping legend. This is used to render the row grouping legend.

reRenderOnHighlight()

Source:
Inherited From:

Re-render the plot. This is useful when the highlight data is updated.

resize(width, height)

Source:
Inherited From:

resize the plot, without having to send the data to the GPU.

Parameters:
Name Type Description
width number
height number

selectionCallback(pointIdxs,) → {object}

Source:
Inherited From:

Default callback handler when a lasso or box selection is made on the plot

Parameters:
Name Type Description
pointIdxs, object

an object with points within the selection
Returns:

an object with points within the selection

Type
object

setInput(data,)

Source:
Inherited From:

Set the input data for the visualization

Parameters:
Name Type Description
data, object

input data to set
data.x, Array

x coordinates
data.y, Array

y coordinates
data.xlabels, Array

labels along the x-axis
data.ylabels, Array

labels along the y-axis

setIntensityLegendOptions(legentPosition,, legendDomElement,)

Source:
Inherited From:

Set the legend options for the visualization.

Parameters:
Name Type Description
legentPosition, string

position of the legend, can be top, bottom, left or right
legendDomElement, DOMElement

the DOM element to use for the legend

setInteraction(mode,)

Source:
Inherited From:

Set the interaction mode for the rendering. possible values are lasso - make a lasso selection box - make a box selection pan - pan the plot

Parameters:
Name Type Description
mode, string

must be either lasso, pan or box

setLabelOptions(labelOptions,)

Source:
Inherited From:

Set the label options for the visualization.

Examples
this.labelOptions = {
rowLabelsSvgXOffset: 0,
rowLabelsSvgYOffset: 0,
columnLabelsSvgXOffset: 0,
columnLabelsSvgYOffset: 0,
rowLabelMaxCharacters: 10,
columnLabelMaxCharacters: 10,
rowLabelSlintAngle: 0,
columnLabelSlintAngle: 0,
rowLabelFontSize: 7,
columnLabelFontSize: 7,
}
this.setLabelOptions({
rowLabelsSvgXOffset: 0,
rowLabelsSvgYOffset: 0,
columnLabelsSvgXOffset: 0,
columnLabelsSvgYOffset: 0,
rowLabelMaxCharacters: 10,
columnLabelMaxCharacters: 10,
rowLabelSlintAngle: 0,
columnLabelSlintAngle: 0,
rowLabelFontSize: "7px",
columnLabelFontSize: "7em",
})
Parameters:
Name Type Description
labelOptions, object

an object containing the label options
labelOptions.rowLabelMaxCharacters, number

maximum number of characters to show for row labels
labelOptions.columnLabelMaxCharacters, number

maximum number of characters to show for column labels
labelOptions.rowLabelSlintAngle, number

slint angle for row labels (default: 0)
labelOptions.columnLabelSlintAngle, number

slint angle for column labels (default: 0)
labelOptions.rowLabelFontSize, string | number

font size for row labels (default: 7px)
labelOptions.columnLabelFontSize, string | number

font size for column labels (default: 7px)

setMargins(margins,)

Source:
Inherited From:

Set the margins for the visualization. all properties are optional, if not provided, the default values will be used.

Example
this.setMargins({
top: '10px',
bottom: '10px',
left: '10px',
right: '10px',
})
Parameters:
Name Type Description
margins, object

an object containing the margins
margins.top, number

top margin
margins.bottom, number

bottom margin
margins.left, number

left margin
margins.right, number

right margin

setState(encoding,)

Source:
Inherited From:

Set the state of the visualization.

Parameters:
Name Type Description
encoding, object

a set of attributes that modify the rendering
encoding.size, Array | number

an array of size for each x-y cell or a singular size to apply for all cells.
encoding.color, Array | number

an array of colors for each x-y cell or a singular color to apply for all cells.
encoding.opacity, Array | number

same as size, but sets the opacity for each cell.
encoding.xgap, Array | number

same as size, but sets the gap along x-axis.
encoding.ygap, Array | number

same as size, but sets the gap along y-axis.
encoding.intensityLegendData Array

an array of objects containing the color, intensity and label for the legend.
encoding.rowGroupingData Array

an array of objects containing the startIndex, endIndex, color and label for the row grouping.
encoding.columnGroupingData Array

an array of objects containing the startIndex, endIndex, color and label for the column grouping.

updateMarginsToAccountForLegend()

Source:
Inherited From:

Update the margins to account for the legend

viewportChangeCallback(viewport)

Source:
Inherited From:

Default callback handler when viewport is changed

Parameters:
Name Type Description
viewport object