simplified borders

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];
  }

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 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 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>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.js