Related Articles
D3.js geoConicEqualArea() Function
• Last Updated : 23 Sep, 2020

The geoConicEqualArea() function in d3.js is used to draw the Albers’ Conic equal-area projection from the given geojson data.

Syntax:

```d3.geoConicEqualArea()
```

Parameters: This method does not accept any parameters.

Return Value: This method returns the Conic equal-area projection.

Example 1: The following example draws the Conic equal-area projection of the world with the center at (0, 0) and a rotation of 0 degrees.

## HTML

 ```<``html``>`` ` `<``head``>``    ``<``script` `src``=``"https://d3js.org/d3.v4.js"``>``    ````    ``<``script` `src``=``"https://d3js.org/d3-geo-projection.v2.min.js"``>``    `````` ` `<``body``>``    ``<``div` `style``=``"width:700px; height:500px;"``>``        ``<``svg` `width``=``"600"` `height``=``"450"``>``    ````     ` `    ``<``script``>``        ``var svg = d3.select("svg"),``            ``width = +svg.attr("width"),``            ``height = +svg.attr("height");`` ` `        ``// ConicEqualArea projection with``        ``// Center at (0, 0) with rotation``        ``// of 0 degrees ``        ``var gfg = d3.geoConicEqualArea()``            ``.scale(width / 1.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) {`` ` `                ``// 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")``            ``});``    `````` ` ``

Output:

Example 2: The following example draws the Conic equal-area projection of the world with the center at (-10, 0) and a rotation of 90 degrees with respect to the y-axis.

## HTML

 ```<``html``>`` ` `<``head``>``    ``<``script` `src``=``"https://d3js.org/d3.v4.js"``>``    ````    ``<``script` `src``=``"https://d3js.org/d3-geo-projection.v2.min.js"``>``    `````` ` `<``body``>``    ``<``div` `style``=``"width:700px; height:600px;"``>``        ``<``svg` `width``=``"500"` `height``=``"450"``>``    ````     ` `    ``<``script``>``        ``var svg = d3.select("svg"),``            ``width = +svg.attr("width"),``            ``height = +svg.attr("height");`` ` `        ``// ConicEqualArea  projection``        ``// Center at (-10,0) and 90 degree``        ``// rotation w.r.t y-axis``        ``var gfg = d3.geoConicEqualArea()``            ``.scale(width / 1.8 / Math.PI)``            ``.rotate([90, 0])``            ``.center([-10, 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", "grey")``                    ``.attr("d", d3.geoPath()``                        ``.projection(gfg)``                    ``)``                    ``.style("stroke", "#ffff")``            ``});``    `````` ` ``

Output:

My Personal Notes arrow_drop_up