|
var width = 960, |
|
height = 500, |
|
padding = 2, |
|
min_padding = 0, |
|
max_padding = 50, |
|
maxRadius = 17, |
|
n = 200; |
|
|
|
var points = [ |
|
[18.5,15.7826087], |
|
[18.5,15.1630435 ], |
|
[18.5,14.75 ], |
|
[17.8928571,13.3043478 ], |
|
[17.4880952,12.2717391 ], |
|
[13.8452381,4.63043478 ], |
|
[12.6309524,2.35869565 ], |
|
[11.8214286,0.913043478 ], |
|
[11.0119048,0.5 ], |
|
[10,0.5 ], |
|
[8.98809524,0.5 ], |
|
[8.17857143,0.913043478 ], |
|
[7.36904762,2.35869565 ], |
|
[6.15476191,4.63043478], |
|
[2.51190476,12.2717391 ], |
|
[2.10714286,13.3043478 ], |
|
[1.5,14.75 ], |
|
[1.5,15.1630435], |
|
[1.5,15.7826087 ], |
|
[1.5,18.4673913 ], |
|
[3.52380952,19.5 ], |
|
[5.14285714,19.5 ], |
|
[8.78571429,19.5 ], |
|
[12.8333333,13.5108696], |
|
[12.8333333,10.5 ], |
|
[12.8333333,9.17391304], |
|
[12.0238097,7.52173913 ], |
|
[10,7.5 ], |
|
[7.97619034,7.52173913 ], |
|
[7.16666667,9.17391304 ], |
|
[7.16666667,10.5 ], |
|
[7.16666667,13.5108696], |
|
[11.2142857,19.5 ], |
|
[14.8571429,34.5 ], |
|
[16.4761905,19.5 ], |
|
[18.5,18.4673913 ], |
|
[18.5,15.7826087] |
|
]; |
|
|
|
var nodes = points.map(function(d, i) { |
|
var r = Math.sqrt(1 / 1 * -Math.log(Math.random())) * maxRadius, |
|
p = {id: i, radius: r, cx: (d[0]*10) + 350, cy: (d[1]*10) + 150}; |
|
return p; |
|
}); |
|
|
|
nodes.forEach(function(d) { d.x = d.cx; d.y = d.cy; }); |
|
|
|
var voronoi = d3.geom.voronoi() |
|
.clipExtent([[-padding,-padding],[width+padding,height+padding]]) |
|
.x(function(d){ return d.x; }) |
|
.y(function(d){ return d.y; }); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
var cells = svg.selectAll('.cell') |
|
.data(voronoi(nodes)); |
|
|
|
cells.enter().append('path') |
|
.attr('class', 'cell'); |
|
|
|
var circle = svg.selectAll("circle") |
|
.data(nodes); |
|
|
|
var enter_circle = circle.enter().append("circle") |
|
.attr('class', 'node'); |
|
|
|
enter_circle |
|
.attr("r", function(d) { return d.radius; }) |
|
.attr("cx", function(d) { return d.cx; }) |
|
.attr("cy", function(d) { return d.cy; }); |
|
|
|
var force = d3.layout.force() |
|
.nodes(nodes) |
|
.size([width, height]) |
|
.gravity(.02) |
|
.charge(0) |
|
.on("tick", tick) |
|
.start(); |
|
|
|
force.alpha(.05); |
|
|
|
function tick(e) { |
|
circle |
|
.each(gravity(.2 * e.alpha)) |
|
.each(collide(.5)) |
|
.attr("cx", function(d) { return d.x; }) |
|
.attr("cy", function(d) { return d.y; }); |
|
|
|
cells |
|
.data(voronoi(nodes)); |
|
|
|
cells |
|
.attr('d', function(d){ |
|
if (d.length > 0) |
|
return "M" + d.join("L") + "Z"; |
|
else { |
|
return ''; |
|
} |
|
}); |
|
} |
|
|
|
/* SLIDER |
|
*/ |
|
var x = d3.scale.linear() |
|
.domain([min_padding, max_padding]) |
|
.range([0, width/2]) |
|
.clamp(true); |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(10, 10)") |
|
.call(d3.svg.axis() |
|
.scale(x) |
|
.ticks(0) |
|
.tickSize(0)) |
|
.select(".domain") |
|
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) |
|
.attr("class", "halo"); |
|
|
|
var brush = d3.svg.brush() |
|
.x(x) |
|
.extent([0, 0]) |
|
.on("brush", brushed); |
|
|
|
var slider = svg.append("g") |
|
.attr("class", "slider") |
|
.call(brush); |
|
|
|
slider.selectAll(".extent,.resize") |
|
.remove(); |
|
|
|
var handle = slider.append("circle") |
|
.attr("class", "handle") |
|
.attr("transform", "translate(10, 10)") |
|
.attr("r", 9); |
|
|
|
brush.extent([padding, padding]); |
|
slider |
|
.call(brush.event); |
|
|
|
function brushed() { |
|
var value = brush.extent()[0]; |
|
|
|
if (d3.event.sourceEvent) { |
|
value = x.invert(d3.mouse(this)[0]); |
|
brush.extent([value, value]); |
|
|
|
force.alpha(.01); |
|
} |
|
|
|
handle.attr("cx", x(value)); |
|
|
|
padding = value; |
|
} |
|
|
|
// Resolve collisions between nodes. |
|
function collide(alpha) { |
|
var quadtree = d3.geom.quadtree(nodes); |
|
return function(d) { |
|
var r = d.radius + maxRadius + padding, |
|
nx1 = d.x - r, |
|
nx2 = d.x + r, |
|
ny1 = d.y - r, |
|
ny2 = d.y + r; |
|
quadtree.visit(function(quad, x1, y1, x2, y2) { |
|
if (quad.point && (quad.point !== d)) { |
|
var x = d.x - quad.point.x, |
|
y = d.y - quad.point.y, |
|
l = Math.sqrt(x * x + y * y), |
|
r = d.radius + quad.point.radius + padding; |
|
if (l < r) { |
|
l = (l - r) / l * alpha; |
|
d.x -= x *= l; |
|
d.y -= y *= l; |
|
quad.point.x += x; |
|
quad.point.y += y; |
|
} |
|
} |
|
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; |
|
}); |
|
}; |
|
} |
|
|
|
// Move nodes toward cluster focus. |
|
function gravity(alpha) { |
|
return function(d) { |
|
d.y += (d.cy - d.y) * alpha; |
|
d.x += (d.cx - d.x) * alpha; |
|
}; |
|
} |