D3.js ribbon.endAngle() Function

Last Updated : 24 Aug, 2020

The ribbon.endAngle() function in D3.js is used to set the end angle accessor to the specified function and returns this ribbon generator.

Syntax:

ribbon.endAngle([angle]);

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

angle: This parameter is the radians value to set the end angle accessor.

Return Value: This function returns the ribbon generator.

Below programs illustrate the ribbon.endAngle() function in D3.js

Example 1:

HTML

<!DOCTYPE html> 
<html> 
 
<head> 
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.js"></script>
</head> 
 
<body>
    <center> 
        <h1 style="color:green;">GeeksForGeeks</h1>
           
        <h3>D3.js | ribbon.endAngle() Function</h3>
        <div id="GFG"></div>
         
        <script>
            // Create the svg area
            var svg = d3.select("#GFG")
                .append("svg")
                .attr("width", 300)
                .attr("height", 300)
                .append("g")
                .attr("transform", "translate(150, 150)")
                         
            // Create input data
            var data = [[18, 6, 1, 4, 5, 1],
                [ 0, 80, 0, 2, 34, 53],
                [75, 16, 8, 0, 0, 3],
                [3, 9, 9, 6, 35, 4],
                [1, 0, 7, 3, 5, 1]];
                          
            // Give this matrix to d3.chord()
            var chords = d3.chord()
                .padAngle(0.2) 
                .sortSubgroups(d3.ascending)
                .sortChords(d3.ascending)
                (data)
                 
            var ribboon = d3.ribbon().radius(140)  
                .startAngle(2.2)
                
                // Use of ribbon.endAngle() function
                .endAngle(4.5);
             
            svg.datum(chords)
                .append("g")
                .selectAll("path")
                .data(function (d) { return d; })
                .enter()
                .append("path")
                .attr("d", ribboon)
                .style("fill", "#57beff")
                .style("stroke", "black");
        </script> 
    </center>
</body> 
 
</html>

Output:

Example 2:

html

<!DOCTYPE html> 
<html>
        
<head> 
    <meta charset="utf-8">
     
    <script src= "https://d3js.org/d3-color.v1.min.js">
    </script>  
    <script src= 
        "https://d3js.org/d3-interpolate.v1.min.js">
    </script>  
    <script src= 
        "https://d3js.org/d3-scale-chromatic.v1.min.js">
    </script>
</head> 
   
<body> 
    <center> 
        <h1 style="color:green;">GeeksForGeeks</h1>
             
        <h3>D3.js | ribbon.radius() Function</h3>
        <div id="GFG"></div>
           
        <script>
            // Create the svg area
            var svg = d3.select("#GFG")
                .append("svg")
                .attr("width", 320)
                .attr("height", 320)
                .append("g")
                .attr("transform", "translate(160, 160)")
                   
            // Create input data
            var data = [[0,  58, 71, 89, 16, 28, 68, 0],
                [0, 19, 51, 0, 20, 60, 61, 71],
                [80, 10, 16, 145, 0, 80, 45, 0],
                [0, 10, 13, 9, 90,  94, 0, 0],
                [0, 0, 0, 0, 0, 0, 0, 0]];
               
            // 4 groups, so create a vector of 4 colors
            var colors = [d3.schemeSet1[7], d3.schemeSet1[6],
                d3.schemeSet1[5], d3.schemeSet1[4],
                d3.schemeSet1[3], d3.schemeSet1[2],
                d3.schemeSet1[1], d3.schemeSet1[0]];
   
            // Give this matrix to d3.chord()
            var chords = d3.chord()(data)
             
            var rib = d3.ribbon().radius(150)
                .startAngle(1)
                // Use of ribbon.endAngle() function
                .endAngle(5)
                 
            svg.datum(chords)
                .append("g")
                .selectAll("path")
                .data(function (d) { return d; })
                .enter()
                .append("path")
                .attr("d", rib)
                .style("fill", function (d) { 
                    return (colors[d.source.index])
                })
                .style("stroke", "black");
        </script> 
    </center>
</body>
   
</html>

Output:

D3.js Chords API Complete Reference

SHUBHAMSINGH10

Improve

Article Tags :

D3.js ribbon.endAngle() Function

Similar Reads

d3-axis

d3-chord

d3-color

d3-interpolate

d3-contour

d3-delaunay

d3-hierarchy

d3-scale

d3-scale-chromatic

Thank You!

What kind of Experience do you want to share?