We use topojson tools to get the roads data file as small as possible.
Data from Natural Earth.
Makefile (thank you @mbostock!)
ne_10m_roads.json:
wget https://github.com/visionscarto/some-geo-data/blob/master/ne_10m_roads.json
roads_4-simplified.json:
ndjson-cat ne_10m_roads.json | ndjson-split 'd.features' | ndjson-filter 'd.properties.scalerank <= 4' | ndjson-reduce 'delete d.properties,p.features.push(d), p' '{type: "FeatureCollection", features: []}' | geo2topo roads=- > roads_4.json
toposimplify --spherical-quantile 0.05 roads_4.json | topomerge --mesh roads=roads --filter 'true' | topoquantize 2e4 > roads_4-simplified.json
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.land { fill: #775c59; }
#sphere {
stroke: #cbb78a;
fill: #819fbf;
}
.roads{
fill: none;
stroke: white; stroke-opacity: 0.3;
}
</style>
</head>
<body>
<script>
const width = 960,
height = 500,
svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
const projection = d3.geoSatellite();
const path = d3.geoPath(projection);
render = function() {
svg.selectAll("path").attr("d", path);
};
svg
.append("path")
.attr("id", "sphere")
.datum({ type: "Sphere" })
.attr("d", path);
d3.json("110m-sans-antarctica.json", function(error, world) {
if (error) throw error;
svg
.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects["-"]))
.attr("class", "land");
render();
});
d3.json("roads_4-simplified.json", function(error, world) {
svg
.append("path")
.datum(topojson.feature(world, world.objects.roads))
.attr("class", "roads");
render();
});
d3.interval(e => {
projection.rotate([e / 300, e / 3000]);
render();
});
</script>
</body>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-geo-projection.v2.min.js
https://d3js.org/topojson.v1.min.js