World roads (topojson mesh + simplify) by fil

We use topojson tools to get the roads data file as small as possible.

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

index.html

<!DOCTYPE html>
<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>