| license: gpl-3.0 | |
| height: 500 | |
| border: no |
Europe in two (three) projections:
Lambert Equal Area (red) - statistical analysis and display (equal area)
Sinusidal (green) - useful when the distance to equator matters, e.g. climate data (straight latitudes)
Chamberlin (not displayed) - might be an interesting option for aesthetic purposes
Map data: Natural Earth.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <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.v2.min.js"></script> | |
| <style> | |
| .laea { | |
| fill: none; | |
| stroke: red; | |
| opacity: 0.5; | |
| } | |
| .sinu { | |
| fill: none; | |
| stroke: green; | |
| opacity: 0.5; | |
| } | |
| .cham { | |
| fill: none; | |
| stroke: blue; | |
| opacity: 0.5; | |
| } | |
| </style> | |
| <body> | |
| <script> | |
| var width = 960, | |
| height = 500; | |
| var projLaea = d3.geoAzimuthalEqualArea() | |
| .rotate([-20.0, 0.0]) | |
| .scale(300) | |
| .precision(.1); | |
| var projSinu = d3.geoSinusoidal() | |
| .rotate([-20.0, 0.0]) | |
| .scale(300) | |
| .precision(.1); | |
| /* | |
| var projCham = d3.geoChamberlinAfrica() | |
| .scale(300) | |
| .precision(.1); | |
| */ | |
| var pathLaea = d3.geoPath() | |
| .projection (projLaea); | |
| var pathSinu = d3.geoPath() | |
| .projection (projSinu); | |
| /* | |
| var pathCham = d3.geoPath() | |
| .projection (projCham); | |
| */ | |
| var graticule = d3.geoGraticule(); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var featuresLcc = svg.append("g") | |
| .attr("class", "laea"); | |
| var featuresSinu = svg.append("g") | |
| .attr("class", "sinu"); | |
| var featuresLaea = svg.append("g") | |
| .attr("class", "cham"); | |
| d3.json("110m.json", function (error, europe) { | |
| if (error) throw error; | |
| var countries = topojson.feature(europe, europe.objects.countries).features; | |
| featuresLcc.append("path") | |
| .datum(graticule) | |
| .attr("d", pathLaea); | |
| featuresLcc.selectAll(".d1") | |
| .data(countries) | |
| .enter().append("path") | |
| .attr("d", pathLaea); | |
| featuresSinu.append("path") | |
| .datum(graticule) | |
| .attr("d", pathSinu); | |
| featuresSinu.selectAll(".d2") | |
| .data(countries) | |
| .enter().append("path") | |
| .attr("d", pathSinu); | |
| /* | |
| featuresLaea.append("path") | |
| .datum(graticule) | |
| .attr("d", pathCham); | |
| featuresLaea.selectAll(".d3") | |
| .data(countries) | |
| .enter().append("path") | |
| .attr("d", pathCham); | |
| */ | |
| }); | |
| </script> |
