voronoi Play

Built with blockbuilder.org Inspired by Mike Bostock's vornoi tessalation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var height = 500;
    var width = 960;
    
    var voronoi = d3.voronoi().extent([[-1, -1], [width + 1, height + 1]]);
    var xScale = d3.scaleLinear().domain([-100,100]).range([0, width]);
    var yScale = d3.scaleLinear().domain([-100,100]).range([height,0]);
    
    var data = [ [-86,12], [-3, -20], [-3, 15], [71, 10],[35,10], [56,25]].map(d => [xScale(d[0]), yScale(d[1])]);
    var colorScale = d3.scaleOrdinal(d3.schemeCategory10);//.domain(data);
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    var polygon = svg.append('g').attr('class', 'polygons')
    									.selectAll('path')
    									.data(voronoi.polygons(data))
    									.enter()
    									.append('path')
    									.call(redrawPolygon);
    
    
    var link = svg.append("g")
    .attr("class", "links")
  .selectAll("line")
  .data(voronoi.links(data))
  .enter().append("line");
    //.call(redrawLink);
    
    
    
 function redrawPolygon(polygon) {
  polygon
      .attr("d", function(d) {console.log(d, "HHHHHHHHH");return d ? "M" + d.join("L") + "Z" : null; })
  		.attr('fill', 'none')
  		.attr('fill', d => {return(colorScale(d));}
           
          )
  		.on('mouseover', function(d){console.log(d, "HHHHHHHHHHHHHHHHH");
                                   d3.select(this).attr('fill', 'grey');
                                  })
  		.on('mouseout', function(d){d3.select(this).attr('fill', d => colorScale(d));})
  ;

var points = svg.selectAll('circle').data(data);
   		points = points.enter().append('circle')
   				.attr('r', 12)
      		.attr('cx', d => d[0])
      		.attr('cy', d => d[1])
   				
   
}

/*svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")*/

</script>
</body>

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