voronoi knn

Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links {
  stroke: #000;
  stroke-opacity: 0.2;
}

.polygons {
  fill: none;
  stroke: #000;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

console.clear();

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

/** DUMB DATA **/
  var sites = d3.range(200)
    .map(function(d) { 
      var x = Math.random() * (width - 80) + 40;
      var y = Math.random() * (height-80) + 40;
      return {
        x: x,
        y: y,
        id: 'luminiare'+Math.random()
      };
    }).filter((point)=>{
      var x = point.x;
      var y = point.y;
      xInRange = x>200 && x<600;
      yInRange = y<400;
			return !(xInRange && yInRange);
    });

var voronoi = d3.voronoi() 
		.x((d)=>d.x)
		.y((d)=>d.y)
    .extent([[0, 0], [width, height]]);

var diagram = voronoi(sites);
  var links = diagram.links();
 
  var averageDistance = getAverageDistance();
  
var radius = svg.append("g")
  .attr("class", "spread");

var polygon = svg.append("g")
  .attr("class", "polygons")
  .selectAll("path")
  .data(voronoi.polygons(sites))
  .enter().append("path")
	.attr('stroke','cyan')
 	.call(redrawPolygon);

var circles = svg.append("g")
  .attr("class", "circles")
  .selectAll('circle')
  .data(sites)
  .enter().append('circle')
  .attr('r', 10)
  .attr('fill',function(d){
    return 'red';
  })
  .attr("cy", (d)=> d.y)
  .attr("cx", (d)=> d.x)
	.on("click", findNeighbours)
	.on("mouseenter", showRadius)

function showRadius(){
  var cell = findCell(d3.mouse(this));
  radius.selectAll('circle').remove();
  radius
    .append('circle')
    .attr('r', averageDistance)
    .attr("cy", cell.data.y)
    .attr("cx", cell.data.x)
    .attr('stroke','blue')
		.attr('fill','#fffbea');
}

var highlighted = [];

function findCell(m) {
  return diagram.find(m[0],m[1])
}

function findNeighbours() {
  
  
    var cell = findCell(d3.mouse(this));
		var cellData = diagram.cells[cell.index];
  	
		cell.data.status = 'localized';
  
    
  	for(var edgeIndex of cellData.halfedges)
	  {
			var edge = diagram.edges[edgeIndex];
      
      var neighbour = edge.left == cell ? edge.right : edge.left;

if(!neighbour) continue;
      if(neighbour.data.status == 'localized') continue;
      
      var tP = neighbour.data; // target Point
      var sP = cell.data; // source Point
			
      var distance = Math.sqrt(
        (Math.pow(tP.x-sP.x,2))+
        (Math.pow(tP.y-sP.y,2)))
			
      if(distance < averageDistance){
        neighbour.data.status = 'highlighted';
      }
      
//       break;

}
  
	redraw();
  
}

function redraw() {

circles.data(sites)
    .attr('fill',function(d){
    	  return {
            localized: 'blue',
            highlighted: 'green'
          }[d.status] || 'red'
  })
}

</script>

https://d3js.org/d3.v4.min.js