D3.js geoOrthographic() Function
The Javascript D3.Js geoOrthographic() function gives us the azimuthal orthographic projection. It is useful when we want to see earth as 3D object and its hemispheres separately.
Syntax:
d3.geoOrthographic()
Parameters: This method does not accept any parameters.
Return Value: This method creates and returns geoOrthographic() projection from given JSON data.
Let us look at an example to understand how we can use geoOrthographic() function.
Example 1: Orthographic projection having 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> <svg width="1200" height="850"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // The orthographic Earth projection // Center(0,0) and no rotation var projection = d3.geoOrthographic() .center([0, 0]) .scale(250) .clipAngle(90 ) .translate([width / 2, height / 3]) .rotate([0,0]) // Loading data from 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", "green") .attr("d", d3.geoPath() .projection(projection) ) .style("stroke", "#ffff") }) </script> </body> </html> |
Output:
Example 2: Orthographic projection having 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> <svg width="1200" height="850"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); const config = { speed: 0.010, verticalTilted: -10, horizontalTilted: 0 } // The orthographic Earth projection // Center(0,0) and no rotation var projection = d3.geoOrthographic() .center([0, 0]) .scale(250) .clipAngle(90 ) .translate([width / 2, height / 3]) .rotate([0,0]) const path = d3.geoPath().projection(projection); // Calling rotate() function for rotation of globe Rotate(); // Loading data from 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", "grey") .attr("d", d3.geoPath() .projection(projection) ) .style("stroke", "#ffff") }) // Function to rotate() projection of globe. function Rotate() { d3.timer(function (elapsed) { projection.rotate( [config.speed*elapsed-120, config.verticalTilted, config.horizontalTilted]); svg.selectAll("path").attr("d", path); }); } </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!
