Thursday, August 28, 2025
HomeLanguagesJavascriptD3.js areaRadial.curve() Method

D3.js areaRadial.curve() Method

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




<!DOCTYPE html>
<html>
<head>
  <script src=
  </script>
</head>
<body>
  <h1 style="text-align: center;
             color: green;">
    neveropen
  </h1>
  <h3 style="text-align: center;">
    D3.js | areaRadial.curve() Method
  </h3>
  <center>
    <svg id="gfg" width="200" height="200">
      <g transform="translate(100,100)"></g>
    </svg>
  </center>
  <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");
  </script>
</body>
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
<head
  <script src=
  </script>
</head>
<body>
  <h1 style="text-align: center;
             color: green;">
    neveropen
  </h1>
  
  <h3 style="text-align: center;">
    D3.js | areaRadial.curve() Method
  </h3>
  <center>
    <svg id="gfg" width="500" height="500">
      <g transform="translate(180,180)"></g>
    </svg>
  </center>
  <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");
  </script>
</body>
</html>


Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
RELATED ARTICLES

Most Popular

Dominic
32236 POSTS0 COMMENTS
Milvus
80 POSTS0 COMMENTS
Nango Kala
6609 POSTS0 COMMENTS
Nicole Veronica
11779 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11828 POSTS0 COMMENTS
Shaida Kate Naidoo
6719 POSTS0 COMMENTS
Ted Musemwa
7002 POSTS0 COMMENTS
Thapelo Manthata
6678 POSTS0 COMMENTS
Umr Jansen
6690 POSTS0 COMMENTS