plotly.js

Intro

Plotly JavaScript Open Source Graphing Library

Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library

Example: Point Cloud

pointcloud Trace

pointcloud has been removed. Use scattergl instead.

Here’s an example that was previously in the Plotly.js docs and which uses pointcloud, followed by the same example rewritten to use scattergl:

var myPlot = document.getElementById('myDiv');
var xy = new Float32Array([1,2,3,4,5,6,0,4]);
data = [{ xy: xy,  type: 'pointcloud' }];
layout = { };
 
Plotly.newPlot('myDiv', data, layout);

var myPlot = document.getElementById('myDiv');
 
var xy = new Float32Array([1,2,3,4,5,6,0,4]);
 
var x = [];
var y = [];
for (var i = 0; i < xy.length; i += 2) {
    x.push(xy[i]);
    y.push(xy[i + 1]);
}
 
var data = [{
    x: x,
    y: y,
    mode: 'markers',
    type: 'scattergl',
    marker: {
        size: 10,
        color: 'blue',
        opacity: 0.8
    }
}];
var layout = {
    title: 'Point Cloud',
    xaxis: { title: 'X Axis' },
    yaxis: { title: 'Y Axis' }
};
 
Plotly.newPlot('myDiv', data, layout);