Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:12
  • 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 codybuell/74995bfa9c7629690f7c to your computer and use it in GitHub Desktop.
Draggable Voronoi Geom
<!DOCTYPE html>
<meta charset="utf-8">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
path {
stroke: #333;
fill: #ccc;
<script src=""></script>
// define width and height of svg element
var w = 960,
h = 500;
// generate some random data points
var vertices = d3.range(50).map(function(d) {
return [Math.random() * w, Math.random() * h];
// setup voronoi geom
var voronoi = d3.geom.voronoi().x(function(d) { return d.x; }).y(function(d) { return d.y; });
// not sure why but removing this breaks drag functionality
var zoom = d3.behavior.zoom().on("zoom", function(d,i) {
// prepare svg element
var svg ="body")
.attr("width", w)
.attr("height", h)
// setup the force
var force = d3.layout.force()
.size([w, h])
.on("tick", update)
// setup the path
var path = svg.selectAll("path");
// make it happen
function update(e) {
path =
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
.on("drag", function(d, i) {
vertices[i] = {x: vertices[i].x + d3.event.dx, y: vertices[i].y + d3.event.dy};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment