D3.js geoMercator() Function - GeeksforGeeks

01 Oct, 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 geoMercator() function in d3.js is used to draw The spherical Mercator projection.
Syntax:
d3.geoMercator()
Parameters: This method does not accept any parameters.
Returns: This method creates the Mercator projection from given json data.
Example #1: The following example draws Mercator projection of world with center at (0, 0) and 0 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");              // Mercator projection            // Center(0, 0) with 0 rotation            var gfg = d3                .geoMercator()                .scale(width / 2.5 / 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", "black").attr(                  "d", d3.geoPath().projection(gfg)).style(                  "stroke", "#ffff");            });        </script>    </body></html>
Output:
Mercator  projection of World with no rotation and centered at (0, 0)
Example #2: The following example draws Mercator projection of world after altering the center and 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: 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");              // Mercator  projection // Center(20, 20) and 90 degree rotation w.r.t Y axis            var gfg = d3                .geoMercator()                .scale(width / 2.5 / Math.PI)                .rotate([90, 0])                .center([20, 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", "Turquoise").attr(                  "d", d3.geoPath().projection(gfg)).style(                  "stroke", "#ffff");            });        </script>    </body></html>
Output:
Mercator projection with 90 degree rotation w.r.t  Y axis  and centered at (20, 20)
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?