Compare radial projections

Compare some projections.

forked from Fil's block: Compare projections

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.land1 {
  fill: none;
  stroke: red;
  stroke-width: 0.5;
}
.land2 {
  fill: none;
  stroke: green;
  stroke-width: 0.5;
}

</style>
<svg width="960" height="484"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>

<script src="https://unpkg.com/dat.gui/build/dat.gui.min.js"></script>
  <link rel="stylesheet" href="https://raw.githack.com/liabru/dat-gui-light-theme/master/dat-gui-light-theme.css"/>
    <script>
        function gui(opts, redraw, config) {
            var gui = new dat.GUI(config.options || {});
            for (var i in opts) {
                add(gui, opts, i);
            }

function add(src, o, t) {
                if (typeof o[t] == 'object') {
                    var group = src.addFolder(t);
                    for (var j in o[t]) {
                        add(group, o[t], j);
                    }
                } else {
                    var control = (t.match(/color/i))
                    ? src.addColor(o, t)
                    : src.add(o, t);
                    if (config.listen) control.listen();
                    if (redraw) control.onChange(redraw);

}
            }
        }
    </script>

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

d3.json("https://unpkg.com/visionscarto-world-atlas@0.0.4/world/110m.json", function(error, world) {
  if (error) throw error;

var opts = {
    red: {
      projection: 'AzimuthalEqualArea',
      scalefactor: 100,
    },
    green: {
      projection: 'AzimuthalEquidistant',
      scalefactor: 158,
     }
  }
  
  gui(opts,redraw,{})
  
  function redraw() {
    var projection1 = d3['geo' + opts.red.projection]()
    .rotate([0,-90])
    .translate([width / 2, height / 2])
    .precision(0.1),
        projection2 = d3['geo' + opts.green.projection]()
.rotate([0,-90])
    .translate([width / 2, height / 2])
    .precision(0.1);

projection1.scale(projection1.scale() * opts.red.scalefactor / 110)
        projection2.scale(projection2.scale() * opts.green.scalefactor / 110)

var graticule = d3.geoGraticule();

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

svg.selectAll('path').remove();
  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.countries))
      .attr("class", "land1")
      .attr("d", path);

path.projection(projection2)
    svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.countries))
      .attr("class", "land2")
      .attr("d", path);

}

redraw()

});

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v1.min.js

https://d3js.org/topojson.v1.min.js

https://unpkg.com/dat.gui/build/dat.gui.min.js