mbostock/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Voronoi Tesselation</title>
    <script type="text/javascript" src="https://cdn.rawgit.com/mbostock/d3/841f35456831192fd008222c8ae15b6738acace9/d3.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/mbostock/d3/841f35456831192fd008222c8ae15b6738acace9/lib/jit/voronoi.min.js"></script>
    <style type="text/css">

svg {
  display: block;
  border: solid 1px #666;
}

path {
  fill: yellow;
  stroke: #000;
  stroke-width: .5px;
}

circle {
  fill: #ccc;
  stroke: #000;
  pointer-events: none;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 958,
    h = 498;

var vertices = d3.range(100).map(function(d) {
  return [Math.random() * w, Math.random() * h];
});

var svg = d3.select("body")
  .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", update);

svg.selectAll("path")
    .data(voronoi(vertices))
  .enter("svg:path")
    .style("fill", function() { return d3.hsl(Math.random() * 360, 1, .5); })
    .attr("d", function(d) { return "M" + d.join("L") + "Z"; });

svg.selectAll("circle")
    .data(vertices.slice(1))
  .enter("svg:circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 2);

function update() {
  vertices[0] = d3.svg.mouse(this);
  svg.selectAll("path")
      .data(voronoi(vertices)
      .map(function(d) { return "M" + d.join("L") + "Z"; }))
      .filter(function(d) { return this.getAttribute("d") != d; })
      .attr("d", function(d) { return d; });
}

    </script>
  </body>
</html>

## thumbnail.png

      
        

                
      Raw
    
  

        
        
          
            
          
          
            
              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Voronoi Tesselation</title>
	<script type="text/javascript" src="https://cdn.rawgit.com/mbostock/d3/841f35456831192fd008222c8ae15b6738acace9/d3.min.js"></script>
	<script type="text/javascript" src="https://cdn.rawgit.com/mbostock/d3/841f35456831192fd008222c8ae15b6738acace9/lib/jit/voronoi.min.js"></script>
	<style type="text/css">

	svg {
	display: block;
	border: solid 1px #666;
	}

	path {
	fill: yellow;
	stroke: #000;
	stroke-width: .5px;
	}

	circle {
	fill: #ccc;
	stroke: #000;
	pointer-events: none;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 958,
	h = 498;

	var vertices = d3.range(100).map(function(d) {
	return [Math.random() * w, Math.random() * h];
	});

	var svg = d3.select("body")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.on("mousemove", update);

	svg.selectAll("path")
	.data(voronoi(vertices))
	.enter("svg:path")
	.style("fill", function() { return d3.hsl(Math.random() * 360, 1, .5); })
	.attr("d", function(d) { return "M" + d.join("L") + "Z"; });

	svg.selectAll("circle")
	.data(vertices.slice(1))
	.enter("svg:circle")
	.attr("transform", function(d) { return "translate(" + d + ")"; })
	.attr("r", 2);

	function update() {
	vertices[0] = d3.svg.mouse(this);
	svg.selectAll("path")
	.data(voronoi(vertices)
	.map(function(d) { return "M" + d.join("L") + "Z"; }))
	.filter(function(d) { return this.getAttribute("d") != d; })
	.attr("d", function(d) { return d; });
	}

	</script>
	</body>
	</html>