Meekohi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The Delaunay triangulation, the dual of Voronoi tesselation, creates a planar, triangular mesh for a given set of points. This example updates the Delaunay triangulation in response to mouse interaction! Colors by Cynthia Brewer; algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte; interaction inspired by Raymond Hill.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {
  fill: yellow;
  stroke: #000;
}

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

.PiYG .q0-9{fill:#d73027}
.PiYG .q1-9{fill:#f46d43}
.PiYG .q2-9{fill:#fdae61}
.PiYG .q3-9{fill:#fee090}
.PiYG .q4-9{fill:#ffffbf}
.PiYG .q5-9{fill:#e0f3f8}
.PiYG .q6-9{fill:#abd9e9}
.PiYG .q7-9{fill:#74add1}
.PiYG .q8-9{fill:#4575b4}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var width = 500,
    height = 500;

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

vertices.push([0,0],[0,height],[width,0],[width,height]);
var k = [[397,104],[429,106],[469,105],[507,105],[540,97],[601,98],[593,118],[584,146],[582,175],[578,208],[581,244],[582,267],[598,286],[619,308],[631,325],[633,345],[634,378],[635,429],[633,439],[620,465],[601,481],[541,481],[511,482],[462,477],[414,474],[390,459],[376,442],[356,394],[355,365],[346,331],[346,292],[373,250],[394,222],[414,201],[414,171],[411,150],[401,137],[388,122],[381,111]];
k.forEach(function(v){vertices.push([v[0]/width,v[1]/height]);});

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "PiYG")
    .on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); });

var path = svg.append("g").selectAll("path");

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

redraw();

function redraw() {
  path = path.data(d3.geom.delaunay(vertices).map(function(d) { return "M" + d.join("L") + "Z"; }), String);
  path.exit().remove();
  path.enter().append("path").attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }).attr("d", String);
}

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	fill: yellow;
	stroke: #000;
	}

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

	.PiYG .q0-9{fill:#d73027}
	.PiYG .q1-9{fill:#f46d43}
	.PiYG .q2-9{fill:#fdae61}
	.PiYG .q3-9{fill:#fee090}
	.PiYG .q4-9{fill:#ffffbf}
	.PiYG .q5-9{fill:#e0f3f8}
	.PiYG .q6-9{fill:#abd9e9}
	.PiYG .q7-9{fill:#74add1}
	.PiYG .q8-9{fill:#4575b4}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>

	var width = 500,
	height = 500;

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

	vertices.push([0,0],[0,height],[width,0],[width,height]);
	var k = [[397,104],[429,106],[469,105],[507,105],[540,97],[601,98],[593,118],[584,146],[582,175],[578,208],[581,244],[582,267],[598,286],[619,308],[631,325],[633,345],[634,378],[635,429],[633,439],[620,465],[601,481],[541,481],[511,482],[462,477],[414,474],[390,459],[376,442],[356,394],[355,365],[346,331],[346,292],[373,250],[394,222],[414,201],[414,171],[411,150],[401,137],[388,122],[381,111]];
	k.forEach(function(v){vertices.push([v[0]/width,v[1]/height]);});

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("class", "PiYG")
	.on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); });

	var path = svg.append("g").selectAll("path");

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

	redraw();

	function redraw() {
	path = path.data(d3.geom.delaunay(vertices).map(function(d) { return "M" + d.join("L") + "Z"; }), String);
	path.exit().remove();
	path.enter().append("path").attr("class", function(d, i) { return "q" + (i % 9) + "-9"; }).attr("d", String);
	}

	</script>