block by gka 3749549

Comparing Map Projections

Full Screen

A mashup of Map Projection Distortions and examples using the d3 projections plugin

A comparison of map projections by four different types of distortion. Lower is better. Data transcribed from the Natural Earth Projection by @mbostock

Read more about map projections on Wikipedia

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Map Projections</title>
<style>
body {
  margin-top:30px;
  margin-left: 20px;
}

svg {
  font: 10px sans-serif;
}

.background path {
  fill: none;
  stroke: none;
  stroke-width: 24px;
  pointer-events: stroke;
}

.foreground path {
  fill: none;
  stroke: steelblue;
  stroke-width: 1px;
}

.axis .title {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.label {
  -webkit-transition: fill 125ms linear;
}

.active .label:not(.inactive) {
  font-weight: bold;
}

.label.inactive {
  fill: #888;
}

.foreground path.inactive {
  stroke: #888;
  stroke-opacity: .3;
  stroke-width: 1px;
}


path.background {
  fill: #A5BFDD;
}

path.foreground {
  fill: none;
  stroke: #333;
  stroke-width: 0.51px;
}

path.graticule {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.line:nth-child(2n) {
  stroke-dasharray: 2,2;
}

.land {
  fill: #fff;
  stroke: #766951;
}

.boundary {
  fill: none;
  stroke: #a5967e;
}

#projections { margin: 20px 20px 0;}

a { font-family: Helvetica; display: inline-block; margin: 5px; font-size: 15px; color: #88b;}

</style>
<body>
<script src="d3.v2.min.js"></script>
<script src="jquery.min.js"></script>

<div id="projections"></div>

<script src="projection.js"></script>

<script>
/* Projections */

var projections = {
  "Aitoff": d3.geo.aitoff().scale(135),
  "Bonne": d3.geo.bonne().scale(135),
  "Eckert I": d3.geo.eckert1().scale(140),
  "Eckert II": d3.geo.eckert2().scale(140),
  "Eckert III": d3.geo.eckert3().scale(144),
  "Eckert IV": d3.geo.eckert4().scale(144),
  "Eckert V": d3.geo.eckert5().scale(140),
  "Eckert VI": d3.geo.eckert6().scale(140),
  "Equidistant Cylindrical (Plate Carrée)": d3.geo.equirectangular().scale(660),
  "Hammer": d3.geo.hammer().scale(140),
  "Kavraisky VII": d3.geo.kavrayskiy7().scale(135),
  "Mercator": d3.geo.mercator().scale(380),
  "Mollweide": d3.geo.mollweide().scale(100),
  "Nell–Hammer": d3.geo.nellHammer().scale(124),
  "Robinson": d3.geo.robinson().scale(135),
  "Sinusoidal": d3.geo.sinusoidal().scale(130),
  "van der Grinten (I)": d3.geo.vanDerGrinten().scale(84),
  "Wagner VI": d3.geo.wagner6().scale(135),
  "Winkel Tripel": d3.geo.winkel3().scale(135)
};


$.each(projections, function(name) {
  var a = $('<a href="#">'+name+'</a>');
  a.click(function(e) {
    e.preventDefault();
    changeproj($(e.target).html());
  });
  $('#projections').append(a);
})
/* Map */

var map_width = 860,
    map_height = 500;

var projection = d3.geo.aitoff()
    .translate([map_width / 2 - .5, map_height / 2 - .5]).scale(135);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule();

var map_svg = d3.select("body").append("svg")
    .attr("width", map_width)
    .attr("height", map_height);

map_svg.append("path")
    .datum(graticule.outline)
    .attr("class", "background")
    .attr("d", path)

map_svg.selectAll(".graticule")
    .data(graticule.lines)
  .enter().append("path")
    .attr("class", "graticule")
    .attr("d", path);

map_svg.append("path")
    .datum(graticule.outline)
    .attr("class", "foreground")
    .attr("d", path);

d3.json("readme-boundaries.json", function(collection) {
  map_svg.insert("g", ".graticule")
      .attr("class", "boundary")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
});

d3.json("readme-land.json", function(collection) {
  map_svg.insert("g", ".graticule,.boundary")
      .attr("class", "land")
    .selectAll("path")
      .data(collection.geometries)
    .enter().append("path")
      .attr("d", path);
});



/* Parallel Coordinates */


function changeproj(name) {
  if (!(name in projections)) return;

  // update map
  projection = projections[name]
    .translate([map_width / 2 - .5, map_height / 2 - .5]);

  path = d3.geo.path()
      .projection(projection);

  map_svg.selectAll("path")
      .transition()
      .duration(1200)
      .attr("d", path);
}



function draw(d) {
  return line(dimensions.map(function(dimension) {
    return [x(dimension.name), dimension.scale(d[dimension.name])];
  }));
}

</script>
</body>
</html>

projections.tsv

Acc. 40º 150%	Scale	Areal	Angular	name
87.7	0.29	0.37	18.25	Eckert III
87.5	0.25	0.19	20.54	Natural Earth
87.4	0.27	0.17	24.2	Winkel II
86.5	0.23	0.28	19.15	Kavraisky VII
85	0.26	0.18	23.28	Winkel Tripel
84.3	0.27	0.19	21.27	Robinson
83.2	0.25	0.43	16.14	Fahey
81.9	0.36	0	28.73	Eckert IV
81.8	0.26	0.24	22.31	Hölzel
80.4	0.26	0.34	20.41	Wagner VI
80	0.3	0.29	23.47	Eckert V
78.4	0.32	0.07	26.38	McBryde–Thomas Flat-Pole Sine (No. 2)
78.1	0.29	0.23	25.8	Winkel I
77.9	0.28	0.3	22.68	Wagner III
76.5	0.32	0.12	26.88	Wagner II
76.2	0.31	0.25	NaN	Denoyer Semi-elliptical
75.2	0.3	0.31	24.31	Putnins P5'
74.3	0.29	0.57	16.84	Equidistant Cylindrical (Plate Carrée)
74.1	0.38	0	30.56	Kavraisky V
74	0.37	0	30.71	Wagner VII
72.4	0.39	0	31.54	Putnins P4'
71.9	0.57	0	30.9	Cylindrical Equal-Area
70.6	0.39	0	32.28	Mollweide
70.5	0.29	0.51	20.36	Ginzburg VIII (TsNIIGAiK 1944)
70.2	0.43	0	30.9	Nell–Hammer
69.1	0.39	0.1	30.79	Putnins P1
68.1	0.36	0.23	30.17	Aitoff
68.1	0.36	0.29	30.3	Eckert I
67	0.44	0	33.33	Foucaut Sinusoidal
63.7	0.44	0	35.2	Boggs Eumorphic
63	0.45	0	35.5	Eckert–Greifendorff
62.9	0.39	1.3	7.63	Miller Cylindrical I
62.4	0.47	0	36	Quartic Authalic
61.7	0.35	1.05	10.06	Larrivée
60.3	0.48	0	36.99	Craster Parabolic (Putnins P4)
58.9	0.46	0	36.39	Goode Homolosine
57.4	0.41	1.46	7.75	van der Grinten (I)
57.4	0.57	4.79	0	Mercator
57.1	0.51	0	39.01	Sinusoidal
49	0.3	0.73	10.62	Gall (Gall Stereographic)
42.2	0.74	0	52.39	Foucaut