Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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
    </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=
    </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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!