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.
xxxxxxxxxx
<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="https://unpkg.com/topojson-client@3"></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