The function geoNaturalEarth() is used to return the Natural Earth projection.
Syntax :
d3.geoNaturalEarth()
Parameters: This method does not accept any parameters.
Return Value: This method creates and returns geoNaturalEarth() projection from given JSON data.
Example 1: The following example creates geoNaturalEarth() projection of the world with the center at (0, 0) and no rotation.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src= </script> </head> <body> <div style="width:700px; height:600px;"> <svg width="700" height="550"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Natural Earth projection // Center(0,0) and no rotation var gfg = d3.geoNaturalEarth() .scale(width / 1.5 / Math.PI) .rotate([0, 0]) .center([0, 0]) .translate([width / 2, height / 3]) // Loading the json data d3.json("https://raw.githubusercontent.com/" +"epistler999/GeoLocation/master/world.json", function (data) { // Draw the map svg.append("g") .selectAll("path") .data(data.features) .enter().append("path") .attr("fill", "black") .attr("d", d3.geoPath() .projection(gfg) ) .style("stroke", "#ffff") }) </script> </body> </html> |
Output:
Example 2: In the following example we will create geoNaturalEarth() projection of the world with the center at (30, 0) and rotating 30 degrees anti-clockwise with respect to Y-axis.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src= </script> </head> <body> <div style="width:700px; height:600px;"> <svg width="700" height="550"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // geoNaturalEarth() projection // Center(30, 0) and 30 degree rotation var gfg = d3.geoNaturalEarth() .scale(width / 1.5 / Math.PI) .rotate([-30, 0]) .center([30, 0]) .translate([width / 2, height / 2]) // Loading the json data // Used json file stored at // GeoLocation/master/world.json d3.json("https://raw.githubusercontent.com/" +"epistler999/GeoLocation/master/world.json", function (data) { // Draw the map svg.append("g") .selectAll("path") .data(data.features) .enter().append("path") .attr("fill", "black") .attr("d", d3.geoPath() .projection(gfg) ) .style("stroke", "#ffff") }) </script> </body> </html> |
Output:
