Compare some projections.
xxxxxxxxxx
<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>
<!-- dat.gui -->
<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>
<!-- /dat.gui -->
<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: 'Robinson',
scalefactor: 102,
},
green: {
projection: 'NaturalEarth',
scalefactor: 100,
}
}
gui(opts,redraw,{})
function redraw() {
var projection1 = d3['geo' + opts.red.projection]()
.rotate([-10.5,0])
.translate([width / 2, height / 2])
.precision(0.1),
projection2 = d3['geo' + opts.green.projection]()
.rotate([-10.5,0])
.translate([width / 2, height / 2])
.precision(0.1);
projection1.scale(projection1.scale() * opts.red.scalefactor / 100)
projection2.scale(projection2.scale() * opts.green.scalefactor / 100)
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