Skip to content

Instantly share code, notes, and snippets.

@Fil
Last active August 28, 2019 16:40
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Fil/a9ba8d0d023752aa580bd95480b7de60 to your computer and use it in GitHub Desktop.
geoVoronoi polygons()
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#sphere {
stroke: #444;
stroke-width: 2;
}
.polygons {
stroke: #444;
}
.sites {
stroke: black;
fill: white;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/d3-delaunay@5"></script>
<script src="https://unpkg.com/d3-geo-voronoi@1.5"></script>
<script>
var points = {
type: "FeatureCollection",
features: d3.range(100).map(function() {
return {
type: "Point",
coordinates: [ 360 * Math.random(), 90 * (Math.random() - Math.random()) ]
}
})
}
var v = d3.geoVoronoi()(points);
var projection = d3.geoOrthographic(),
path = d3.geoPath().projection(projection);
var svg = d3.select("svg");
svg.append('path')
.attr('id', 'sphere')
.datum({ type: "Sphere" })
.attr('d', path);
svg.append('g')
.attr('class', 'polygons')
.selectAll('path')
.data(v.polygons().features)
.enter()
.append('path')
.attr('d', path)
.attr('fill', function(_,i) { return d3.schemeCategory10[i%10]; });
svg.append('g')
.attr('class', 'sites')
.selectAll('path')
.data(points.features)
.enter()
.append('path')
.attr('d', path);
// gentle animation
d3.interval(function(elapsed) {
projection.rotate([ elapsed / 150, 0 ]);
svg.selectAll('path')
.attr('d', path);
}, 50);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment