seliopou/static-voronoi.html

## static-voronoi.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>
/* taken from: http://bl.ocks.org/mbostock/4060366 */

path {
  stroke: #fff;
}

path:first-child {
  fill: yellow !important;
}

.q0-9 { fill: rgb(197,27,125); }
.q1-9 { fill: rgb(222,119,174); }
.q2-9 { fill: rgb(241,182,218); }
.q3-9 { fill: rgb(253,224,239); }
.q4-9 { fill: rgb(247,247,247); }
.q5-9 { fill: rgb(230,245,208); }
.q6-9 { fill: rgb(184,225,134); }
.q7-9 { fill: rgb(127,188,65); }
.q8-9 { fill: rgb(77,146,33); }
</style>

<div id="static-voronoi"></div>

<script src="//d3js.org/d3.v3.min.js"></script>
<script>
    function diagram(context) {
      var path = context.selectAll('path')
        .data(function(points) { return d3.geom.voronoi(points); });

      path.enter().append('path')
        .attr('class', function(d, i) { return 'q' + (i % 9) + '-9'; });

      path
        .attr('d', function(d, i) { return "M" + d.join("L") + "Z"; });

      path.exit()
        .remove();
    }

    d3.select('#static-voronoi')
      .append('svg')
        .attr('height', 200)
        .attr('width', 960)
      .datum([[20, 10], [100, 100], [300, 80], [250, 180]])
        .call(diagram);
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	/* taken from: http://bl.ocks.org/mbostock/4060366 */

	path {
	stroke: #fff;
	}

	path:first-child {
	fill: yellow !important;
	}

	.q0-9 { fill: rgb(197,27,125); }
	.q1-9 { fill: rgb(222,119,174); }
	.q2-9 { fill: rgb(241,182,218); }
	.q3-9 { fill: rgb(253,224,239); }
	.q4-9 { fill: rgb(247,247,247); }
	.q5-9 { fill: rgb(230,245,208); }
	.q6-9 { fill: rgb(184,225,134); }
	.q7-9 { fill: rgb(127,188,65); }
	.q8-9 { fill: rgb(77,146,33); }
	</style>

	<div id="static-voronoi"></div>

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>
	function diagram(context) {
	var path = context.selectAll('path')
	.data(function(points) { return d3.geom.voronoi(points); });

	path.enter().append('path')
	.attr('class', function(d, i) { return 'q' + (i % 9) + '-9'; });

	path
	.attr('d', function(d, i) { return "M" + d.join("L") + "Z"; });

	path.exit()
	.remove();
	}

	d3.select('#static-voronoi')
	.append('svg')
	.attr('height', 200)
	.attr('width', 960)
	.datum([[20, 10], [100, 100], [300, 80], [250, 180]])
	.call(diagram);
	</script>