Delaunay by bricedev

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var width = 960,
    height = 500,
    maxDistance = 80;

var particles = d3.range(200).map(function() {
  return {
    x: Math.random() * width,
    y: Math.random() * height
  };
});

var voronoi = d3.geom.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });

var links = voronoi.links(particles);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

context.clearRect(0, 0, width, height);

links.forEach(function(d) {
  context.beginPath();
  context.moveTo(d.source.x, d.source.y);
  context.lineTo(d.target.x, d.target.y);
  var distance = Math.sqrt((d.source.x - d.target.x)*(d.source.x - d.target.x) + (d.source.y - d.target.y)*(d.source.y - d.target.y));
  context.globalAlpha = distance > maxDistance ? 0 : (maxDistance-distance)/maxDistance;
  context.strokeStyle = "#08306b";
  context.lineWidth = 1;
  context.stroke();  
});


context.beginPath();
context.globalAlpha = 1;
particles.forEach(function(d) {
  context.moveTo(d.x, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
});
context.lineWidth = 3;
context.strokeStyle = "#fff";
context.stroke();
context.fillStyle = "#08306b";
context.fill();

</script>