Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@Fil

Fil/.block

Last active October 29, 2017 20:21
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 Fil/8226c572488d813a4de6dfd50ec5ca50 to your computer and use it in GitHub Desktop.
Save Fil/8226c572488d813a4de6dfd50ec5ca50 to your computer and use it in GitHub Desktop.
Download ZIP
geoVoronoi [UNLISTED]
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#sphere {
fill: #fff;
stroke: #444;
stroke-width: 2;
}
.polygons {
stroke: #444;
}
.links {
stroke: white;
stroke-width: 2.5;
fill: none;
}
.links .secondary {
stroke-width: .5;
stroke-dasharray: 3 1;
}
.sites {
stroke: black;
fill: white;
}
#legend {
position: absolute;
top: 15;
left: 15;
font-family: sans-serif;
}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-geo-voronoi"></script>
<script>
var points = {
"type": "FeatureCollection",
"bbox": [143, -38, 146, -35],
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
144.33837890625,
-37.14280344371683
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
144.931640625,
-37.35269280367274
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
145.140380859375,
-36.456636011596196
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
145.469970703125,
-36.77409249464194
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
145.755615234375,
-37.090239803072066
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
145.4150390625,
-37.52715361723378
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
145.887451171875,
-37.483576550426996
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
144.60205078125,
-36.57142382346275
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
144.86572265625,
-37.596824001083654
]
}
}
]
}
var projection = d3.geoMercator() // or d3.geoEquirectangular()
.fitExtent([[50,50],[910,450]], points); // comment out this line for a world view
var path = d3.geoPath().projection(projection);
var v = d3.geoVoronoi()(points);
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.schemeCategory20[i%20]; });
svg.append('g')
.attr('class', 'sites')
.selectAll('path')
.data(points.features)
.enter()
.append('path')
.attr('d', path);
// gentle animation
if (0) 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