graph

A small oops. We published @cosmos.gl/deck-layers 3.5.0 a little too eagerly, and its layer API changed right after. 3.5.0 is deprecated: please use 3.5.1. If you were quick enough to try 3.5.0, thank you, and sorry. The migration notes have the mapping.

🎉 What's New

deck.gl Integration: @cosmos.gl/deck-layers

cosmos.gl is now a deck.gl layer. The graph runs on deck's GPU device, and cosmos.gl's own renderer draws it into deck's render pass under deck's camera. Positions never leave the GPU, and everything cosmos.gl draws (point shapes, curved links, arrows, dashes) works in the layer.

import { CosmosGraphLayer } from '@cosmos.gl/deck-layers'

new CosmosGraphLayer({ id: 'graph', points: nodes, links: edges, getPointId: (p) => p.id })

Points and links are your objects, or cosmos.gl's flat arrays:

// objects, the deck.gl way
points: [{ id: 'a', group: 0 }, …]
links: [{ source: 'a', target: 'b' }, …]

// flat arrays, no copies: [x0, y0, x1, y1, …] and [src0, tgt0, src1, tgt1, …]
points: { length, initialPositions }
links: pairs

Looks are accessors, as in any deck.gl layer, with colors in 0..255:

getPointColor: (p) => COLORS[p.group],
getPointSize: (p) => p.weight,
getLinkColor: [150, 170, 220, 60],
getLinkWidth: 1,

An accessor you leave out sends nothing, and the matching config key draws instead: pointDefaultColor, pointDefaultSize, linkDefaultColor, linkDefaultWidth.

Everything else is cosmos.gl's configuration, through config:

config: { simulationGravity: 0.25, curvedLinks: true, linkDefaultArrows: true, pointDefaultShape: PointShape.Hexagon }

The view must be flat and y-up, like cosmos.gl's space: OrthographicView({ flipY: false }), or a map at pitch 0 and bearing 0.

The layer runs the simulation and draws it. Picking and drag are opt-in, as in any deck.gl layer: pickable: true, enablePointDrag: true. autoHighlight: true lights the hovered point or link with cosmos.gl's hover ring. Get started → · Live examples → under Examples → Integrations.

GraphSimulation: The Layout on Its Own

The simulation is now its own class. Data in, positions out, no canvas and no rendering:

import { GraphSimulation } from '@cosmos.gl/graph'

const simulation = new GraphSimulation(config, devicePromise)   // or (config) alone: a hidden device of its own
simulation.setPointPositions(positions)
simulation.setLinks(links)
simulation.applyData()
simulation.start()

// each frame
simulation.step()
simulation.getPointPositionTexture()

// follow a few points, for labels
const tracker = simulation.trackPoints([0, 5, 9])

// or draw it with deck.gl layers of your own, which read its position texture:
// the Custom deck layers story shows how. The device must be deck's own, from its onDeviceInitialized

Graph is built on it. CosmosGraphLayer creates a headless Graph, or steps and draws the one you give it through graph.

Run cosmos.gl Inside Your Own Renderer

For applications that own the GPU device and the frame loop. A headless Graph takes no container, schedules no frames, and draws when you tell it to:

const graph = new Graph(null, config, devicePromise)   // headless, on your device
graph.setPointPositions(positions)
graph.render()                                          // uploads the data; drawToRenderPass draws nothing until this

// in your 

🎉 What's New

Better-Looking Dense Graphs

The repulsion force was rebuilt around one idea: handle far and near neighbors differently.

• Far away — a stack of grids, coarse for distant points and finer closer in. A distant group counts as one blob at its average position, and every part of space is counted exactly once: no gaps, no double counting, nothing to tune.
• Up close — real point-to-point forces instead of an average. From each nearby grid cell a point takes up to 8 actual neighbors, picked at random and re-picked every tick, weighted so it averages out to the exact answer as the layout settles. Cells holding 8 points or fewer use all of them, so most graphs get exact close-range forces.
• Stacked points — points sitting at exactly the same spot have no direction to separate along, so each is pushed along its own random direction and the pile comes apart instead of staying stuck.

Dense hubs spread into readable clouds and tight clusters open up. It's also faster per simulation step. How it works in detail →

simulationRepulsionTheta no longer does anything — the new algorithm has no distance bands to tune. It's still accepted so existing configs keep working, but you can safely delete it.

