Scatterplot matrix for 2d plots

Usage no npm install needed!

<script type="module">
  import reglSplom from '';



Matrix of scatter plots. A wrapper over regl-scatter2d for optimized intersected data rendering.

  • minimal GPU memory footprint: N vs N*N in direct regl-scatter2d passes case.
  • optimized performance due to binary trees for 1d point clustering, opposed to default 2d quad clustering.


npm install regl-splom

let regl = require('regl')({extensions: 'oes_element_index_uint'})
let createMatrix = require('regl-splom')

let scatterMatrix = createMatrix(regl)

// pass data and views to display
    { data: [[], [], ...], ranges, domains, viewport, size, color, border },
    { data: [[], [], ...], ranges, domains, viewport, size, color, border }

// draw views by ids
scatterMatrix.draw(0, 1, ...views)


splom = createSplom(regl)

Creates scatter matrix instance.

splom.update(trace1, trace2, ...traces)

Define passes for draw method. Every trace can include the following options:

Option Description
data An array with arrays for the columns.
range Array with data ranges corresponding to data. Every range can be an array [min, max] or [minX, minY, maxX, maxY]. If undefined - detected automatically.
domain Array with domains for the data, ie. the area data dimension holds within the viewport. Each domain can be an array [min, max] for symmetric placement or [minX, minY, maxX, maxY] for precise position. Domain values are from 0..1 interval, defining what area of the viewport a dimension holds. By default domains cover viewport evnely.
padding Padding within domains (in px), or list of paddings per-domain. By default [0,0,0,0]. Can be a number, an array or any rectangle format.
color, size, borderColor, borderSize, opacity Points style.
marker Points marker.
diagonal Show or hide diagonal.
upper Show or hide upper half matrix.
lower Show or hide lower half matrix.
viewport Area that the plot holds within the canvas. Can take any rectangle format.


Draw all defined passes, or only selected ones provided by ids. Optionally define point indexes to render.

// draw 1 and 3 passes
splom.draw(1, 3)

// draw 1, 2 and 3 points from the first pass and 3 point from the second pass
splom.draw([1, 2, 3], [3])


Dispose renderer and all the associated resources



© 2018 Dmitry Yv. MIT License

Development supported by