block by nitaku 7233233

Voronoi

Full Screen

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:

index.js

(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);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Voronoi</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body onload="main()"></body>
</html>

index.coffee

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])

index.css

.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;
}

index.sass

.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