D3.js geoOrthographic() Function

Last Updated : 26 May, 2021

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="https://d3js.org/d3.v4.js"></script>  
    
    <script src=  
"https://d3js.org/d3-geo-projection.v2.min.js">  
    </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="https://d3js.org/d3.v4.js"></script>  
    <script src= 
"https://d3js.org/d3-geo-projection.v2.min.js"> 
    </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>