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