borders = topojson meshes [UNLISTED]

This shows topojson.meshes(), a proposed extension of topojson.mesh(), that uses the filter(a,b) function (renamed tag(a,b)) to partition the mesh.

In this application the tag is the unique combination of the id of the two bordering countries, effectively listing individual borders. The tag is set to 0 for the coast line.

Research by Philippe Rivière for topojson issue #17.

forked from mbostock's block: World Map

forked from Fil's block: borders = topojson meshes

<!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(0); // 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 ? 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 ? 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