Related Articles
• Last Updated : 02 Sep, 2020

The areaRadial.curve() method in D3.js is used to specify the type of curve given to an area radial. D3.js provides several curve factories that can be used to get different types of curves.

Syntax:

```areaRadial.curve( curve_factory )
```

Parameters: This method accepts a single parameter as mentioned above and described below:

• curve_factory: It is the type of curve to be used for the area radial. It is an optional parameter.

Return Value: This method does not return any value.

Below given are a few examples of areaRadial.curve() method in D3.js:

Example 1:

HTML

 ```<``html``>``<``head``>``  ``<``script` `src``=``"https://d3js.org/d3.v5.min.js"``>``  ``````<``body``>``  ``<``h1` `style="text-align: center;``             ``color: green;">``    ``GeeksforGeeks``  ````  ``<``h3` `style``=``"text-align: center;"``>``    ``D3.js | areaRadial.curve() Method``  ````  ``<``center``>``    ``<``svg` `id``=``"gfg"` `width``=``"200"` `height``=``"200"``>``      ``<``g` `transform``=``"translate(100,100)"``>``    ````  ````  ``<``script``>``    ``var points = [``      ``{ x: 0, y: 0 },``      ``{ x: 2, y: 3 },``      ``{ x: 4, y: 1 },``      ``{ x: 6, y: 8 },``      ``{ x: 8, y: 17 },``      ``{ x: 10, y: 15 },``      ``{ x: 12, y: 20 }];`` ` `    ``var xScale = d3.scaleLinear()``        ``.domain([0, 6])``        ``.range([0, 2 * Math.PI]);``    ``var yScale = d3.scaleLinear()``        ``.domain([0, 20])``        ``.range([90, 30]);`` ` `    ``var Gen = d3.areaRadial()``      ``.angle(d => xScale(d.x / 2))``      ``.innerRadius(d => yScale(d.y) / 2)``      ``.outerRadius(d => yScale(d.y))`` ` `      ``// Set the given``      ``// curve factory``      ``.curve(d3.curveBasis);`` ` `    ``d3.select("#gfg")``      ``.select("g")``      ``.append("path")``      ``.attr("d", Gen(points))``      ``.attr("fill", "green")``      ``.attr("stroke", "black");``  ```````

Output:

Example 2:

HTML

 ```<``html``>``<``head``> ``  ``<``script` `src``=``"https://d3js.org/d3.v5.min.js"``>``  ``````<``body``>``  ``<``h1` `style="text-align: center;``             ``color: green;">``    ``GeeksforGeeks``  ```` ` `  ``<``h3` `style``=``"text-align: center;"``>``    ``D3.js | areaRadial.curve() Method``  ````  ``<``center``>``    ``<``svg` `id``=``"gfg"` `width``=``"500"` `height``=``"500"``>``      ``<``g` `transform``=``"translate(180,180)"``>``    ````  ````  ``<``script``>``    ``var data = [``      ``{ x: 10, y: 1 },``      ``{ x: 15, y: 3 },``      ``{ x: 20, y: 5 },``      ``{ x: 25, y: 7 },``      ``{ x: 30, y: 9 },``      ``{ x: 35, y: 11 },``      ``{ x: 40, y: 13 }];`` ` `    ``var xScale = d3.scaleLinear()``        ``.domain([0, 8])``        ``.range([25, 200]);``    ``var yScale = d3.scaleLinear()``        ``.domain([0, 20])``        ``.range([200, 25]);`` ` `    ``var Gen = d3.areaRadial()``      ``.angle(d => xScale(d.x / 3))``      ``.innerRadius(d => yScale(d.y / 2))``      ``.outerRadius(d => yScale(d.y))`` ` `      ``// Set the given``      ``// curve factory``      ``.curve(d3.curveCardinal);`` ` `    ``d3.select("#gfg")``      ``.select("g")``      ``.append("path")``      ``.attr("d", Gen(data))``      ``.attr("fill", "green")``      ``.attr("stroke", "black");``  ```````

Output:

My Personal Notes arrow_drop_up