d3 voronoi interpolation! by shawnbot

The Voronoi tesselation shows the closest point on the plane for a given set of points. This example updates the Voronoi diagram in response to mouse interaction! Colors by Cynthia Brewer; algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte; interaction inspired by Raymond Hill.

This example shows what voronoi tesselations look like drawn with various d3 line interpolators.

index.html

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

    body {
      overflow: hidden;
    }

    path {
      fill-opacity: .8;
      stroke: #000;
    }

    path:first-child {
      fill: yellow !important;  
    }

    circle {
      fill: #fff;
      stroke: #000;
      pointer-events: none;
    }

    .PiYG .q0-9{fill:rgb(197,27,125)}
    .PiYG .q1-9{fill:rgb(222,119,174)}
    .PiYG .q2-9{fill:rgb(241,182,218)}
    .PiYG .q3-9{fill:rgb(253,224,239)}
    .PiYG .q4-9{fill:rgb(247,247,247)}
    .PiYG .q5-9{fill:rgb(230,245,208)}
    .PiYG .q6-9{fill:rgb(184,225,134)}
    .PiYG .q7-9{fill:rgb(127,188,65)}
    .PiYG .q8-9{fill:rgb(77,146,33)}

    </style>
  </head>
  <body>
    <select id="interpolate">
      <option>basis-closed</option>
      <option>linear</option>
      <option>basis</option>
      <option>cardinal-closed</option>
      <option>cardinal</option>
      <option>monotone</option>
      <option>step</option>
      <option>step-before</option>
      <option>step-after</option>
    </select>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
        height = 480;

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

    var voronoi = d3.geom.voronoi()
        .clipExtent([[0, 0], [width, height]]);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("class", "PiYG")
        .on("mousemove", function() {
          vertices[0] = d3.mouse(this);
          redraw();
        })
        .on("touchstart", touch)
        .on("touchmove", touch);

    var path = svg.append("g").selectAll("path");

    var line = d3.svg.line();

    var select = d3.select("#interpolate")
      .on("change", function() {
        line.interpolate(this.value);
        redraw();
      })
    line.interpolate(select.property("value"));

    svg.selectAll("circle")
        .data(vertices.slice(1))
      .enter().append("circle")
        .attr("transform", function(d) { return "translate(" + d + ")"; })
        .attr("r", 2);

    redraw();

    function touch() {
      vertices[0] = d3.touches(this)[0];
      redraw();
    }

    function redraw() {
      path = path.data(voronoi(vertices), String);

      path.exit().remove();
      path.enter().append("path")
        .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; });
      path.attr("d", function(d) {
        return line(d) + "Z";
      });

      path.order();
    }

    </script>
  </body>
</html>