Plotly 3D Cluster
HTML
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Plots go in blank <div> elements.
You can size them in the plot layout,
or give the div a size as shown here.
-->
<div id="plotly-div" style="width:100%; height:100%" style="margin: 20px;"></div>
JavaScript
var randInRange = function( min, max ) {
return Math.floor( Math.random() * ( max - min + 1 ) + min );
}
var npoints = 200;
var buildXYZData = function () {
var xVals = [];
var lastX = randInRange( 20, 30 )
for (var i = 0, l = npoints; i < l; i++) {
lastX += randInRange( -2, 4 )
xVals.push( lastX );
};
lastX += 20;
for (var i = 0, l = npoints; i < l; i++) {
lastX += randInRange( -2, 4 )
xVals.push( lastX );
};
var yVals = [];
var lastY = randInRange( 80, 90 )
for (var i = 0, l = npoints; i < l; i++) {
lastY += randInRange( -2, 4 )
yVals.push( lastY );
};
lastY += 20;
for (var i = 0, l = npoints; i < l; i++) {
lastY += randInRange( -2, 4 )
yVals.push( lastY );
};
var zVals = [];
var lastZ = randInRange( 1000, 2000 )
for (var i = 0, l = npoints*2; i < l; i++) {
lastZ += randInRange( -20, 100 )
zVals.push( lastZ );
};
return {x:xVals, y:yVals, z:zVals};
}
var t1Data = buildXYZData();
var t2Data = buildXYZData();
console.log( t1Data );
var data = [{
x: t1Data.x,
y: t1Data.y,
z: t1Data.z,
mode: 'markers',
type: 'scatter3d',
marker: {
color: 'rgb(23, 190, 207)',
size: 2
}
}
/* For "grouping", but not sure it really helps much.
,{
alphahull: 7,
opacity: 0.1,
type: 'mesh3d',
x: xVals,
y: yVals,
z: zVals
}
*/
,{
x: t2Data.x,
y: t2Data.y,
z: t2Data.z,
mode: 'markers',
type: 'scatter3d',
marker: {
color: 'rgb(123, 90, 107)',
size: 2
}
}
];
var layout = {
autosize: true,
height: 480,
scene: {
aspectratio: {
x: 1,
y: 1,
z: 1
},
camera: {
center: {
x: 0,
y: 0,
z: 0
},
eye: {
x: 1.25,
y: 1.25,
z: 1.25
},
up: {
x: 0,
y: 0,
z: 1
}
},
xaxis: {
type: 'linear',
zeroline: false
},
yaxis: {
type: 'linear',
zeroline: false
},
zaxis: {
type: 'linear',
zeroline: false
}
},
title: '3d point...