BaseGL - Documentation

new BaseGL()

Source:

BaseGL.js, line 28

Base class for all matrix like layout plots. This class is not to be used directly.

Developers should implement generateSpec method in their extensions.

Classes

BaseGL

Methods

(static) DotplotGL#render(width,nullable, height,nullable)

Source:

DotplotGL.js, line 179

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.

(static) DotplotGL#setState(encoding,)

Source:

DotplotGL.js, line 63

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.sizeLegendData`	Array	an object containing minSize, maxSize, steps and maxSizeInPx 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.

_generateSpecForEncoding(spec,, attribute,, value,)

Source:

BaseGL.js, line 171

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:

BaseGL.js, line 591

Attach a callback for window resize events

calcBounds() → {object}

Source:

BaseGL.js, line 296

Calculate bounds for the visualization.

Returns:

object containing x and y bounds.

Type: object

clearHighlight()

Source:

BaseGL.js, line 1231

Clear the highlight for the plot.

Example

// Clear highlight
plot.clearHighlight();

clearHighlightedIndices() → {void}

Source:

BaseGL.js, line 1275

Clear the highlighted indices

Example

clearHighlightedIndices()
// clears all the highlighted indices

Returns:

Type: void

clickCallback(pointIdx,) → {object}

Source:

BaseGL.js, line 1298

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:

BaseGL.js, line 1258

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:

BaseGL.js, line 1219

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:

BaseGL.js, line 1207

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()

Source:

BaseGL.js, line 159

abstract generateSpec method

Developers should implement generateSpec method in their extensions.

highlightedIndicesCallback() → {array}

Source:

BaseGL.js, line 1325

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:

BaseGL.js, line 1181

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:

BaseGL.js, line 1310

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:

BaseGL.js, line 1337

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:

BaseGL.js, line 1349

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:

BaseGL.js, line 617

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:

BaseGL.js, line 983

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

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

Source:

BaseGL.js, line 1082

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:

BaseGL.js, line 747

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

renderRowGroupingLegend()

Source:

BaseGL.js, line 900

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

reRenderOnHighlight()

Source:

BaseGL.js, line 1242

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

resize(width, height)

Source:

BaseGL.js, line 578

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

Parameters:

Name	Type	Description
`width`	number
`height`	number

selectionCallback(pointIdxs,) → {object}

Source:

BaseGL.js, line 1287

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:

BaseGL.js, line 314

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:

BaseGL.js, line 459

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:

BaseGL.js, line 446

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:

BaseGL.js, line 540

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:

BaseGL.js, line 564

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:

BaseGL.js, line 394

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:

BaseGL.js, line 1137

Update the margins to account for the legend

viewportChangeCallback(viewport)

Source:

BaseGL.js, line 1358

Default callback handler when viewport is changed

Parameters:

Name	Type	Description
`viewport`	object