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, neveropen 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!
