D3.js geoTransverseMercator() Function

Last Updated : 23 Sep, 2020

D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics, HTML5, and Cascading Style Sheets standards.

The geoTransverseMercator() function in d3.js is used to draw the transverse spherical Mercator projection.

Syntax:

d3.geoTransverseMercator()

Parameters: This method does not accept any parameters.

Return Value: This method creates a Transverse Mercator projection from given JSON data.

Example: The following example draws the transverse Mercator projection of the world with the center at (0,0) and 0 rotation.

HTML

<!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;">  
        <svg width="700" height="400">  
        </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"); 
  
        // Transverse Mercator  projection 
        // Center(0,0) and no rotation  
        var gfg = d3.geoTransverseMercator() 
            .scale(width / 2.8 / Math.PI) 
            .rotate([0,0]) 
            .center([0,0]) 
            .translate([width / 2, height / 2]) 
  
        // Loading the json data 
        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", "SaddleBrown") 
                    .attr("d", d3.geoPath() 
                    .projection(gfg) 
                    ) 
                    .style("stroke", "#ffff") 
        }) 
    </script> 
</body>  
  
</html>