DotplotGL - Documentation

new DotplotGL()

Source:

DotplotGL.js, line 19

Make a DotPlot like plot

Extends

BaseGL

Classes

DotplotGL

Methods

_generateSpecForEncoding(spec,, attribute,, value,)

Source:

BaseGL.js, line 171

Inherited From:

BaseGL#_generateSpecForEncoding

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

Inherited From:

BaseGL#attachResizeEvent

Attach a callback for window resize events

calcBounds() → {object}

Source:

BaseGL.js, line 296

Inherited From:

BaseGL#calcBounds

Calculate bounds for the visualization.

Returns:

object containing x and y bounds.

Type: object

clearHighlight()

Source:

BaseGL.js, line 1231

Inherited From:

BaseGL#clearHighlight

Clear the highlight for the plot.

Example

// Clear highlight
plot.clearHighlight();

clearHighlightedIndices() → {void}

Source:

BaseGL.js, line 1275

Inherited From:

BaseGL#clearHighlightedIndices

Clear the highlighted indices

Example

clearHighlightedIndices()
// clears all the highlighted indices

Returns:

Type: void

clickCallback(pointIdx,) → {object}

Source:

BaseGL.js, line 1298

Inherited From:

BaseGL#clickCallback

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

constructCoordinatesForSizeLegendCircles(orientation, minSize, maxSize, stepSize, xBufferopt, yBufferopt) → {Object}

Source:

DotplotGL.js, line 477

Constructs the coordinates for the circle elements of the size legend based on the orientation.

Parameters:

Name	Type	Attributes	Default	Description
`orientation`	string			Orientation of the legend (e.g., 'horizontal', 'horizontal-inverted', etc.).
`minSize`	number			Minimum size value for the legend.
`maxSize`	number			Maximum size value for the legend.
`stepSize`	number			Step size between each size value.
`xBuffer`	number	<optional>	`0`	Optional buffer space in the x-axis.
`yBuffer`	number	<optional>	`0`	Optional buffer space in the y-axis.

Returns:

An object containing x and y functions for computing the circle element's position.

Type: Object

constructCoordinatesForSizeLegendText(orientation, minSize, maxSize, stepSize) → {Object}

Source:

DotplotGL.js, line 408

Constructs the coordinates for the text elements of the size legend based on the orientation.

Parameters:

Name	Type	Description
`orientation`	string	Orientation of the legend (e.g., 'horizontal', 'horizontal-inverted', etc.).
`minSize`	number	Minimum size value for the legend.
`maxSize`	number	Maximum size value for the legend.
`stepSize`	number	Step size between each size value.

Returns:

An object containing x and y functions for computing the text element's position.

Type: Object

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

Source:

BaseGL.js, line 1258

Inherited From:

BaseGL#createOpacityArray

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

Inherited From:

BaseGL#disableHighlight

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

Inherited From:

BaseGL#enableHighlight

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:

DotplotGL.js, line 78

Overrides:

BaseGL#generateSpec

Generate the specification for Dot Plots. checkout epiviz.gl for more information.

Returns:

a specification object that epiviz.gl can understand

Type: object

highlightedIndicesCallback() → {array}

Source:

BaseGL.js, line 1325

Inherited From:

BaseGL#highlightedIndicesCallback

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

Inherited From:

BaseGL#highlightIndices

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

Inherited From:

BaseGL#hoverCallback

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

Inherited From:

BaseGL#labelHoveredCallback

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

Inherited From:

BaseGL#labelUnhoveredCallback

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

Inherited From:

BaseGL#render

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

Inherited From:

BaseGL#renderColumnGroupingLegend

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

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

Source:

BaseGL.js, line 1082

Inherited From:

BaseGL#renderGroupingLabels

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

Inherited From:

BaseGL#renderLegend

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

renderRowGroupingLegend()

Source:

BaseGL.js, line 900

Inherited From:

BaseGL#renderRowGroupingLegend

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

renderSizeLegend()

Source:

DotplotGL.js, line 239

Renders the size legend based on provided data and orientation. It creates circles and text elements to represent the size legend and places them in the specified position.

reRenderOnHighlight()

Source:

BaseGL.js, line 1242

Inherited From:

BaseGL#reRenderOnHighlight

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

resize(width, height)

Source:

BaseGL.js, line 578

Inherited From:

BaseGL#resize

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

Inherited From:

BaseGL#selectionCallback

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

Inherited From:

BaseGL#setInput

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

Inherited From:

BaseGL#setIntensityLegendOptions

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

Inherited From:

BaseGL#setInteraction

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

Inherited From:

BaseGL#setLabelOptions

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

Inherited From:

BaseGL#setMargins

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

setSizeLegendOptions(legendOptions, legendDomElementopt)

Source:

DotplotGL.js, line 546

Sets the options for the size legend. This method configures the size legend's appearance and position, and optionally accepts a DOM element for rendering the legend.

Parameters:

Name	Type	Attributes	Description
`legendOptions`	Object		Configuration options for the size legend.
`legendDomElement`	HTMLElement	<optional>	Optional DOM element to use for the legend.

setState(encoding,)

Source:

BaseGL.js, line 394

Inherited From:

BaseGL#setState

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

Inherited From:

BaseGL#updateMarginsToAccountForLegend

Update the margins to account for the legend

updateMarginsToAccountForSizeLegend()

Source:

DotplotGL.js, line 189

Adjusts the margins of the plot to account for the size legend. It calculates the margins based on the size of the size legend and its orientation and position.

viewportChangeCallback(viewport)

Source:

BaseGL.js, line 1358

Inherited From:

BaseGL#viewportChangeCallback

Default callback handler when viewport is changed

Parameters:

Name	Type	Description
`viewport`	object