D3.js geoMiller() Function
The geoMiller() function in d3.js is used to draw the Miller cylindrical projection of the given geojson data.
Syntax:
d3.geoMiller()
Parameters: This method does not accept any parameters.
Returns: This method draws the Miller cylindrical projection.
Example 1: The following example draws the Miller projection of the world with the center at (0, 0) and rotation of 0 degrees.
HTML
<!DOCTYPE html> <html> <head>   <script src=   </script>   <script src=   </script> </head> <body>   <div style="width:700px; height:500px;">     <svg width="600" height="450"></svg>   </div>   <script>     var svg = d3.select("svg"),       width = +svg.attr("width"),       height = +svg.attr("height");       // Miller projection with the     // Center at (0, 0) and rotation     // of 0 degrees     var gfg = d3.geoMiller()       .scale(width / 1.8 / 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) {         // Drawing 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 draws the Miller projection of the world with the center at (-10, 0) and rotation of 90 degrees with respect to the y-axis.
HTML
<html> <head>   <script src=   </script>   <script src=   </script> </head> <body>   <div style="width:700px; height:600px;">     <svg width="500" height="450"></svg>   </div>   <script>     var svg = d3.select("svg"),       width = +svg.attr("width"),       height = +svg.attr("height");       // Miller projection with the     // Center at (-10, 0) and a rotation of     // 90 degrees w.r.t y-axis     var gfg = d3.geoMiller()       .scale(width / 1.8 / Math.PI)       .rotate([90, 0])       .center([-10, 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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
