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.
166 lines
5.8 KiB
166 lines
5.8 KiB
4 years ago
|
<!doctype html>
|
||
|
|
||
|
<html style='height: 100%;'>
|
||
|
|
||
|
<head>
|
||
|
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
|
||
|
|
||
|
<style>
|
||
|
|
||
|
body {
|
||
|
display:flex;
|
||
|
flex-direction: column;
|
||
|
align-items: center;
|
||
|
justify-content: center;
|
||
|
}
|
||
|
|
||
|
h2 {
|
||
|
margin-top: 50px;
|
||
|
margin-bottom: 10px;
|
||
|
}
|
||
|
|
||
|
#table, #map, #map-log, #diagnostics-log {
|
||
|
width: 960px;
|
||
|
margin: 10px 0;
|
||
|
}
|
||
|
|
||
|
#map {
|
||
|
height: 100px;
|
||
|
}
|
||
|
|
||
|
#canvas {
|
||
|
height: 0;
|
||
|
}
|
||
|
|
||
|
th code {
|
||
|
font-weight: bold;
|
||
|
}
|
||
|
</style>
|
||
|
</head>
|
||
|
|
||
|
<body class='fill-gray'>
|
||
|
|
||
|
<h2>Map instantiation diagnostics</h2>
|
||
|
<div id="map"></div>
|
||
|
<code id="map-log"></code>
|
||
|
<script src='https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
|
||
|
<script>
|
||
|
mapboxgl.accessToken = 'pk.eyJ1IjoibHVjYXN3b2oiLCJhIjoiY2l5Nmg4cWU1MDA0ejMzcDJtNHJmZzJkcyJ9.WhcEdTYQH6sSw2pm0RSP9Q';
|
||
|
try {
|
||
|
var map = new mapboxgl.Map({
|
||
|
container: 'map',
|
||
|
style: 'mapbox://styles/mapbox/streets-v9',
|
||
|
zoom: 1
|
||
|
});
|
||
|
map.on('error', function(event) {
|
||
|
writeLogMessage(event.error.toString());
|
||
|
});
|
||
|
writeLogMessage('WebGL context:', map.painter.gl);
|
||
|
writeLogMessage('WebGL errors:', map.painter.gl.getError());
|
||
|
} catch (e) {
|
||
|
writeLogMessage('Caught exception:', e.stack || e.toString());
|
||
|
}
|
||
|
writeLogMessage('Done!');
|
||
|
|
||
|
function writeLogMessage() {
|
||
|
document.getElementById('map-log').innerHTML += Array.prototype.join.call(arguments, ' ') + '\n';
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
|
||
|
|
||
|
<h2>Support detection diagnostics</h2>
|
||
|
<canvas id="canvas"></canvas>
|
||
|
<table id='table'>
|
||
|
<tr>
|
||
|
<th>Detection method</th>
|
||
|
<th>Context type</th>
|
||
|
<th><code>failIfMajorPerformanceCaveat</code></th>
|
||
|
<th>Result</th>
|
||
|
<th>Errors</th>
|
||
|
</tr>
|
||
|
</table>
|
||
|
<script src='index.js'></script>
|
||
|
<script>
|
||
|
function performTest(detectionMethod, contextType, failIfMajorPerformanceCaveat) {
|
||
|
var attributes = Object.create(mapboxgl.supported.webGLContextAttributes);
|
||
|
attributes.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat;
|
||
|
|
||
|
var canvas = document.getElementById('canvas');
|
||
|
if (canvas[detectionMethod]) {
|
||
|
var results = '<code>' + canvas[detectionMethod](contextType, attributes) + '</code>';
|
||
|
writeTestResults(results, results && results.getError && results.getError());
|
||
|
} else {
|
||
|
writeTestResults('detection method unavailable');
|
||
|
}
|
||
|
|
||
|
function writeTestResults(result, error) {
|
||
|
var tr = document.createElement('tr');
|
||
|
|
||
|
var detectionMethodTd = document.createElement('td');
|
||
|
detectionMethodTd.innerHTML = detectionMethod;
|
||
|
tr.appendChild(detectionMethodTd);
|
||
|
|
||
|
var contextTypeTd = document.createElement('td');
|
||
|
contextTypeTd.innerHTML = contextType;
|
||
|
tr.appendChild(contextTypeTd);
|
||
|
|
||
|
var failIfMajorPerformanceCaveatTd = document.createElement('td');
|
||
|
failIfMajorPerformanceCaveatTd.innerHTML = failIfMajorPerformanceCaveat;
|
||
|
tr.appendChild(failIfMajorPerformanceCaveatTd);
|
||
|
|
||
|
var resultTd = document.createElement('td');
|
||
|
resultTd.innerHTML = result;
|
||
|
tr.appendChild(resultTd);
|
||
|
|
||
|
var errorTd = document.createElement('td');
|
||
|
errorTd.innerHTML = error || 'none';
|
||
|
tr.appendChild(errorTd);
|
||
|
|
||
|
document.getElementById('table').appendChild(tr);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
performTest('probablySupportsContext', 'webgl', true);
|
||
|
performTest('probablySupportsContext', 'webgl', false);
|
||
|
performTest('probablySupportsContext', 'experimental-webgl', true);
|
||
|
performTest('probablySupportsContext', 'experimental-webgl', false);
|
||
|
|
||
|
performTest('supportsContext', 'webgl', true);
|
||
|
performTest('supportsContext', 'webgl', false);
|
||
|
performTest('supportsContext', 'experimental-webgl', true);
|
||
|
performTest('supportsContext', 'experimental-webgl', false);
|
||
|
|
||
|
performTest('getContext', 'webgl', true);
|
||
|
performTest('getContext', 'webgl', false);
|
||
|
performTest('getContext', 'experimental-webgl', true);
|
||
|
performTest('getContext', 'experimental-webgl', false);
|
||
|
</script>
|
||
|
|
||
|
|
||
|
|
||
|
<h2>WebGL diagnostics</h2>
|
||
|
<script src="https://cdn.rawgit.com/ashima/webgl-diagnostic/3cc7b376/js/webgldiagdata.js"></script>
|
||
|
<script src="https://cdn.rawgit.com/ashima/webgl-diagnostic/3cc7b376/js/webgldiagnostic.js"></script>
|
||
|
<code id="diagnostics-log"></code>
|
||
|
<script>
|
||
|
var diagnosticsLogElement = document.getElementById('diagnostics-log');
|
||
|
diagnosticsLogElement.innerHTML = WebGLDiagnostic.report('canvas');
|
||
|
|
||
|
var canvasElement = document.getElementById('canvas');
|
||
|
var gl = canvasElement.getContext('webgl') || canvasElement.getContext('experimental-webgl');
|
||
|
var glDebugRendererInfo = gl.getExtension('WEBGL_debug_renderer_info');
|
||
|
diagnosticsLogElement.innerHTML += '\n';
|
||
|
if (glDebugRendererInfo) {
|
||
|
diagnosticsLogElement.innerHTML += 'Unmasked vendor: ' + gl.getParameter(glDebugRendererInfo.UNMASKED_VENDOR_WEBGL) + '\n';
|
||
|
diagnosticsLogElement.innerHTML += 'Unmasked renderer: ' + gl.getParameter(glDebugRendererInfo.UNMASKED_RENDERER_WEBGL) + '\n';
|
||
|
} else {
|
||
|
diagnosticsLogElement.innerHTML += '"WEBGL_debug_renderer_info" extension unavailable'
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
|
||
|
</body>
|
||
|
|
||
|
</html>
|