Using topojson.borders()
, research by Philippe Rivière for world-atlas issue #15.
See also http://blockbuilder.org/Fil/7b74d6c238244a1cce6cd00708051b0a
forked from mbostock's block: World Map
forked from Fil's block: topojson borders
license: gpl-3.0 |
Using topojson.borders()
, research by Philippe Rivière for world-atlas issue #15.
See also http://blockbuilder.org/Fil/7b74d6c238244a1cce6cd00708051b0a
forked from mbostock's block: World Map
forked from Fil's block: topojson borders
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
background: white; | |
} | |
.stroke { | |
fill: none; | |
stroke: #000; | |
stroke-width: 1.5px; | |
} | |
.fill { | |
fill: #fff; | |
} | |
.graticule { | |
fill: none; | |
stroke: #777; | |
stroke-width: .5px; | |
stroke-opacity: .5; | |
} | |
.land { | |
fill: #222; | |
} | |
.boundary { | |
fill: none; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
</style> | |
<body> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/topojson.v2.js"></script> | |
<script> | |
var width = 960, | |
height = 580; | |
var color = d3.scaleOrdinal(d3.schemeCategory20c); | |
var projection = d3.geoEquirectangular(); | |
var path = d3.geoPath() | |
.projection(projection); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
function stitch(topology, arcs) { | |
var stitchedArcs = {}, | |
fragmentByStart = {}, | |
fragmentByEnd = {}, | |
fragments = [], | |
emptyIndex = -1; | |
// Stitch empty arcs first, since they may be subsumed by other arcs. | |
arcs.forEach(function(i, j) { | |
var arc = topology.arcs[i < 0 ? ~i : i], t; | |
if (arc.length < 3 && !arc[1][0] && !arc[1][1]) { | |
t = arcs[++emptyIndex], arcs[emptyIndex] = i, arcs[j] = t; | |
} | |
}); | |
arcs.forEach(function(i) { | |
var e = ends(i), | |
start = e[0], | |
end = e[1], | |
f, g; | |
if (f = fragmentByEnd[start]) { | |
delete fragmentByEnd[f.end]; | |
f.push(i); | |
f.end = end; | |
if (g = fragmentByStart[end]) { | |
delete fragmentByStart[g.start]; | |
var fg = g === f ? f : f.concat(g); | |
fragmentByStart[fg.start = f.start] = fragmentByEnd[fg.end = g.end] = fg; | |
} else { | |
fragmentByStart[f.start] = fragmentByEnd[f.end] = f; | |
} | |
} else if (f = fragmentByStart[end]) { | |
delete fragmentByStart[f.start]; | |
f.unshift(i); | |
f.start = start; | |
if (g = fragmentByEnd[start]) { | |
delete fragmentByEnd[g.end]; | |
var gf = g === f ? f : g.concat(f); | |
fragmentByStart[gf.start = g.start] = fragmentByEnd[gf.end = f.end] = gf; | |
} else { | |
fragmentByStart[f.start] = fragmentByEnd[f.end] = f; | |
} | |
} else { | |
f = [i]; | |
fragmentByStart[f.start = start] = fragmentByEnd[f.end = end] = f; | |
} | |
}); | |
function ends(i) { | |
var arc = topology.arcs[i < 0 ? ~i : i], p0 = arc[0], p1; | |
if (topology.transform) p1 = [0, 0], arc.forEach(function(dp) { p1[0] += dp[0], p1[1] += dp[1]; }); | |
else p1 = arc[arc.length - 1]; | |
return i < 0 ? [p1, p0] : [p0, p1]; | |
} | |
function flush(fragmentByEnd, fragmentByStart) { | |
for (var k in fragmentByEnd) { | |
var f = fragmentByEnd[k]; | |
delete fragmentByStart[f.start]; | |
delete f.start; | |
delete f.end; | |
f.forEach(function(i) { stitchedArcs[i < 0 ? ~i : i] = 1; }); | |
fragments.push(f); | |
} | |
} | |
flush(fragmentByEnd, fragmentByStart); | |
flush(fragmentByStart, fragmentByEnd); | |
arcs.forEach(function(i) { if (!stitchedArcs[i < 0 ? ~i : i]) fragments.push([i]); }); | |
return fragments; | |
} | |
topojson.borders = function(topology) { | |
return meshArcs.apply(this, arguments); | |
} | |
function meshArcs(topology, object, filter, tag) { | |
var arcsl, tags, i, n; | |
if (arguments.length > 1) arcsl = extractArcs(topology, object, filter, tag), tags = arcsl[1], arcsl = arcsl[0]; | |
else for (i = 0, arcs = new Array(n = topology.arcs.length); i < n; ++i) arcsl[i] = i, arcsl = [arcsl], tags = [0]; | |
return { | |
type: "GeometryCollection", | |
geometries: arcsl.map(function(arcs, i) { | |
return { | |
type: "MultiLineString", | |
properties: { tag: tags[i] }, | |
arcs: stitch(topology, arcs) | |
} | |
}) | |
}; | |
} | |
function extractArcs(topology, object, filter, tag) { | |
var tags = [], | |
arcs = [], | |
geomsByArc = [], | |
geom; | |
function extract0(i) { | |
var j = i < 0 ? ~i : i; | |
(geomsByArc[j] || (geomsByArc[j] = [])).push({i: i, g: geom}); | |
} | |
function extract1(arcs) { | |
arcs.forEach(extract0); | |
} | |
function extract2(arcs) { | |
arcs.forEach(extract1); | |
} | |
function extract3(arcs) { | |
arcs.forEach(extract2); | |
} | |
function tagpush(i, tag) { | |
var t = tags.indexOf(tag); | |
if (t === -1) { tags.push(tag); t = arcs.length; arcs.push([]);} | |
arcs[t].push(i); | |
} | |
function geometry(o) { | |
switch (geom = o, o.type) { | |
case "GeometryCollection": o.geometries.forEach(geometry); break; | |
case "LineString": extract1(o.arcs); break; | |
case "MultiLineString": case "Polygon": extract2(o.arcs); break; | |
case "MultiPolygon": extract3(o.arcs); break; | |
} | |
} | |
geometry(object); | |
geomsByArc.forEach(filter == null | |
? function(geoms) { tagpush(geoms[0].i, tag(geoms[0].g)); } | |
: function(geoms) { | |
if (geoms[0].g.id == 728 || (geoms[1] && geoms[1].g.id == 728)) console.log(geoms[0].i, geoms[1] ? geoms[1].i : null) | |
if (filter(geoms[0].g, geoms[geoms.length - 1].g)) tagpush(geoms[0].i,tag(geoms[0].g, geoms[geoms.length - 1].g)); }); | |
return [arcs, tags]; | |
} | |
color(0); // fix coast line = color[0] = blue. | |
d3.json("https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, world) { | |
if (error) throw error; | |
var countries = topojson.feature(world, world.objects.countries).features, | |
neighbors = topojson.neighbors(world.objects.countries.geometries); | |
var borders = topojson.borders( | |
world, | |
world.objects.countries, | |
(a,b) => true /*a != b*/, | |
(a,b) => a==b ? 0 : d3.extent([a.id, b.id]) | |
); | |
svg.selectAll('.border') | |
.data(topojson.feature(world, borders).features) | |
.enter() | |
.append('path') | |
.attr('d', path) | |
.attr('fill', 'none') | |
.attr('stroke', d => color(''+d.properties.tag)) | |
.attr('stroke-width', d => d.properties.tag ? 0.5 : 2) | |
svg.append('path') | |
.datum({type:"Sphere"}) | |
.attr('d', path) | |
.attr('class', 'stroke') | |
}); | |
if (0) | |
d3.timer(e => { | |
projection.rotate([e/150]) | |
svg.selectAll('path').attr('d', path) | |
}, 100) | |
</script> |