For maps the EEA uses the ETRS_1989_LAEA_52N_10E coordinate system. This example shows how to get a similair projection with lat-lon data. The key parameters to get the right projection are:
The transverse Mercator projection
d3.geoTransverseMercator()
The center of the projection is on 10E 52N
projection.center([10,52])
A rotation around the normal axis to align the center meridian north
projection.rotate([-10,0,0])
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| path { | |
| fill: steelblue; | |
| stroke: white; | |
| stroke-width: 0.3; | |
| } | |
| </style> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <div id="viz"></div> | |
| <script> | |
| var width = 500, height = 500; | |
| var svg = d3.select("#viz").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var xym = d3.geoTransverseMercator() | |
| .center([10,52]) | |
| .scale(750) | |
| .rotate([-10,0,0]); | |
| var translate = xym.translate(); | |
| translate[0] = 330; | |
| translate[1] = 275; | |
| xym.translate(translate).scale(); | |
| var path = d3.geoPath().projection(xym); | |
| d3.queue() | |
| .defer(d3.json, 'world.json') | |
| .await(ready) | |
| function ready(error, _map) { | |
| if (error) | |
| throw error; | |
| console.log(_map) | |
| var countries = svg.selectAll('gem') | |
| .data(topojson.feature(_map, _map.objects.countries).features) | |
| .enter().append("path") | |
| .attr("d", function(d) {return path(d.geometry);}) | |
| .attr("id", function(d) {return "ISO" + d.id}); | |
| } | |
| </script> |
