Voronoi-based point picker (revisited)

.block

license: gpl-3.0

README.md

This block is based on Voronoi-based point picker from njvack

This block uses the d3.distanceLimitedVoronoi d3 plugin I made. This plugin produces the appropriate interactive zones, depending on the Voronoï tesselation and a maximum distance from each datum.

Compared to the original block, there is no need to produce and bind clipPathes, making the code (and usage) simpler.

Acknowledgments to:

• D3.js (v4)
• blockbuilder.org
• Voronoi-based point picker

index.html

<html>
<head>
    <script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>
  	<script src="https://raw.githack.com/Kcnarf/d3-distanceLimitedVoronoi/master/distance-limited-voronoi.js"></script>
</head>
<body>
  <div id="chart">
  </div>
  <div id="slider" style="position:absolute; top:0px">
    Interactive zone radius :
    <form>
      <input id="limit" type="range" name="points" min="0" max="100" value="20" oninput="redraw()">
    </form>
  </div>
  <script type="text/javascript">
    var w = 960,
        h = 500;

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

    var svg = d3.select("#chart")
      .append("svg:svg")
        .attr("width", w)
        .attr("height", h);
    var paths, points;
    points = svg.append("svg:g").attr("id", "points");
    paths = svg.append("svg:g").attr("id", "point-paths");
  	
    var limitedVoronoi = d3.distanceLimitedVoronoi();
    var limit;
    
    var redraw = function () {
      limit = +d3.select("#limit").node().value;
      if (limit===+d3.select("#limit").node().max) { limit = Infinity; }
      limitedVoronoi.limit(limit);
      var path = paths.selectAll("path")
          .data(limitedVoronoi(vertices));
      path = path.enter().append("svg:path").merge(path);
      path.attr("d", function(d) { return d.path; })
          .attr("id", function(d,i) { 
            return "path-"+i; })
          .style("fill", d3.rgb(230, 230, 230))
          .style('fill-opacity', 0.4)
          .style("stroke", d3.rgb(200,200,200))
					.on("mouseover", function(d, i) {
            d3.select(this)
              .style('fill', d3.rgb(31, 120, 180));
            svg.select('circle#point-'+i)
              .style('fill', d3.rgb(31, 120, 180))
          })
          .on("mouseout", function(d, i) {
            d3.select(this)
              .style("fill", d3.rgb(230, 230, 230));
            svg.select('circle#point-'+i)
              .style('fill', 'black')
          });

      points.selectAll("circle")
          .data(vertices)
        .enter().append("svg:circle")
          .attr("id", function(d, i) { 
            return "point-"+i; })
          .attr("transform", function(d) { return "translate(" + d + ")"; })
          .attr("r", 2)
          .attr('stroke', 'none');
    }
    redraw()
  </script>
</body>
</html>

thumbnail.png