Light

gl-vis / regl-splom Goto Github PK

View Code? Open in Web Editor NEW

2.0 3.0 2.0 314 KB

Matrix of scatter2d plots

Home Page: https://dy.github.io/regl-splom

License: MIT License

JavaScript 100.00%

splom plot scatter-matrix scatter

regl-splom's Introduction

regl-splom

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.

Usage

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

let scatterMatrix = createMatrix(regl)

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

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

API

`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.

`splom.draw(...ids?|...points?)`

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

`splom.destroy()`

Dispose renderer and all the associated resources

Related

License

© 2018 Dmitry Yv. MIT License

Development supported by plot.ly.

regl-splom's People

Contributors

Stargazers

Watchers

Forkers

andersk originalsin

regl-splom's Issues

Does not work with typed array data columns

Consider:

const regl = require('regl')({ extensions: 'oes_element_index_uint' })
const createMatrix = require('./')

let splom = createMatrix(regl)

splom.update({
  data: [
    new Float32Array([1, 2, 3]),
    new Float32Array([4, 6, 8]),
    new Float32Array([1, 5, 9])
  ],
  ranges: [
    [0, 10],
    [0, 10],
    [0, 10]
  ],
  domain: [
    [0, 0, 0.3, 0.3],
    [0.35, 0.35, 0.65, 0.65],
    [0.7, 0.7, 1, 1] 
  ],
  color: ['red', 'green', 'blue'],
  size: [20, 10, 30]
})

splom.draw()

this gives:

and a blank screen.

Is this a known limitation of this implementation? That is, should we try to convert typed array to plain arrays in plotly.js? Or would there be an easy way to make regl-splom accept typed arrays?

How to set domains and ranges for no-diagonal + no-upper or no-lower sploms?

Consider:

const regl = require('regl')({ extensions: 'oes_element_index_uint' })
const createMatrix = require('./')

let splom = createMatrix(regl)

splom.update({
  data: [
    [1, 2, 3],
    [4, 6, 8],
    [1, 5, 9]
  ],
  ranges: [
    [0, 10],
    [0, 10],
    [0, 10]
  ],
  domain: [
    [0, 0, 0.3, 0.3],
    [0.35, 0.35, 0.65, 0.65],
    [0.7, 0.7, 1, 1] 
  ],
  diagonal: false,
  upper: false
})

splom.draw()

where data, ranges and domains have the same length - this generates:

Now, if we want to just draw the three non-empty, how should we go about it? In this case, data should still be 3x3 both now there are only 2 x and 2 y axes.

Generated (x,y) positions are off

From

const regl = require('regl')({ extensions: 'oes_element_index_uint' })
const createMatrix = require('./')


// create splom instance
let splom = createMatrix(regl)

splom.update({
  data: [
    [1, 2, 3],
    [4, 6, 8]
  ],
  ranges: [
    [0, 10],
    [0, 10]
  ]
})

splom.draw()

I get:

where the the top-left panel which is supposed to plot x=[1,2,3] vs y=[4,6,8] is plotting instead x=[4,6,8] vs y=[1,2,3] and similarly for the bottom-right panel.

Remove left-pad dependency

I don't see left-pad being used. This dependency makes it awkward to use plotly.js due to a weird licensing.

The left-pad license was updated to MIT in the repo, but the repo has been archived before it was even published to npm.

I found one regl.buffer `data: null`

here:

https://github.com/dy/regl-splom/blob/70d118e451d147eb4892a8eec2c56fe572dd581b/index.js#L132

which is likely to break in Safari.

destroy is broken again

from any splom mock off plotly/plotly.js#2505 then calling Plotly.purge(gd) (which calls splom.destroy) gives:

destroy method is broken

const regl = require('regl')({ extensions: 'oes_element_index_uint' })
const createMatrix = require('./')


// create splom instance
let splom = createMatrix(regl)

splom.update({
  data: [
    [1, 2, 3],
    [4, 6, 8]
  ],
  ranges: [
    [0, 10],
    [0, 10]
  ]
})

splom.draw()

setTimeout(() => {
  splom.destroy()
}, 2000)

spits out

No 'marker' option?

SDF markers (as in regl-scatter2d) don't seem to be supported.

1.0 To do

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.