Skip to content

Instantly share code, notes, and snippets.

Last active December 3, 2018 08:30
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Kcnarf/6d5ace3aa9cc1a313d72b810388d1003 to your computer and use it in GitHub Desktop.
Voronoi-based point picker (revisited)
license: gpl-3.0
<script type="text/javascript" src=""></script>
<script src=""></script>
<div id="chart">
<div id="slider" style="position:absolute; top:0px">
Interactive zone radius :
<input id="limit" type="range" name="points" min="0" max="100" value="20" oninput="redraw()">
<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 ="#chart")
.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 ="#limit").node().value;
if ("#limit").node().max) { limit = Infinity; }
var path = paths.selectAll("path")
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) {
.style('fill', d3.rgb(31, 120, 180));'circle#point-'+i)
.style('fill', d3.rgb(31, 120, 180))
.on("mouseout", function(d, i) {
.style("fill", d3.rgb(230, 230, 230));'circle#point-'+i)
.style('fill', 'black')
.attr("id", function(d, i) {
return "point-"+i; })
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2)
.attr('stroke', 'none');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment