Fiddling with d3.geom.voronoi and a polygon.
The polygon's vertices are fed into the Voronoi layout, that yields the colored regions as output. Also, links are drawn as dashed lines.
Relevant examples by Mike Bostock:
Fiddling with d3.geom.voronoi and a polygon.
The polygon's vertices are fed into the Voronoi layout, that yields the colored regions as output. Also, links are drawn as dashed lines.
Relevant examples by Mike Bostock:
window.main = () -> | |
width = 960 | |
height = 500 | |
svg = d3.select('body').append('svg') | |
.attr('width', width) | |
.attr('height', height) | |
polygon = [[300, 200], [300, 300], [370, 310], [400, 300], [360, 260], [400, 180]] | |
window.voronoi = d3.geom.voronoi() | |
.clipExtent([[.5, .5], [width - .5, height - .5]]) | |
colorize = d3.scale.category10() | |
svg.selectAll('.voronoi') | |
.data(voronoi(polygon)) | |
.enter().append('path') | |
.attr('class', 'voronoi') | |
.style('fill', (d, i) -> colorize(i)) | |
.attr('d', (d) -> "M#{d.join('L')}Z") | |
svg.selectAll('.polygon') | |
.data([polygon]) | |
.enter().append('path') | |
.attr('class', 'polygon') | |
.attr('d', (d) -> "M#{d.join('L')}Z") | |
svg.selectAll('.link') | |
.data(voronoi.links(polygon)) | |
.enter().append('line') | |
.attr('class', 'link') | |
.attr('x1', (d) -> d.source[0]) | |
.attr('y1', (d) -> d.source[1]) | |
.attr('x2', (d) -> d.target[0]) | |
.attr('y2', (d) -> d.target[1]) | |
.voronoi { | |
opacity: 0.4; | |
} | |
.polygon { | |
stroke: black; | |
stroke-width: 2px; | |
fill: none; | |
} | |
.link { | |
stroke: black; | |
stroke-width: 1px; | |
stroke-dasharray: 4 4; | |
opacity: 0.5; | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Voronoi</title> | |
<link type="text/css" href="index.css" rel="stylesheet"/> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="index.js"></script> | |
</head> | |
<body onload="main()"></body> | |
</html> |
(function() { | |
window.main = function() { | |
var colorize, height, polygon, svg, width; | |
width = 960; | |
height = 500; | |
svg = d3.select('body').append('svg').attr('width', width).attr('height', height); | |
polygon = [[300, 200], [300, 300], [370, 310], [400, 300], [360, 260], [400, 180]]; | |
window.voronoi = d3.geom.voronoi().clipExtent([[.5, .5], [width - .5, height - .5]]); | |
colorize = d3.scale.category10(); | |
svg.selectAll('.voronoi').data(voronoi(polygon)).enter().append('path').attr('class', 'voronoi').style('fill', function(d, i) { | |
return colorize(i); | |
}).attr('d', function(d) { | |
return "M" + (d.join('L')) + "Z"; | |
}); | |
svg.selectAll('.polygon').data([polygon]).enter().append('path').attr('class', 'polygon').attr('d', function(d) { | |
return "M" + (d.join('L')) + "Z"; | |
}); | |
return svg.selectAll('.link').data(voronoi.links(polygon)).enter().append('line').attr('class', 'link').attr('x1', function(d) { | |
return d.source[0]; | |
}).attr('y1', function(d) { | |
return d.source[1]; | |
}).attr('x2', function(d) { | |
return d.target[0]; | |
}).attr('y2', function(d) { | |
return d.target[1]; | |
}); | |
}; | |
}).call(this); |
.voronoi | |
opacity: 0.4 | |
.polygon | |
stroke: black | |
stroke-width: 2px | |
fill: none | |
.link | |
stroke: black | |
stroke-width: 1px | |
stroke-dasharray: 4 4 | |
opacity: 0.5 | |