StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.7 KiB
102 lines
2.7 KiB
4 years ago
|
var createCamera = require('3d-view-controls')
|
||
|
|
var getBounds = require('bound-points')
|
||
|
|
var perspective = require('gl-mat4/perspective')
|
||
|
|
var createAxes = require('gl-axes3d')
|
||
|
|
var createSpikes = require('gl-spikes3d')
|
||
|
|
var createSelect = require('gl-select-static')
|
||
|
|
var getBounds = require('bound-points')
|
||
|
|
var mouseChange = require('mouse-change')
|
||
|
|
var createConePlot = require('../cone')
|
||
|
|
var createMesh = createConePlot.createConeMesh;
|
||
|
|
var data = require('./dataset-rossler.json');
|
||
|
|
|
||
|
|
var bounds = []
|
||
|
|
|
||
|
|
var conePlot = createConePlot({
|
||
|
|
positions: data.positions,
|
||
|
|
vectors: data.vectors,
|
||
|
|
// uncomment to see visible cones
|
||
|
|
//coneSize: 40,
|
||
|
|
colormap: 'portland'
|
||
|
|
}, bounds)
|
||
|
|
|
||
|
|
var canvas = document.createElement('canvas')
|
||
|
|
document.body.appendChild(canvas)
|
||
|
|
window.addEventListener('resize', require('canvas-fit')(canvas))
|
||
|
|
var gl = canvas.getContext('webgl')
|
||
|
|
|
||
|
|
var camera = createCamera(canvas, {
|
||
|
|
eye: [3,3,3],
|
||
|
|
center: [0,0,0],
|
||
|
|
zoomMax: 500,
|
||
|
|
mode: 'turntable'
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
var mesh = createMesh(gl, conePlot)
|
||
|
|
|
||
|
|
var select = createSelect(gl, [canvas.width, canvas.height])
|
||
|
|
var tickSpacing = 1;
|
||
|
|
var ticks = bounds[0].map(function(v,i) {
|
||
|
|
var arr = [];
|
||
|
|
var firstTick = 0; //Math.ceil(bounds[0][i] / tickSpacing) * tickSpacing;
|
||
|
|
var lastTick = 3; //Math.floor(bounds[1][i] / tickSpacing) * tickSpacing;
|
||
|
|
for (var tick = firstTick; tick <= lastTick; tick += tickSpacing) {
|
||
|
|
if (tick === -0) tick = 0;
|
||
|
|
arr.push({x: tick, text: tick.toString()});
|
||
|
|
}
|
||
|
|
return arr;
|
||
|
|
});
|
||
|
|
var axes = createAxes(gl, { bounds: bounds, ticks: ticks })
|
||
|
|
var spikes = createSpikes(gl, {
|
||
|
|
bounds: bounds
|
||
|
|
})
|
||
|
|
var spikeChanged = false
|
||
|
|
|
||
|
|
mouseChange(canvas, function(buttons, x, y) {
|
||
|
|
var pickData = select.query(x, canvas.height - y, 10)
|
||
|
|
var pickResult = mesh.pick(pickData)
|
||
|
|
if(pickResult) {
|
||
|
|
spikes.update({
|
||
|
|
position: pickResult.position,
|
||
|
|
enabled: [true, true, true]
|
||
|
|
})
|
||
|
|
spikeChanged = true
|
||
|
|
} else {
|
||
|
|
spikeChanged = spikes.enabled[0]
|
||
|
|
spikes.update({
|
||
|
|
enabled: [false, false, false]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
requestAnimationFrame(render)
|
||
|
|
|
||
|
|
gl.enable(gl.DEPTH_TEST)
|
||
|
|
|
||
|
|
var needsUpdate = camera.tick()
|
||
|
|
var cameraParams = {
|
||
|
|
projection: perspective([], Math.PI/4, canvas.width/canvas.height, 0.1, 300),
|
||
|
|
view: camera.matrix
|
||
|
|
}
|
||
|
|
|
||
|
|
if(needsUpdate || spikeChanged) {
|
||
|
|
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
|
||
|
|
gl.viewport(0, 0, canvas.width, canvas.height)
|
||
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
|
||
|
|
axes.draw(cameraParams)
|
||
|
|
spikes.draw(cameraParams)
|
||
|
|
mesh.draw(cameraParams)
|
||
|
|
spikeChanged = false
|
||
|
|
}
|
||
|
|
|
||
|
|
if(needsUpdate) {
|
||
|
|
select.shape = [canvas.width, canvas.height]
|
||
|
|
select.begin()
|
||
|
|
mesh.drawPick(cameraParams)
|
||
|
|
select.end()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
render()
|