Voronoi Tessellation

An interactive demonstration of d3-voronoi rendered to SVG. Compare to Canvas.

forked from mbostock's block: Voronoi Tessellation

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

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

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

.polygons :first-child {
  fill: #f00;
}

.sites {
  fill: #000;
  stroke: #fff;
}

.sites :first-child {
  fill: #fff;
}

</style>
<svg width="400" height="200"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/buckets/1.90.0/buckets.js"></script>
<script>
  
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

svg.append("g")
    .attr("class", "sitesL");
  
svg.append("g")
    .attr("class", "sitesR");

var sites = d3.range(6)
    .map(function(d) { return [Math.random() * width, Math.random() * height]; });

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

// var link = svg.append("g")
//     .attr("class", "links")
//   .selectAll("line")
//   .data(voronoi.links(sites))
//   .enter().append("line")
//     .call(redrawLink);

var sites = sites.sort((a,b) => a[0] - b[0])
var siteL = sites.splice(0, sites.length/2).reverse();
var siteR = sites.splice(sites.length/2 - 1);

var site = d3.select(".sitesL").selectAll("circle")
  .data(siteL).enter().append("circle")
    .attr("r", 2.5)
		.attr("cx", (d) => {
      return d[0]})
		.attr("cy", (d) => d[1])

var site = d3.select(".sitesR")
.selectAll("circle")
  .data(siteR).enter().append("circle")
    .attr("r", 2.5)
		.attr("cx", (d) => d[0])
		.attr("cy", (d) => d[1])
		.attr("fill", "red")

var lastL = siteL[0]
var firstR = siteR[0]

svg.append("line")          // attach a line
		.attr("id", "line")
    .style("stroke", "black")  // colour the line
    .attr("x1", lastL[0])     // x position of the first end of the line
    .attr("y1", lastL[1])      // y position of the first end of the line
    .attr("x2", firstR[0])     // x position of the second end of the line
    .attr("y2", firstR[1]);    // y position of the second end of the line
  
var getSlope = function(p2,p1){
	return (200-p2[1] - (200 - p1[1])) / (p2[0] - p1[0]) 
}

var i = 0;
var j = 0;
var slope = getSlope(siteR[0], siteL[0])
var n = true
while (n) {
  n = false
  while (siteL[i + 1] && getSlope(siteR[j], siteL[i+1]) > slope) {
     n = true
      console.log('i',slope, i , siteL[i][0],  siteR[j][0])

slope = getSlope(siteR[j], siteL[i + 1])

d3.select("svg").append('line')
        .attr("x1", siteL[i+1][0])
        .attr("y1", siteL[i+1][1])
            .attr("x2", siteR[j][0])
            .attr("y2", siteR[j][1]) 
        .attr("stroke", "red")

i++;
    	
    }

while (siteR[j + 1] && getSlope(siteR[j + 1], siteL[i]) < slope) {
            n = true

console.log('j',slope, j , siteL[i][0],  siteR[j][0])

slope = getSlope(siteR[j + 1], siteL[i])
      d3.select("svg").append('line')
    .attr("x1", siteL[i][0])     // x position of the first end of the line
    .attr("y1", siteL[i][1])
        .attr("x2", siteR[j+1][0])
        .attr("y2", siteR[j+1][1]).
      	attr("stroke", "blue")
      j++;
    } 
} 
  console.log("break")
</script>

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

https://cdnjs.cloudflare.com/ajax/libs/buckets/1.90.0/buckets.js