<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OPTICS-Clustering-Algo with WebWorker</title>
<script src="libs/datasets/random_points.js" type="text/javascript"></script>
<script src="libs/datasets/birth_and_death_rate.js" type="text/javascript"></script>
<script src="libs/optics.js" type="text/javascript"></script>
<script type="text/javascript">
var clusteringAlgo = null;
var selectedDataset = 'birth_and_death_rate';
var indexNumber = 'gradient';
var startMinPtsValue = 0;
var endMinPtsValue = 0;
window.onload = function(){
document.getElementById('clusterButton').onclick = function(event){
this.disabled = true;
document.getElementById('progress_bar').value = '0';
var main_webworker = new Worker('libs/main_webworker.js')
main_webworker.onmessage = function(event){ // when main webworker returned message it has finished calculating optimal parameters(epsilon,minPts)
var data = event.data;
if(data.progressLevel){
document.getElementById('progress_bar').value = data.progressLevel;
return;
}
main_webworker.terminate();
document.getElementById('clusterButton').disabled = false;
showResultTable(data,selectedDataset,startMinPtsValue,endMinPtsValue);
/* just activate this when you are sure that your computer does not crash
data.forEach(function(result){
visualizeResults(result.e, result.minPts);
});
*/
};
var dataToSend = {};
/* which dataset should be analysed? */
if(selectedDataset === 'birth_and_death_rate'){
dataToSend.dataset = birth_and_death_rate;
clusteringAlgo = new OPTICS(birth_and_death_rate);
}
else{
dataToSend.dataset = random_points;
clusteringAlgo = new OPTICS(random_points);
}
/* which index-number should be used? */
dataToSend.indexNumber = indexNumber;
/* at which minPts-number to start and to end */
dataToSend.startMinPts = startMinPtsValue;
dataToSend.endMinPts = endMinPtsValue;
if( dataToSend.endMinPts > dataToSend.startMinPts)
main_webworker.postMessage(dataToSend);
else
alert('Choose minPts-Values');
};
function visualizeResults(epsilon, minPts){
var output = clusteringAlgo.start(epsilon,minPts);
img = clusteringAlgo.draw2DPlot(output,1000,1000);
document.body.appendChild(img);
img = clusteringAlgo.drawBarChartPlot(output, epsilon, minPts, 3000, 1000);
document.body.appendChild(img);
}
function showResultTable(results,dataset,fromMinPts,toMinPts){
var table = document.createElement('table');
table.setAttribute('border','3px solid black');
table.innerHTML = '<tr><td>Epsilon</td><td>minPts</td></tr>'
results.forEach(function(result){
table.innerHTML += '<tr><td>'+result.e+'</td><td>'+result.minPts+'</td></tr>';
});
var title = document.createElement('h4');
title.innerHTML = 'Dataset: ' + dataset + ', from ' + fromMinPts + ' to '+ toMinPts +' minPts-values, used index-number: ' + indexNumber;
title.innerHTML += '<br/>achieved count: ' + results[0].count;
document.body.appendChild(title);
document.body.appendChild(table);
}
document.getElementById('terminateWorkerButton').onclick = function(event){
if(typeof main_webworker !== 'undefined')
main_webworker.terminate();
document.getElementById('clusterButton').disabled = false;
};
};
function changeDataset(obj){
selectedDataset = obj.value;
}
function changeIndexNumber(obj){
indexNumber = obj.value;
document.getElementById('indexNumberPicture').src = 'libs/img/' + obj.value + '.png';
}
</script>
</head>
<body>
<h2>This app is made for searching optimal parameter-values for OPTICS</h2>
<h3>Choose a dataset, an index-number and minPts-Values and press determine, tip: please choose minPts-Values carefully and choose values that do not have got a too high difference</h3>
<form>
<p style="width:400px">
Use Dataset
<select onchange="changeDataset(this)">
<option value="birth_and_death_rate" selected>Birth and Death Rate of Countries</option>
<option value="random_points">Random Points on ground</option>
</select>
</p>
<p style="width:400px">
<p><img width="150" height="150" style="border:1px solid black" id="indexNumberPicture" src="libs/img/gradient.png"></p>
with Search-Mode
<select onchange="changeIndexNumber(this)">
<option value="gradient" selected>search extended clusters</option>
<option value="density">search dense clusters</option>
</select>
</p>
<p>
and minPts-Values
<select id="startMinPts" onchange="changeMinPtsNumber( this.value, document.getElementById('endMinPts').value )">
</select>
<select id="endMinPts" onchange="changeMinPtsNumber( document.getElementById('startMinPts').value, this.value )">
</select>
<input type="button" id="resetMinPtsValues" value="reset minPts-Values"/>
</p>
<p>
Worker's finished:<progress value="0" max="1" id="progress_bar"></progress>
<input type="button" id="clusterButton" value="determine"/>
<input type="button" id="terminateWorkerButton" value="terminate" />
</p>
</form>
</table>
</body>
<script src="libs/init/setup_minPts.js" type="text/javascript"></script>
</html>
|
Stumble It!
Bookmark in del.icio.us
Download
