Skip to content

Instantly share code, notes, and snippets.

@antoine
Forked from mbostock/.block
Created November 14, 2012 16:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save antoine/4073135 to your computer and use it in GitHub Desktop.
Save antoine/4073135 to your computer and use it in GitHub Desktop.
Interactive Voronoi + add point

now start with no vertices, add vertices when clicking. Some print bug I think due to the fact that the pointer is "on" a vertice after clicking.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: yellow;
stroke: #000;
}
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>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var vertices=d3.range(2).map(function(d) {
return [Math.random() * width, Math.random() * height];
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "PiYG")
.on("mousemove", update);
svg.selectAll("path")
.data(d3.geom.voronoi(vertices))
.enter().append("path")
.attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle")
.data(vertices.slice(1))
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2);
function add() {
vertices.push(d3.mouse(this));
svg.selectAll("path")
.data(d3.geom.voronoi(vertices))
.enter().append("path")
.attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
svg.selectAll("circle")
.data(vertices.slice(1))
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2);
}
function update() {
var pointer = d3.mouse(this);
for (var i = 0;i<vertices.length; i++) {
if (vertices[i][0] == pointer[0] && vertices[i][1] == pointer[1]) {
console.log('same pos');
return;
}
}
vertices[0] = pointer;
svg.selectAll("path")
.data(d3.geom.voronoi(vertices)
.map(function(d) { return "M" + d.join("L") + "Z"; }))
.filter(function(d) { return this.getAttribute("d") != d; })
.attr("d", function(d) { return d; });
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment