File: optics_cluster_with_webworker.html

Recommend this page to a friend!
  Classes of Franz Josef Brünner   OPTICS Algorithm   optics_cluster_with_webworker.html   Download  
File: optics_cluster_with_webworker.html
Role: Example script
Content type: text/plain
Description: tool to try out
Class: OPTICS Algorithm
Find clusters of related points using OPTICS
Author: By
Last change: Update of optics_cluster_with_webworker.html
Date: 2 years ago
Size: 5,823 bytes
 

Contents

Class file image Download
<!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>