The Delaunay triangulation, the dual of Voronoi tesselation, creates a planar, triangular mesh for a given set of points. This example updates the Delaunay triangulation 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.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
path { | |
fill: none; | |
stroke: #000; | |
stroke-width: 3px; | |
} | |
circle { | |
fill: #000; | |
stroke: #000; | |
pointer-events: none; | |
} | |
.PiYG .q0-9{fill:"#D9D993"} | |
.PiYG .q1-9{fill:"#D9D993"} | |
.PiYG .q2-9{fill:"#D9D993"} | |
.PiYG .q3-9{fill:"#D9D993"} | |
.PiYG .q4-9{fill:"#D9D993"} | |
.PiYG .q5-9{fill:"#D9D993"} | |
.PiYG .q6-9{fill:"#D9D993"} | |
.PiYG .q7-9{fill:"#D9D993"} | |
.PiYG .q8-9{fill:"#D9D993"} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var vertices = d3.range(100).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", function() { vertices[0] = d3.mouse(this); redraw(); }); | |
var path = svg.append("g").selectAll("path"); | |
svg.selectAll("circle") | |
.data(vertices.slice(1)) | |
.enter().append("circle") | |
.attr("transform", function(d) { return "translate(" + d + ")"; }) | |
.attr("r", 5); | |
redraw(); | |
c | |
function redraw() { | |
path = path.data(d3.geom.delaunay(vertices).map(function(d) { return "M" + d.join("L") + "Z"; }), String); | |
path.exit().remove(); | |
path.enter().append("path").attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }).attr("d", String); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment