Skip to content

Instantly share code, notes, and snippets.

@Fil
Last active August 31, 2021 09:13
Show Gist options
  • Save Fil/6a1ed09f6e5648a5451cb130f2b13d20 to your computer and use it in GitHub Desktop.
Save Fil/6a1ed09f6e5648a5451cb130f2b13d20 to your computer and use it in GitHub Desktop.
geoVoronoi.hull()
license: mit

Use geoVoronoi.hull to compute the convex hull of a set of points in spherical coordinates.

Countries are grouped by their (World Bank) subregion, and we extract the bounding box for each of them. Then we highlight the convex hull of the set of all corners of the bounding boxes.

(With a special treatment for Antarctica and French Guyane.)

Watch, drag, and zoom.

Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/d3@7"></script>
<script src="https://unpkg.com/d3-delaunay@6"></script>
<script src="https://unpkg.com/d3-geo-voronoi@2"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.countries path {
stroke: white;
stroke-width: 0.3;
opacity: 0.95;
fill: #dbdbdb;
}
.links {
stroke: red;
stroke-opacity: 0.8;
stroke-width: 1px;
/*stroke-dasharray: 1 4; */
fill: none;
}
.polygons {
stroke: #c7ff84;
stroke-width: 4;
fill: #c7ff84;
fill-opacity: 0.3;
}
.links {
stroke-linecap: round;
}
.site {
fill: #ddd;
stroke: #000;
stroke-width: 0.5;
}
</style>
<svg width="960" height="500"></svg>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
svg = svg
.append('g');
var projection = d3.geoOrthographic().scale(214),
path = d3.geoPath().projection(projection).pointRadius(1);
var g = svg.append('g')
.attr('class', 'world')
.append('g')
.attr("class", "s");
var defs = g.append("defs");
defs.append("path")
.datum({
type: "Sphere"
})
.attr("id", "sphere")
.attr("d", path);
g.append("use")
.attr("xlink:href", "#sphere")
.attr("fill", "#fcfcff");
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", "#sphere");
g.attr("clip-path", "url(#clip)")
g.append('g')
.attr('class', 'countries');
g.append("g")
.attr("class", "polygons")
var site = g.append("g")
.attr("class", "site")
.selectAll('path')
.data([null]);
var enter = site
.enter()
.append('path');
site = site.merge(enter);
var legend = svg
.append('text')
.attr('transform', 'translate(' + [width / 2, 30] + ')')
.attr('class', 'legend')
.attr('text-anchor', 'middle')
.attr('font-size', '20px')
.attr('font-family', 'Helvetica');
var drag = 0;
d3.json('countries.geojson').then(function (world) {
var visit = 0;
var countries = d3.select('.countries')
.selectAll('path')
.data(world.features)
.join('path')
.attr('d', path)
var subregions = [...new Set(world.features.map(d => d.properties.subregion))];
go(countries, subregions[visit]);
d3.interval(visitnext, 1200)
function visitnext() {
if (drag) return;
visit = (visit + 1) % subregions.length;
go(countries, subregions[visit]);
}
});
function go(countries, subregion) {
legend.text('The convex hull of ' + (subregion == 'Caribbean' || subregion == 'Seven seas (open ocean)' ? 'the ' : '') + subregion)
var sites = [],
centroids = [];
countries.data()
.filter(function (d) {
return d.properties.subregion == subregion;
})
.map(function (d) {
// remove French Guyane for the computation of bounds
var e = JSON.parse(JSON.stringify(d));
if (e.properties.iso_a3 == 'FRA') {
e.geometry.coordinates = d.geometry.coordinates.slice(2);
}
return e;
})
.map(function (d) {
var convex = d3.geoBounds(d);
sites.push(convex[0]);
sites.push(convex[1]);
sites.push([convex[0][0], convex[1][1]]);
sites.push([convex[1][0], convex[0][1]]);
centroids.push(d3.geoCentroid(d));
});
var hull = d3.geoVoronoi().hull(sites);
// special case, sorry!
if (subregion == "Antarctica") {
hull = d3.geoCircle().center([0, -90]).radius(29)();
}
var rotation = d3.geoCentroid({
type: 'MultiPoint',
coordinates: sites
})
.map(function (x) {
return -x;
});
projection.rotate(rotation);
countries.attr("d", path);
d3.select('.polygons path').remove();
var poly = d3.select('.polygons')
.append("path")
.datum(hull)
.attr('d', path);
site.datum({
type: "MultiPoint",
coordinates: sites
});
function draw() {
poly.attr('d', path);
countries.attr("d", path);
site.attr('d', path)
}
draw();
// drag and zoom
svg.select('.world')
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)
)
.call(d3.zoom()
.scaleExtent([1, 8])
.on("zoom", zoomed)
.on("start", function () {
drag++;
})
.on("end", function () {
setTimeout(function () {
drag--;
}, 1500);
})
);
function zoomed({transform}) {
svg.select('.world').attr("transform", transform);
}
function dragstarted(event) {
drag++;
q = projection.rotate();
r = d3.pointer(event);
}
function dragended() {
setTimeout(function () {
drag--;
}, 2000);
}
var lambda = d3.scaleLinear()
.domain([0, width])
.range([-180, 180]);
var phi = d3.scaleLinear()
.domain([0, height])
.range([90, -90]);
function dragged(event) {
var p = d3.pointer(event);
projection.rotate([lambda(p[0]) - lambda(r[0]) + q[0], phi(p[1]) - phi(r[1]) + q[1]]);
draw();
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment