Class: Graph

Constructors

Constructor

new Graph(div, config?): Graph

Parameters

Parameter	Type
`div`	`HTMLDivElement`
`config?`	`GraphConfigInterface`

Returns

Graph

Properties

Property	Type
`config`	`GraphConfig`
`graph`	`GraphData`

Accessors

progress

Get Signature

get progress(): number

Returns the current simulation progress

Returns

number

isSimulationRunning

Get Signature

get isSimulationRunning(): boolean

A value that gives information about the running simulation status.

Returns

boolean

maxPointSize

Get Signature

get maxPointSize(): number

The maximum point size. This value is the maximum size of the gl.POINTS primitive that WebGL can render on the user’s hardware.

Returns

number

Methods

setConfig()

setConfig(config): void

Set or update Cosmos configuration. The changes will be applied in real time.

Parameters

Parameter	Type	Description
`config`	`Partial`<`GraphConfigInterface`>	Cosmos configuration object.

Returns

void

setPointPositions()

setPointPositions(pointPositions, dontRescale?): void

Sets the positions for the graph points.

Parameters

Parameter	Type	Description
`pointPositions`	`Float32Array`	A Float32Array representing the positions of points in the format [x1, y1, x2, y2, …, xn, yn], where `n` is the index of the point. Example: `new Float32Array([1, 2, 3, 4, 5, 6])` sets the first point to (1, 2), the second point to (3, 4), and so on.
`dontRescale?`	`boolean`	For this call only, don’t rescale the points. - `true`: Don’t rescale. - `false` or `undefined` (default): Use the behavior defined by `config.rescalePositions`.

Returns

void

setPointColors()

setPointColors(pointColors): void

Sets the colors for the graph points.

Parameters

Parameter	Type	Description
`pointColors`	`Float32Array`	A Float32Array representing the colors of points in the format [r1, g1, b1, a1, r2, g2, b2, a2, …, rn, gn, bn, an], where each color is represented in RGBA format. Example: `new Float32Array([255, 0, 0, 1, 0, 255, 0, 1])` sets the first point to red and the second point to green.

Returns

void

getPointColors()

getPointColors(): Float32Array

Gets the current colors of the graph points.

Returns

Float32Array

A Float32Array representing the colors of points in the format [r1, g1, b1, a1, r2, g2, b2, a2, …, rn, gn, bn, an], where each color is in RGBA format. Returns an empty Float32Array if no point colors are set.

setPointSizes()

setPointSizes(pointSizes): void

Sets the sizes for the graph points.

Parameters

Parameter	Type	Description
`pointSizes`	`Float32Array`	A Float32Array representing the sizes of points in the format [size1, size2, …, sizen], where `n` is the index of the point. Example: `new Float32Array([10, 20, 30])` sets the first point to size 10, the second point to size 20, and the third point to size 30.

Returns

void

setPointShapes()

setPointShapes(pointShapes): void

Sets the shapes for the graph points.

Parameters

Parameter	Type	Description
`pointShapes`	`Float32Array`	A Float32Array representing the shapes of points in the format [shape1, shape2, …, shapen], where `n` is the index of the point and each shape value corresponds to a PointShape enum: 0 = Circle, 1 = Square, 2 = Triangle, 3 = Diamond, 4 = Pentagon, 5 = Hexagon, 6 = Star, 7 = Cross, 8 = None. Example: `new Float32Array([0, 1, 2])` sets the first point to Circle, the second point to Square, and the third point to Triangle. Images are rendered above shapes.

Returns

void

setImageData()

setImageData(imageDataArray): void

Sets the images for the graph points using ImageData objects. Images are rendered above shapes. To use images, provide image indices via setPointImageIndices().

Parameters

Parameter	Type	Description
`imageDataArray`	`ImageData`[]	Array of ImageData objects to use as point images. Example: `setImageData([imageData1, imageData2, imageData3])`

Returns

void

setPointImageIndices()

setPointImageIndices(imageIndices): void

Sets which image each point should use from the images array. Images are rendered above shapes.

Parameters

Parameter	Type	Description
`imageIndices`	`Float32Array`	A Float32Array representing which image each point uses in the format [index1, index2, …, indexn], where `n` is the index of the point and each value is an index into the images array provided to `setImageData`. Example: `new Float32Array([0, 1, 0])` sets the first point to use image 0, second point to use image 1, third point to use image 0.

Returns

void

setPointImageSizes()

setPointImageSizes(imageSizes): void

Sets the sizes for the point images.

Parameters

Parameter	Type	Description
`imageSizes`	`Float32Array`	A Float32Array representing the sizes of point images in the format [size1, size2, …, sizen], where `n` is the index of the point. Example: `new Float32Array([10, 20, 30])` sets the first image to size 10, the second image to size 20, and the third image to size 30.

Returns

void

getPointSizes()

getPointSizes(): Float32Array

Gets the current sizes of the graph points.

Returns

Float32Array

A Float32Array representing the sizes of points in the format [size1, size2, …, sizen], where n is the index of the point. Returns an empty Float32Array if no point sizes are set.

setLinks()

setLinks(links): void

Sets the links for the graph.

Parameters

Parameter	Type	Description
`links`	`Float32Array`	A Float32Array representing the links between points in the format [source1, target1, source2, target2, …, sourcen, targetn], where `source` and `target` are the indices of the points being linked. Example: `new Float32Array([0, 1, 1, 2])` creates a link from point 0 to point 1 and another link from point 1 to point 2.

Returns

void

setLinkColors()

setLinkColors(linkColors): void

Sets the colors for the graph links.

Parameters

Parameter	Type	Description
`linkColors`	`Float32Array`	A Float32Array representing the colors of links in the format [r1, g1, b1, a1, r2, g2, b2, a2, …, rn, gn, bn, an], where each color is in RGBA format. Example: `new Float32Array([255, 0, 0, 1, 0, 255, 0, 1])` sets the first link to red and the second link to green.

Returns

void

getLinkColors()

getLinkColors(): Float32Array

Gets the current colors of the graph links.

Returns

Float32Array

A Float32Array representing the colors of links in the format [r1, g1, b1, a1, r2, g2, b2, a2, …, rn, gn, bn, an], where each color is in RGBA format. Returns an empty Float32Array if no link colors are set.

setLinkWidths()

setLinkWidths(linkWidths): void

Sets the widths for the graph links.

Parameters

Parameter	Type	Description
`linkWidths`	`Float32Array`	A Float32Array representing the widths of links in the format [width1, width2, …, widthn], where `n` is the index of the link. Example: `new Float32Array([1, 2, 3])` sets the first link to width 1, the second link to width 2, and the third link to width 3.

Returns

void

getLinkWidths()

getLinkWidths(): Float32Array

Gets the current widths of the graph links.

Returns

Float32Array

A Float32Array representing the widths of links in the format [width1, width2, …, widthn], where n is the index of the link. Returns an empty Float32Array if no link widths are set.

setLinkArrows()

setLinkArrows(linkArrows): void

Sets the arrows for the graph links.

Parameters

Parameter	Type	Description
`linkArrows`	`boolean`[]	An array of booleans indicating whether each link should have an arrow, in the format [arrow1, arrow2, …, arrown], where `n` is the index of the link. Example: `[true, false, true]` sets arrows on the first and third links, but not on the second link.

Returns

void

setLinkStrength()

setLinkStrength(linkStrength): void

Sets the strength for the graph links.

Parameters

Parameter	Type	Description
`linkStrength`	`Float32Array`	A Float32Array representing the strength of each link in the format [strength1, strength2, …, strengthn], where `n` is the index of the link. Example: `new Float32Array([1, 2, 3])` sets the first link to strength 1, the second link to strength 2, and the third link to strength 3.

Returns

void

setPointClusters()

setPointClusters(pointClusters): void

Sets the point clusters for the graph.

Parameters

Parameter	Type	Description
`pointClusters`	(`undefined` \| `number`)[]	Array of cluster indices for each point in the graph. - Index: Each index corresponds to a point. - Values: Integers starting from 0; `undefined` indicates that a point does not belong to any cluster and will not be affected by cluster forces.

Returns

void

Example

`[0, 1, 0, 2, undefined, 1]` maps points to clusters: point 0 and 2 to cluster 0, point 1 to cluster 1, and point 3 to cluster 2.
Points 4 is unclustered.

Note

Clusters without specified positions via setClusterPositions will be positioned at their centermass by default.

setClusterPositions()

setClusterPositions(clusterPositions): void

Sets the positions of the point clusters for the graph.

Parameters

Parameter	Type	Description
`clusterPositions`	(`undefined` \| `number`)[]	Array of cluster positions. - Every two elements represent the x and y coordinates for a cluster position. - `undefined` means the cluster’s position is not defined and will use centermass positioning instead.

Returns

void

Example