Smoother Hover on Large Graphs

The GPU now keeps extra, off-screen images of the graph in which every pixel records which point — or which link — covers it. Hovering is then a quick lookup: read the pixels right under the cursor, instead of checking every point in the graph.

The point image is drawn smaller than the screen — half resolution, and capped on very large displays. Hover doesn't need pixel-perfect precision, and at full size the image would cost tens of megabytes of GPU memory. Links keep full resolution, because a thin link would otherwise fall between pixels and become hard to hover. Both images are redrawn only when the scene changes, and hover reads them without making anything wait.

Hover does nothing at all while the scene and the cursor are both still, and picking is forgiving: you don't have to hit a point dead-center.

Faster Rendering When Points Overlap

When opaque points overlap, only the one on top is visible. The opaque middles are now drawn first, starting with the topmost point, so the GPU can skip whatever is buried underneath instead of drawing it and painting over it. Soft edges and see-through points follow in a second pass, so the picture looks exactly the same — while heavily overlapping scenes render faster.

It's on by default, and applies while points are fully opaque and highlighting isn't in use — otherwise rendering falls back to the old single pass on its own. Set pointOcclusionCulling: false to switch it off entirely. Live demo: Misc → Point Occlusion Culling.

On-Demand Rendering

Frames are drawn only when something changes, and rendering stops completely when your graph is idle — no GPU, CPU, or battery spent on a static scene. Interactions, config changes, and data updates all wake rendering automatically.

🎉 What's New

Link Styles: Dashed, Dotted, and Gradient Links

https://github.com/user-attachments/assets/2e26990b-1df6-42b7-956f-7e4e050a258f

Links can now be dashed or dotted, and colored as a gradient between their endpoint colors. Both combine freely — per link.

import { Graph, LinkStyle } from '@cosmos.gl/graph'

// one value per link, like setPointShapes
graph.setLinkStyles(new Float32Array([LinkStyle.Solid, LinkStyle.Dashed, LinkStyle.Dotted]))

// gradient from source to target point color
graph.setConfigPartial({ linkColorInterpolateFromEndpoints: true })

const config = {
  linkDefaultStyle: LinkStyle.Solid,        // fallback for links without a style
  linkDashLength: 8,                        // dash length, in screen px
  linkDashGap: 4,                           // gap between dashes (or dots)
  linkColorInterpolateFromEndpoints: false, // endpoint-color gradient
}

All four can be changed in real time.

luma.gl 9.3

The rendering stack moved to luma.gl 9.3. Internal only — no API changes.

🎉 What's New

Add & Remove Points via NaN Positions (with fade in/out)

https://github.com/user-attachments/assets/bbb30e95-99ab-44bc-8392-959848cb110e

Removing a point used to mean shrinking the positions array — renumbering every later point and making the whole graph jump. Now set a point's position to NaN and it fades out in place; every other point keeps its index and spot. Giving the slot a real position fades it back in.

// remove point i — it fades out, everything else stays put
positions[i * 2] = NaN
positions[i * 2 + 1] = NaN
graph.setPointPositions(positions)

• The fade is automatic — or pass per-point sizes/colors in the same update to shrink, fade, or recolor a point as it leaves. Hover picking keeps working while a bare removal fades.
• Links follow their points — they fade out with a removed endpoint and stop being hoverable; drop them whenever you compact.
• Absent points are really gone — excluded from all forces (safe with the simulation on or off), from hover, selection, sampling, and zoom/fitView.
• Your arrays stay yours — size/color arrays are read as-is and never modified (NaN channels resolve at render time), and read-backs are honest: absent points come back as NaN (getTrackedPointPositionsMap omits them), getPointColors/getPointSizes return as-rendered snapshots.
• Opt-in and non-breaking — shrinking the array still works exactly as before. cosmos.gl does not auto-compact the gaps; reuse freed slots or compact when convenient.

Per-render transition duration: render(simulationAlpha?, transitionDuration?)

render() takes an optional duration (ms) for the transition it starts — this call only. 0 snaps, undefined uses config.transitionDuration. Made for compaction: drop the tombstones, renumber, and snap so nothing visibly moves.

graph.setPointPositions(compactedPositions)
graph.render(undefined, 0) // snap this update only

A transition already playing keeps its own duration — changing transitionDuration via config no longer affects it. To end one immediately, apply an update with render(undefined, 0).