D3.js geoKavrayskiy7() Function
The geoKavrayskiy7() function in d3.js is used to draw the Kavrayskiy VII pseudocylindrical projection from the given geojson data.
Syntax:
d3.geoKavrayskiy7()
Parameters: This method does not accept any parameters.
Returns: This method returns the Kavrayskiy7 projection.
Example 1: The following example draws the Kavrayskiy7 projection of world with the center at (0, 0) and rotation of 0 degrees.
HTML
<!DOCTYPE html> <html> <head> </script> <script src= </script> </head> <body> <div style="width:700px; height:500px;"> <center> <h3 style="color:black"></h3> </center> <svg width="600" height="450"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Kavrayskiy7 projection with // the center at (0, 0) and rotation // of 0 degrees var gfg = d3.geoKavrayskiy7() .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) { // Drawing the map svg.append("g") .selectAll("path") .data(data.features) .enter().append("path") .attr("fill", "SaddleBrown") .attr("d", d3.geoPath() .projection(gfg) ) .style("stroke", "#ffff") }); </script> </body> </html> |
Output:
Example 2: The following example draws the Kavrayskiy7 projection of the world with the center at (-10, 0) and a rotation of 90 degrees with respect to the y-axis.
HTML
<!DOCTYPE html> <html> <head> </script> <script src= </script> </head> <body> <div style="width:700px; height:600px;"> <center> <h3 style="color:black"></h3> </center> <svg width="500" height="450"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Kavrayskiy7 projection with the // center at (0,0) and rotation of // 90 degrees with respect to the y-axis var gfg = d3.geoKavrayskiy7() .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", "grey") .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!
