D3.js geoMtFlatPolarParabolic() Function

Last Updated : 02 Oct, 2020

The JavaScript D3.js library provides interactive data visualizations for web page using HTML5, Scalable Vector Graphics, and Cascading Style Sheets. The geoMtFlatPolarParabolic() function in d3.js is used to draw The McBryde–Thomas flat-polar parabolic pseudocylindrical equal-area projection.

Syntax:

d3.geoMtFlatPolarParabolic()

Parameters: This method does not accept any parameters.

Returns: This method creates the McBryde–Thomas flat-polar parabolic pseudocylindrical equal-area projection from given JSON data.

Example #1: The following example creates MtFlatPolarParabolic projection of world with center at (0, 0) and no rotation.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta
            name="viewport"
            content="width=device-width,  
                initial-scale=1.0" 
        /> 
    </head> 
  
    <body> 
        <div style="width: 700px; height: 500px;"> 
            <center> 
                <h3 style="color: black;"></h3> 
            </center> 
  
            <svg width="600" height="450"></svg> 
        </div> 
        <script src="https://d3js.org/d3.v4.js"></script> 
        <script src= 
                "https://d3js.org/d3-geo-projection.v2.min.js"> 
      </script> 
        <script> 
            var svg = d3.select("svg"), 
                width = +svg.attr("width"), 
                height = +svg.attr("height"); 
  
            // MtFlatPolarParabolic projection 
            // Center(0, 0) with 0 rotation 
            var gfg = d3 
                .geoMtFlatPolarParabolic() 
                .scale(width / 1.8 / Math.PI) 
                .rotate([0, 0]) 
                .center([0, 0]) 
                .translate([width / 2, height / 2]); 
  
            // Loading the json data 
            // Used json file stored at  
/*https://raw.githubusercontent.com/janasayantan 
             /datageojson/master/world.json*/ 
            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", "DarkSlateBlue").attr( 
                  "d", d3.geoPath().projection(gfg)).style( 
                  "stroke", "#ffff"); 
            }); 
        </script> 
    </body> 
</html> 

Output:

Example 2: In following example we will create MtFlatPolarParabolic projection of world with center at (0, 20) and rotating 90 degree with respect to Y axis.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8" /> 
        <meta
            name="viewport"
            content="width=device-width,  
                initial-scale=1.0" 
        /> 
    </head> 
  
    <body> 
        <div style="width: 700px; height: 600px;"> 
            <center> 
                <h3 style="color: black;"></h3> 
            </center> 
  
            <svg width="500" height="450"></svg> 
        </div> 
        <script src="https://d3js.org/d3.v4.js"></script> 
        <script src= 
             "https://d3js.org/d3-geo-projection.v2.min.js"> 
      </script> 
        <script> 
            var svg = d3.select("svg"), 
                width = +svg.attr("width"), 
                height = +svg.attr("height"); 
  
            // MtFlatPolarParabolic  projection 
         // Center(0, 20) and 90 degree rotation w.r.t Y axis 
            var gfg = d3 
                .geoMtFlatPolarParabolic() 
                .scale(width / 1.7 / Math.PI) 
                .rotate([90, 0]) 
                .center([0, 20]) 
                .translate([width / 2, height / 2]); 
  
            // Loading the json data 
            // Used json file stored at  
/*https://raw.githubusercontent.com/janasayantan 
            /datageojson/master/world.json*/ 
            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", "DodgerBlue").attr( 
                  "d", d3.geoPath().projection(gfg)).style( 
                  "stroke", "#ffff"); 
            }); 
        </script> 
    </body> 
</html> 