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

<!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="topojson-client.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);

color('coast'); // fix coast line = color[0] = blue.
  
d3.json("https://ipfs.io/ipfs/QmQEGopkuSzCmEWXZHTLvvRnYJk9ioA53HLP76FhWrrzvK/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.meshes(
    world,
    world.objects.countries,
    (a,b) => a == b ? 'coast' : d3.extent([a.id, b.id]) 
  );
  
  // simplify each border segment
  var b = borders.features 
  .map(d => {
    if (d.properties.tag !== 'coast')
    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 == 'coast' ? 2 : 1)

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