| license: gpl-3.0 |
We use topojson.borders() (a proposed extension of topojson.mesh()) to extract borders arcs; then we manipulate the borders childishly (outrageously? — it makes some countries vanish!) by keeping only the first and last point of each arc.
Research by Philippe Rivière for topojson issue #17.
forked from mbostock's block: World Map
forked from Fil's block: topojson borders
forked from Fil's block: simplified 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.geoOrthographic(); | |
| 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 (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://gateway.ipfs.io/ipfs/QmZfqUUrDhN9Uv9zKex1ExhAsh3gZpeMnT5j6kATbiwjS2/topojson/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]) | |
| ); | |
| // simplify each border segment | |
| var b = topojson.feature(world, borders).features | |
| .map(d => { | |
| if (d.properties.tag) | |
| d.geometry.coordinates = d.geometry.coordinates. | |
| map(a => [ a[0], a[a.length-1]]); | |
| return d; | |
| }); | |
| svg.selectAll('.border') | |
| .data(b) | |
| .enter() | |
| .append('path') | |
| .attr('d', path) | |
| .attr('fill', 'none') | |
| .attr('stroke', d => color(''+d.properties.tag)) | |
| .attr('stroke-width', d => d.properties.tag ? 1 : 2) | |
| svg.append('path') | |
| .datum({type:"Sphere"}) | |
| .attr('d', path) | |
| .attr('class', 'stroke') | |
| }); | |
| d3.timer(e => { | |
| projection.rotate([e/150]) | |
| svg.selectAll('path').attr('d', path) | |
| }, 100) | |
| </script> |