`[10, 20, 30, 40, undefined, undefined]` places the first cluster at (10, 20) and the second at (30, 40);
the third cluster will be positioned at its centermass automatically.

setPointClusterStrength()

setPointClusterStrength(clusterStrength): void

Sets the force strength coefficients for clustering points in the graph.

This method allows you to customize the forces acting on individual points during the clustering process. The force coefficients determine the strength of the forces applied to each point.

Parameters

Parameter	Type	Description
`clusterStrength`	`Float32Array`	A Float32Array of force strength coefficients for each point in the format [coeff1, coeff2, …, coeffn], where `n` is the index of the point. Example: `new Float32Array([1, 0.4, 0.3])` sets the force coefficient for point 0 to 1, point 1 to 0.4, and point 2 to 0.3.

Returns

void

setPinnedPoints()

setPinnedPoints(pinnedIndices): void

Sets which points are pinned (fixed) in position.

Pinned points:

Do not move due to physics forces (gravity, repulsion, link forces, etc.)
Still participate in force calculations (other nodes are attracted to/repelled by them)
Can still be dragged by the user if enableDrag is true

Parameters

Parameter	Type	Description
`pinnedIndices`	`null` \| `number`[]	Array of point indices to pin. Set to `[]` or `null` to unpin all points.

Returns

void

Example

// Pin points 0 and 5
  graph.setPinnedPoints([0, 5])
 
  // Unpin all points
  graph.setPinnedPoints([])
  graph.setPinnedPoints(null)

render()

render(simulationAlpha?): void

Renders the graph and starts rendering. Does NOT modify simulation state - use start(), stop(), pause(), unpause() to control simulation.

Parameters

Parameter	Type	Description
`simulationAlpha?`	`number`	Optional alpha value to set. - If 0: Sets alpha to 0, simulation stops after one frame (graph becomes static). - If positive: Sets alpha to that value. - If undefined: Keeps current alpha value.

Returns

void

zoomToPointByIndex()

zoomToPointByIndex(index, duration?, scale?, canZoomOut?): void

Center the view on a point and zoom in, by point index.

Parameters

Parameter	Type	Description
`index`	`number`	The index of the point in the array of points.
`duration?`	`number`	Duration of the animation transition in milliseconds (`700` by default).
`scale?`	`number`	Scale value to zoom in or out (`3` by default).
`canZoomOut?`	`boolean`	Set to `false` to prevent zooming out from the point (`true` by default).

Returns

void

zoom()

zoom(value, duration?): void

Zoom the view in or out to the specified zoom level.

Parameters

Parameter	Type	Description
`value`	`number`	Zoom level
`duration?`	`number`	Duration of the zoom in/out transition.

Returns

void

setZoomLevel()

setZoomLevel(value, duration?): void

Zoom the view in or out to the specified zoom level.

Parameters

Parameter	Type	Description
`value`	`number`	Zoom level
`duration?`	`number`	Duration of the zoom in/out transition.

Returns

void

getZoomLevel()

getZoomLevel(): number

Get zoom level.

Returns

number

Zoom level value of the view.

getPointPositions()

getPointPositions(): number[]

Get current X and Y coordinates of the points.

Returns

number[]

Array of point positions.

getClusterPositions()

getClusterPositions(): number[]

Get current X and Y coordinates of the clusters.

Returns

number[]

Array of point cluster.

fitView()

fitView(duration?, padding?): void

Center and zoom in/out the view to fit all points in the scene.

Parameters

Parameter	Type	Description
`duration?`	`number`	Duration of the center and zoom in/out animation in milliseconds (`250` by default).
`padding?`	`number`	Padding around the viewport in percentage (`0.1` by default).

Returns

void

fitViewByPointIndices()

fitViewByPointIndices(indices, duration?, padding?): void

Center and zoom in/out the view to fit points by their indices in the scene.

Parameters

Parameter	Type	Description
`indices`	`number`[]	-
`duration?`	`number`	Duration of the center and zoom in/out animation in milliseconds (`250` by default).
`padding?`	`number`	Padding around the viewport in percentage

Returns

void

fitViewByPointPositions()

fitViewByPointPositions(positions, duration?, padding?): void

Center and zoom in/out the view to fit points by their positions in the scene.

Parameters

Parameter	Type	Description
`positions`	`number`[]	-
`duration?`	`number`	Duration of the center and zoom in/out animation in milliseconds (`250` by default).
`padding?`	`number`	Padding around the viewport in percentage

Returns

void

getPointsInRect()

getPointsInRect(selection): Float32Array

Get points indices inside a rectangular area.

Parameters

Parameter	Type	Description
`selection`	[[`number`, `number`], [`number`, `number`]]	Array of two corner points `[[left, top], [right, bottom]]`. The `left` and `right` coordinates should be from 0 to the width of the canvas. The `top` and `bottom` coordinates should be from 0 to the height of the canvas.

Returns

Float32Array

A Float32Array containing the indices of points inside a rectangular area.

getPointsInRange()

getPointsInRange(selection): Float32Array

Get points indices inside a rectangular area.

Parameters

Parameter	Type	Description
`selection`	[[`number`, `number`], [`number`, `number`]]	Array of two corner points `[[left, top], [right, bottom]]`. The `left` and `right` coordinates should be from 0 to the width of the canvas. The `top` and `bottom` coordinates should be from 0 to the height of the canvas.

Returns

Float32Array

A Float32Array containing the indices of points inside a rectangular area.

Deprecated

Use getPointsInRect instead. This method will be removed in a future version.

getPointsInPolygon()

getPointsInPolygon(polygonPath): Float32Array

Get points indices inside a polygon area.

Parameters

Parameter	Type	Description
`polygonPath`	[`number`, `number`][]	Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the polygon. The coordinates should be from 0 to the width/height of the canvas.

Returns

Float32Array

A Float32Array containing the indices of points inside the polygon area.

selectPointsInRect()

selectPointsInRect(selection): void

Select points inside a rectangular area.

Parameters

Parameter	Type	Description
`selection`	`null` \| [[`number`, `number`], [`number`, `number`]]	Array of two corner points `[[left, top], [right, bottom]]`. The `left` and `right` coordinates should be from 0 to the width of the canvas. The `top` and `bottom` coordinates should be from 0 to the height of the canvas.

Returns

void

selectPointsInRange()

selectPointsInRange(selection): void

Select points inside a rectangular area.

Parameters

Parameter	Type	Description
`selection`	`null` \| [[`number`, `number`], [`number`, `number`]]	Array of two corner points `[[left, top], [right, bottom]]`. The `left` and `right` coordinates should be from 0 to the width of the canvas. The `top` and `bottom` coordinates should be from 0 to the height of the canvas.

Returns

void

Deprecated

Use selectPointsInRect instead. This method will be removed in a future version.

selectPointsInPolygon()

selectPointsInPolygon(polygonPath): void

Select points inside a polygon area.

Parameters

Parameter	Type	Description
`polygonPath`	`null` \| [`number`, `number`][]	Array of points `[[x1, y1], [x2, y2], ..., [xn, yn]]` that defines the polygon. The coordinates should be from 0 to the width/height of the canvas. Set to null to clear selection.

Returns

void

selectPointByIndex()

selectPointByIndex(index, selectAdjacentPoints?): void

Select a point by index. If you want the adjacent points to get selected too, provide true as the second argument.

Parameters

Parameter	Type	Description
`index`	`number`	The index of the point in the array of points.
`selectAdjacentPoints?`	`boolean`	When set to `true`, selects adjacent points (`false` by default).

Returns

void

selectPointsByIndices()

selectPointsByIndices(indices?): void

Select multiples points by their indices.

Parameters

Parameter	Type	Description
`indices?`	`null` \| (`undefined` \| `number`)[]	Array of points indices.

Returns

void

unselectPoints()

unselectPoints(): void

Unselect all points.

Returns

void

getSelectedIndices()

getSelectedIndices(): null | number[]

Get indices of points that are currently selected.

Returns

null | number[]

Array of selected indices of points.

getAdjacentIndices()

getAdjacentIndices(index): undefined | number[]

Get indices that are adjacent to a specific point by its index.

Parameters

Parameter	Type	Description
`index`	`number`	Index of the point.

Returns

undefined | number[]

Array of adjacent indices.

spaceToScreenPosition()

spaceToScreenPosition(spacePosition): [number, number]

Converts the X and Y point coordinates from the space coordinate system to the screen coordinate system.

Parameters

Parameter	Type	Description
`spacePosition`	[`number`, `number`]	Array of x and y coordinates in the space coordinate system.

Returns

[number, number]

Array of x and y coordinates in the screen coordinate system.

screenToSpacePosition()

screenToSpacePosition(screenPosition): [number, number]

Converts the X and Y point coordinates from the screen coordinate system to the space coordinate system.

Parameters

Parameter	Type	Description
`screenPosition`	[`number`, `number`]	Array of x and y coordinates in the screen coordinate system.

Returns

[number, number]

Array of x and y coordinates in the space coordinate system.

spaceToScreenRadius()

spaceToScreenRadius(spaceRadius): number

Converts the point radius value from the space coordinate system to the screen coordinate system.

Parameters

Parameter	Type	Description
`spaceRadius`	`number`	Radius of point in the space coordinate system.

Returns

number

Radius of point in the screen coordinate system.

getPointRadiusByIndex()

getPointRadiusByIndex(index): undefined | number

Get point radius by its index.

Parameters

Parameter	Type	Description
`index`	`number`	Index of the point.

Returns

undefined | number

Radius of the point.

trackPointPositionsByIndices()

trackPointPositionsByIndices(indices): void

Track multiple point positions by their indices on each Cosmos tick.

Parameters

Parameter	Type	Description
`indices`	`number`[]	Array of points indices.

Returns

void

getTrackedPointPositionsMap()

getTrackedPointPositionsMap(): ReadonlyMap<number, [number, number]>

Get current X and Y coordinates of the tracked points. Do not mutate the returned map - it may affect future calls.

Returns

ReadonlyMap<number, [number, number]>

A ReadonlyMap where keys are point indices and values are their corresponding X and Y coordinates in the [number, number] format.

See

trackPointPositionsByIndices To set which points should be tracked

getTrackedPointPositionsArray()

getTrackedPointPositionsArray(): number[]

Get current X and Y coordinates of the tracked points as an array.

Returns

number[]

Array of point positions in the format [x1, y1, x2, y2, …, xn, yn] for tracked points only. The positions are ordered by the tracking indices (same order as provided to trackPointPositionsByIndices). Returns an empty array if no points are being tracked.

getSampledPointPositionsMap()

getSampledPointPositionsMap(): Map<number, [number, number]>

For the points that are currently visible on the screen, get a sample of point indices with their coordinates. The resulting number of points will depend on the pointSamplingDistance configuration property, and the sampled points will be evenly distributed.

Returns

Map<number, [number, number]>

A Map object where keys are the index of the points and values are their corresponding X and Y coordinates in the [number, number] format.

getSampledPoints()

getSampledPoints(): object

For the points that are currently visible on the screen, get a sample of point indices and positions. The resulting number of points will depend on the pointSamplingDistance configuration property, and the sampled points will be evenly distributed.

Returns

object

An object containing arrays of point indices and positions.

Name	Type
`indices`	`number`[]
`positions`	`number`[]

getScaleX()

getScaleX(): undefined | (x) => number

Gets the X-axis of rescaling function.

This scale is automatically created when position rescaling is enabled.

Returns

undefined | (x) => number

getScaleY()

getScaleY(): undefined | (y) => number

Gets the Y-axis of rescaling function.

This scale is automatically created when position rescaling is enabled.

Returns

undefined | (y) => number

start()

start(alpha?): void

Start the simulation. This only controls the simulation state, not rendering.

Parameters

Parameter	Type	Description
`alpha?`	`number`	Value from 0 to 1. The higher the value, the more initial energy the simulation will get.

Returns

void

stop()

stop(): void

Stop the simulation. This stops the simulation and resets its state. Use start() to begin a new simulation cycle.

Returns

void

pause()

pause(): void

Pause the simulation. When paused, the simulation stops running but preserves its current state (progress, alpha). Can be resumed using the unpause method.

Returns

void

unpause()

unpause(): void

Unpause the simulation. This method resumes a paused simulation and continues its execution.

Returns

void

restart()

restart(): void

Restart/Resume the simulation. This method unpauses a paused simulation and resumes its execution.

Returns

void

Deprecated

Use unpause() instead. This method will be removed in a future version.

step()

step(): void

Run one step of the simulation manually. Works even when the simulation is paused.

Returns

void

destroy()

destroy(): void

Destroy this Cosmos instance.

Returns

void

create()

create(): void

Updates and recreates the graph visualization based on pending changes.

Returns

void

flatten()

flatten(pointPositions): number[]

Converts an array of tuple positions to a single array containing all coordinates sequentially

Parameters

Parameter	Type	Description
`pointPositions`	[`number`, `number`][]	An array of tuple positions

Returns

number[]

A flatten array of coordinates

pair()

pair(pointPositions): [number, number][]

Converts a flat array of point positions to a tuple pairs representing coordinates

Parameters

Parameter	Type	Description
`pointPositions`	`number`[]	A flattened array of coordinates

Returns

[number, number][]

An array of tuple positions

Timeline CosmographBars