borders = topojson meshes

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. Exception: the tag is set to "coast" for the whole coast line.

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

forked from mbostock's block: World Map

<!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.v5.min.js"></script>

<script src="topojson-client.js"></script>
<script>

var width = 960,
    height = 580;

// fix coast line = color[4] = blue.
var color = d3.scaleOrdinal(d3.schemeAccent).domain([0,1,2,3,'coast']);

var projection = d3.geoOrthographic();

var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width) 
    .attr("height", height);

d3.json("https://unpkg.com/visionscarto-world-atlas/world/110m.json").then(world => {

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]).join('-') 
  );
  
svg.selectAll('.border')
.data(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 == 'coast' ? 1.5 : 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.v5.min.js