D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.
The geoEckert2() function in d3.js is used to draw the Eckert II projection which is an equal-area pseudocylindrical map projection. In the equatorial aspect, the network of longitude and latitude lines consists solely of straight lines, and the outer boundary has the distinctive shape of an elongated hexagon.
Syntax:
d3.geoEckert2()
Parameters: This method does not accept any parameters.
Return Value: This method creates an Eckert2 projection from given JSON data.
Example 1: The following example makes Eckert2 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> <script src= </script> </head> <body> <div style="width:700px; height:600px;"> <center> <h3 style="color:grey"> Eckart II Projection of World </h3> </center> <svg width="700" height="550"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Eckart2 projection var gfg = d3.geoEckert2() .scale(width / 1.5 / Math.PI) .rotate([0,0]) .center([0,0]) .translate([width / 2, height / 2]) // Loading the json data d3.json("https://raw.githubusercontent.com/" + "janasayantan/datageojson/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: The following example makes Eckert II projection of the world with the center at (0,0) and rotating 45 degrees with respect to X-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> <script src= </script> </head> <body> <div style="width:700px; height:600px;"> <center> <h3 style="color:grey"> Eckart II Projection of World </h3> </center> <svg width="700" height="550"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Eckart2 projection // Center(0,0) and rotating 45 degree var gfg = d3.geoEckert2() .scale(width / 1.5 / Math.PI) .rotate([45,0]) .center([0,0]) .translate([width / 2, height / 2]) // Loading the json data d3.json("https://raw.githubusercontent.com/" + "janasayantan/datageojson/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:
