This example uses d3.geom.hull to compute the 2D convex hull of a set of points. An outer stroke is used to pad the hull. Click to add a new point.
forked from mbostock's block: Convex Hull
license: gpl-3.0 |
This example uses d3.geom.hull to compute the 2D convex hull of a set of points. An outer stroke is used to pad the hull. Click to add a new point.
forked from mbostock's block: Convex Hull
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<title>Convex Hull</title> | |
<style> | |
rect { | |
fill: none; | |
pointer-events: all; | |
} | |
.hull { | |
fill: steelblue; | |
stroke: steelblue; | |
stroke-width: 32px; | |
stroke-linejoin: round; | |
} | |
circle { | |
fill: white; | |
stroke: black; | |
stroke-width: 1.5px; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var width = 960, | |
height = 500; | |
var randomX = d3.random.normal(width / 2, 60), | |
randomY = d3.random.normal(height / 2, 60), | |
vertices = d3.range(100).map(function() { return [randomX(), randomY()]; }); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); }) | |
.on("click", function() { vertices.push(d3.mouse(this)); redraw(); }); | |
svg.append("rect") | |
.attr("width", width) | |
.attr("height", height); | |
var hull = svg.append("path") | |
.attr("class", "hull"); | |
var circle = svg.selectAll("circle"); | |
redraw(); | |
function redraw() { | |
hull.datum(d3.geom.hull(vertices)).attr("d", function(d) { return "M" + d.join("L") + "Z"; }); | |
circle = circle.data(vertices); | |
circle.enter().append("circle") | |
.attr("r", function(d){return Math.random()*6;}); | |
circle.attr("transform", function(d) { return "translate(" + d + ")"; }); | |
} | |
</script> |