Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Voronoi Diagram with Force Directed Nodes and Delaunay Links
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="">
<style type="text/css">
circle {
stroke: #EFEDF5;
fill: #EFEDF5;
line {
stroke: #EFEDF5;
pointer-events: none
stroke: black
<div id="chart">
<script type="text/javascript">
var w = 960,
h = 500,
links = [],
voronoiVertices = [],
color = d3.scale.quantize().domain([7000, 10000]).range(d3.range(2, 9));
var vertices = d3.range(100).map(function(d) { return {x: d.x, y: d.y}; })
var zoomChargeScale = d3.scale.quantize().domain([0, 100]).range(d3.range(-10000, 1).reverse())
var zoom = d3.behavior.zoom()
.on("zoom", function(d,i) { force.charge(zoomChargeScale(d3.event.scale)).start() });
var svg ="#chart")
.attr("width", w)
.attr("height", h)
.attr("class", "Purples")
var force = self.force = d3.layout.force()
.size([w, h])
.on("tick", update);
.data(d3.geom.voronoi({return [o.x, o.y]})))
.attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
.attr("r", 5)
var link = svg.selectAll("line")
function update(e) {
voronoiVertices ={return [o.x, o.y, o]})
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
.attr("class", function(d, i) { return "q"+color(d3.geom.polygon(d).area())+"-9"; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
links = []
d3.geom.delaunay(voronoiVertices).forEach(function(d) {
links.push(edge(d[0], d[1]));
links.push(edge(d[1], d[2]));
links.push(edge(d[2], d[0]));
link =
link.attr("x1", function(d) { return d.source[2].x; })
.attr("y1", function(d) { return d.source[2].y; })
.attr("x2", function(d) { return[2].x; })
.attr("y2", function(d) { return[2].y; })
function edge(a, b) {
return {
source: a,
target: b

Is there a way to make each individual box a clickable link? Could you use JSON data to bind to each box? If so how?

I did get the Voronoi to work with JSON data. I posted it at this link I used Ruby on Rails, however the modified code from christophermanning can be found in assets -> javascripts -> d3_scripts.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment