Skip to content

Instantly share code, notes, and snippets.

@bricedev

bricedev/README.md

Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bricedev/1b234c82f59aa4de8560 to your computer and use it in GitHub Desktop.
Save bricedev/1b234c82f59aa4de8560 to your computer and use it in GitHub Desktop.
Download ZIP
Delaunay
Raw
README.md

first try with canvas. Inspired by an example from Mike.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>
var width = 960,
height = 500,
maxDistance = 80;
var particles = d3.range(200).map(function() {
return {
x: Math.random() * width,
y: Math.random() * height
};
});
var voronoi = d3.geom.voronoi()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
var links = voronoi.links(particles);
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
context.clearRect(0, 0, width, height);
links.forEach(function(d) {
context.beginPath();
context.moveTo(d.source.x, d.source.y);
context.lineTo(d.target.x, d.target.y);
var distance = Math.sqrt((d.source.x - d.target.x)*(d.source.x - d.target.x) + (d.source.y - d.target.y)*(d.source.y - d.target.y));
context.globalAlpha = distance > maxDistance ? 0 : (maxDistance-distance)/maxDistance;
context.strokeStyle = "#08306b";
context.lineWidth = 1;
context.stroke();
});
context.beginPath();
context.globalAlpha = 1;
particles.forEach(function(d) {
context.moveTo(d.x, d.y);
context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
});
context.lineWidth = 3;
context.strokeStyle = "#fff";
context.stroke();
context.fillStyle = "#08306b";
context.fill();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment