Ported to d3v4 by Philippe Rivière from Ian Johnson's block: visualizing map distortion
I'm using a fork of d3-geo that allows inverse projections on all projections (see d3-geo-projection
issue #85).
@enjalot: Whenever we try to represent our 3D earth on a 2D map we necessarily introduce distortion. This tool attempts to visualize the phenomenon.
Original prompt by @curran
Bounding box solution by @tyrasd
projection comparison
map zoom
forked from Fil's block: visualizing map distortion d3v4
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="d3-geo.js"></script>
<script src="//d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style>
svg {
margin: 22px;
}
select {
margin-left: 20px;
}
path.foreground {
fill: none;
stroke: #333;
stroke-width: 1.5px;
}
path.graticule {
fill: none;
stroke: #aaa;
stroke-width: .5px;
}
#left {
cursor: move;
}
#left .land {
fill: #d7c7ad;
stroke: #a5967e;
}
#right .land {
fill: #cfcece;
stroke: #a5967e;
}
#left circle {
fill: #d8355e;
}
#right circle {
stroke: #d8355e;
fill: none;
}
</style>
</head>
<body>
<svg id="left"></svg>
<svg id="right"></svg>
<select></select>
<script>
// import from math
var sin = Math.sin, cos = Math.cos, pi = Math.PI;
// import from d3-geo-projection
var hammerRaw = d3.geoHammerRaw;
var visionscarto_bertin_1953_alpha3 = function (λ, φ) {
var fu = 1.4;
if (λ + φ < -fu) {
var u = (λ - φ + 1.6) * (λ + φ + fu) / 8;
λ += u;
φ -= 0.8 * u * sin(φ + pi/2);
}
var r = hammerRaw(1.68, 2)(λ, φ);
var k = 12,
d = (1 - cos(λ * φ)) / k;
if (r[1] < 0) {
r[0] *= 1 + d;
}
if (r[1] > 0) {
r[1] *= 1 + d / 1.5 * r[0] * r[0];
}
return r;
};
(d3.geoVisionscarto = (function () {
return d3.geoProjection(visionscarto_bertin_1953_alpha3)
.rotate([-16.5, -42]);
}));
function dot(a, b) {
for (var i = 0, n = a.length, s = 0; i < n; ++i) s += a[i] * b[i];
return s;
}
function cross(a, b) {
return [
a[1] * b[2] - a[2] * b[1],
a[2] * b[0] - a[0] * b[2],
a[0] * b[1] - a[1] * b[0]
];
}
function norm(a){
return Math.sqrt(dot(a,a));
}
var epsilon = 1e-4;
function distortion(projection, point) {
var point1 = [point[0] + epsilon, point[1]],
point2 = [point[0], point[1] + epsilon],
p0 = projection(point),
p1 = projection(point1),
p2 = projection(point2),
d1 = [ p1[0] - p0[0], p1[1] - p0[1], 0 ],
d2 = [ p2[0] - p0[0], p2[1] - p0[1], 0 ];
// areal distorsion = norm(d1 x d2) / cos(lat)
var areal = norm(cross(d1, d2)) / Math.abs(Math.cos(point[1] * Math.PI/180)) / epsilon / epsilon;
// angular distorsion = (d1 . d2) / ( norm(d1) * norm(d2) )
var angular = Math.abs(dot(d1, d2) / norm(d1) / norm(d2));
//console.log(areal, angular)
return {
areal: areal,
angular: angular
};
}
var map_width = 400;
var map_height = 400;
var center = [-90, 37];
var scale0 = (map_width - 1) / 2 / Math.PI * 6
var scale1 = (map_width - 1) / 2 / Math.PI * 3
var zoom = d3.zoom()
.on("zoom", zoomed);
var projections = {
"Bertin1953": d3.geoVisionscarto(),
"Aitoff": d3.geoAitoff().scale(90),
"Boggs Eumorphic": d3.geoBoggs().scale(90),
"Craster Parabolic (Putnins P4)": d3.geoCraster().scale(90),
"Cylindrical Equal-Area": d3.geoCylindricalEqualArea().scale(120),
"Eckert I": d3.geoEckert1().scale(95),
"Eckert III": d3.geoEckert3().scale(105),
"Eckert IV": d3.geoEckert4().scale(105),
"Eckert V": d3.geoEckert5().scale(100),
"Equidistant Cylindrical (Plate Carrée)": d3.geoEquirectangular().scale(90),
"Fahey": d3.geoFahey().scale(75),
"Foucaut Sinusoidal": d3.geoFoucaut().scale(80),
"Gall (Gall Stereographic)": d3.geoCylindricalStereographic().scale(70),
"Ginzburg VIII (TsNIIGAiK 1944)": d3.geoGinzburg8().scale(75),
"Kavraisky VII": d3.geoKavrayskiy7().scale(90),
"Larrivée": d3.geoLarrivee().scale(55),
"McBryde-Thomas Flat-Pole Sine (No. 2)": d3.geoMtFlatPolarSinusoidal().scale(95),
"Mercator": d3.geoMercator().scale(50),
"Miller Cylindrical I": d3.geoMiller().scale(60),
"Mollweide": d3.geoMollweide().scale(100),
"Natural Earth": d3.geoNaturalEarth().scale(100),
"Nell-Hammer": d3.geoNellHammer().scale(120),
"Quartic Authalic": d3.geoHammer().coefficient(Infinity).scale(95),
"Robinson": d3.geoRobinson().scale(90),
"Sinusoidal": d3.geoSinusoidal().scale(90),
"van der Grinten (I)": d3.geoVanDerGrinten().scale(50),
"Wagner VI": d3.geoWagner6().scale(90),
"Wagner VII": d3.geoWagner7().scale(90),
"Winkel Tripel": d3.geoWinkel3().scale(90),
"Wiechel": d3.geoWiechel().scale(90)
};
var projectionLeft = projections["Bertin1953"].center(center);
var projectionRight = d3.geoRobinson()
.center(center)
.translate([map_width/5, map_height / 5])
.scale(scale1/2)
// .clipAngle(90)
var pathLeft = d3.geoPath()
.projection(projectionLeft);
var pathRight = d3.geoPath()
.projection(projectionRight);
function zoomed() {
projectionLeft
.translate([d3.event.transform.x, d3.event.transform.y])
.scale(d3.event.transform.k)
var newCenter = projectionLeft.invert([map_width/2,map_height/2]);
//projectionRight .rotate([-newCenter[0], -newCenter[1]])
update();
}
function update() {
d3.selectAll("#right path.distortion")
//.attr('stroke', d => fillScale(distortion(projectionLeft, d.coordinates).angular))
.attr('fill', d => strokeScale(distortion(projectionLeft, d.coordinates).areal))
.attr('opacity', 0.5)
.on('mouseover', d => console.log(distortion(projectionLeft, d.coordinates)));
d3.selectAll("#left path")
.attr("d", pathLeft);
d3.selectAll("#right path")
.attr("d", pathRight);
d3.selectAll("#left circle")
.attr('transform', function(d,i) {
return 'translate(' + [ d.x, d.y ] + ')';
})
d3.selectAll("#right circle")
.attr('transform', function(d,i) {
try {
var latlon = projectionLeft.invert([d.x, d.y])
return 'translate(' + projectionRight(latlon) + ')';
} catch(e) {
return 'translate(-100,-100)';
}
})
}
var strokeScale = d3.scaleLog()
.domain([1,37,300])
.range(['blue', 'white', 'orange']);
var fillScale = d3.scaleLinear()
.domain([0,0.6, 1])
.range(['white', 'green', 'black']);
var graticule = d3.geoGraticule();
var svgLeft = d3.select("#left")
.attr("width", map_width)
.attr("height", map_height);
var svgRight = d3.select("#right")
.attr("width", map_width + 40)
.attr("height", map_height);
svgLeft.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", pathLeft);
svgRight.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", pathRight);
d3.json("world-110m.json", function(error,world) {
if (error) throw error;
svgLeft.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", pathLeft);
svgRight.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", pathRight);
var points = generateRect(100, 25, 25, map_width - 50, map_height - 50);
var distortion = d3.merge(
d3.range(-89, 89, 4)
.map(lat => d3.range(-179, 180, 10 / Math.ceil(0.1 + 3 * Math.cos(lat * Math.PI / 180)))
.map((lon) => ({type:'Point', coordinates:[lon, lat]})))
);
svgLeft.selectAll("circle")
.data(points)
.enter().append("circle")
.attr('r', 3)
svgRight.selectAll("circle.points")
.data(points)
.enter().append("circle")
.attr('r', 2)
.attr('class', 'points')
svgRight.selectAll("path.distortion")
.data(distortion)
.enter().append("path")
.attr('class', 'distortion');
svgLeft
.call(zoom)
.call(
zoom.transform,
d3.zoomIdentity.translate(map_width/2,map_height/2)
.scale(scale0)
)
;
});
var selector = d3.select("select")
selector.selectAll("option")
.data(Object.keys(projections))
.enter().append("option")
.attr('value', function(d) { return d }).text(function(d) { return d })
selector.on("change", function(d) {
console.log("sup", d3.event)
var proj = d3.event.target.selectedOptions[0].value;
projectionLeft = projections[proj].center(center);
pathLeft = d3.geoPath()
.projection(projectionLeft);
svgLeft
.call(zoom)
.call(
zoom.transform,
d3.zoomIdentity.translate(map_width/2,map_height/2)
.scale(scale0)
)
;
})
function generateRect(num, x, y, width, height) {
var points = []
var sideNum = Math.floor(num/4) + 1;
// top
d3.range(sideNum).forEach(function(i) {
points.push({ x: x + i * width/sideNum, y: y })
})
// right
d3.range(sideNum).forEach(function(i) {
points.push({ x: x + width, y: y + i * height/sideNum })
})
// bottom
d3.range(sideNum).forEach(function(i) {
points.push({ x: x + width - i * width/sideNum, y: y + height })
})
// left
d3.range(sideNum).forEach(function(i) {
points.push({ x: x, y: y + height - i * height/sideNum })
})
return points;
}
</script>
</body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-67666917-1', 'auto');
ga('send', 'pageview');
</script>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-geo-projection.v2.min.js
https://d3js.org/topojson.v1.min.js