File: parameter_selection.html

Recommend this page to a friend!
  Classes of Franz Josef Brünner   OPTICS Algorithm   parameter_selection.html   Download  
File: parameter_selection.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 parameter_selection.html
Date: 2 years ago
Size: 6,459 bytes
 

Contents

Class file image Download
<!DOCTYPE HTML> <html> <head> <title>Visual Spec</title> <link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css"> <script type="text/javascript" src="libs/optics.js"></script> </head> <body> <h1>OPTICS</h1> <form> <label>Epsilon: <input type="range" value="0" min="0" max="50" id="epsilon_input" onChange="redisplay()"> <span id="epsilon_output">0</span></label> <label>minPts: <input type="range" value="0" min="0" max="20" id="minPts_input" onChange="redisplay()"> <span id="minPts_output">0</span></label> <button onClick="redisplay(); return false;">rechnen</button> </form> <div id="results"></div> <script type="text/javascript"> var max_epsilon = 50; var max_minPts = 20; var cache = []; function addAlpha( hex ) { if ( result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) ) { return "rgba(" + parseInt(result[1], 16) + "," + parseInt(result[2], 16) + "," + parseInt(result[3], 16) + ", 0.1)"; } else { return "rgba(255,255,255,0.5);" } } function drawInput(dataset,width,height){ var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var ctx = canvas.getContext ('2d'); dataset.forEach(function(point,index){ ctx.fillRect(point.x,point.y,1,1); }); for(var x=0; x<max_epsilon; x++) { for(var y=0; y<max_minPts; y++) { if( cache[x] && cache[x][y] ) { ctx.fillRect(x,y,1,1); } } } var img = document.createElement('img'); img.width = width; img.height = height; img.src = canvas.toDataURL(); return img } function drawOutput(dataset,width,height, epsilon){ var canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; var ctx = canvas.getContext ('2d'); if(true){ // epsilon-discs ctx.beginPath(); ctx.moveTo(dataset[0].attribute.x, dataset[0].attribute.y); dataset.forEach(function(point,index){ if( point.reachabilityDistance < epsilon ) { ctx.beginPath(); ctx.fillStyle = addAlpha(point.color); ctx.arc(point.attribute.x,point.attribute.y,epsilon, 0, 2*Math.PI, false); ctx.closePath(); ctx.fill(); } }); } if(false){ //draw line dataset.forEach(function(point,index){ if(index > 0) { if( point.color == dataset[index-1].color ) { ctx.lineTo(point.attribute.x, point.attribute.y); } else { ctx.closePath(); ctx.strokeStyle = dataset[index-1].color; ctx.stroke(); ctx.beginPath(); ctx.moveTo(point.attribute.x, point.attribute.y); } } }); ctx.closePath(); ctx.stroke(); } if(true){ // draw point dataset.forEach(function(point,index){ ctx.fillStyle = point.color; ctx.fillRect(point.attribute.x,point.attribute.y,1,1); }); } var img = document.createElement('img'); img.width = width; img.height = height; img.src = canvas.toDataURL(); return img } function drawBarChart(dataset, epsilon, minPts, width, height){ var canvas = document.createElement('canvas'); canvas.height = height; canvas.width = width; var ctx = canvas.getContext ('2d'); var bar_width = width / dataset.length; ctx.translate(0, height); ctx.scale(1, -1); var max_reachability=0; dataset.forEach(function(point,index){ max_reachability = point.reachabilityDistance > max_reachability ? point.reachabilityDistance : max_reachability; }); var reachability_scale = 0.5 * height / max_reachability; dataset.forEach(function(point,index){ ctx.beginPath(); ctx.fillStyle = point.color; if( point.reachabilityDistance == undefined ) { ctx.rect( index * bar_width, 0, bar_width-1, height ); }else { ctx.rect( index * bar_width, 0, bar_width-1, point.reachabilityDistance * reachability_scale ); } ctx.closePath(); ctx.fill(); }); var img = document.createElement('img'); img.width = width; img.height = height; img.src = canvas.toDataURL(); return img }; var o, output, maxPts, i1, i2; var input = [], epsilon = 15, minPts = 4, width = 600, height = 300; maxPts = 500; input = []; var no_around_anchor = 7; var spread_around_anchor = 30; for( var i=0; i<maxPts / no_around_anchor; i++ ) { var anchor_x = spread_around_anchor + Math.random()*(width-2*spread_around_anchor); var anchor_y = spread_around_anchor + Math.random()*(height-2*spread_around_anchor); for( var j=0; j<no_around_anchor; j++ ) { input.push({ id: "id" + i, x: anchor_x + Math.random()*spread_around_anchor, y: anchor_y + Math.random()*spread_around_anchor }); } } document.getElementById('results').appendChild(drawInput(input,width,height)); function redisplay() { epsilon = document.getElementById("epsilon_input").value; document.getElementById("epsilon_output").innerHTML = epsilon; minPts = document.getElementById("minPts_input").value; document.getElementById("minPts_output").innerHTML = minPts; compute(epsilon, minPts); display(input,cache[epsilon][minPts], epsilon); } function compute(epsilon, minPts) { if( cache[epsilon] && cache[epsilon][minPts] ) { // dont comput } else { if( ! cache[epsilon] ) cache[epsilon] = []; var o = new OPTICS(input); cache[epsilon][minPts] = o.start(epsilon, minPts); } } function display(input, output, epsilon){ i1 = drawOutput(output, width, height, epsilon); i2 = drawBarChart(output, epsilon, minPts, width*2, height) document.getElementById('results').innerHTML = ""; document.getElementById('results').appendChild(drawInput(input,width,height)); document.getElementById('results').appendChild(i1); document.getElementById('results').appendChild(i2); } </script> </body> </html>