D3.js ribbon() Function
The d3.ribbon() function in D3.js is used to return a constructed new ribbon generator with the default settings.
Syntax:
d3.ribbon();
Parameters: This function does not accept any parameters.
Return Value: This function returns the newly constructed ribbon generator.
Below programs illustrate the d3.ribbon() function in D3.js
Example 1:
HTML
<!DOCTYPE html> <html> <head>   <meta charset="utf-8"> </head> <body>   <center>     <h1 style="color:green;">GeeksForGeeks</h1>     <h3>D3.js | d3.ribbon() 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 = [[ 51, 148, 60, 71, 34, 5, 1],                   [ 10, 161, 80, 80, 12, 34, 53],                   [175, 71, 16, 68, 0, 0, 3],                   [ 13, 990, 9, 69, 76, 35, 4],                   [ 51, 148, 60, 71, 34, 5, 1]];         // Give this matrix to d3.chord()       var chords = d3.chord()           .padAngle(0.2)           .sortSubgroups(d3.descending)           .sortChords(d3.descending)           (data);         // Use of d3.ribbon() function       var ribboon = d3.ribbon().radius(140);          svg.datum(chords)           .append("g")           .selectAll("path")           .data(function (d) { return d; })           .enter()           .append("path")           .attr("d", ribboon)           .style("fill", "#449db8")           .style("stroke", "black");     </script>   </center> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html>      <head>   <meta charset="utf-8">   <script src=   </script>    <script src=   </script> </head> <body>   <center>     <h1 style="color:green;">GeeksForGeeks</h1>     <h3>D3.js | d3.ribbon() 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],                   [ 19, 51, 0, 20, 60, 61, 71],                   [ 80, 10, 16, 145, 0, 80, 45],                   [ 10, 13,  9, 90, 94, 0, 0],                   [ 80, 10, 16, 145, 0, 80, 45],                   [ 10, 13,  9, 90, 94, 0, 0]];         // 4 groups, so create a vector of 4 colors       var colors = [d3.schemeCategory10[0],           d3.schemeCategory10[1],           d3.schemeCategory10[2], d3.schemeCategory10[3],           d3.schemeCategory10[4], d3.schemeCategory10[5],           d3.schemeCategory10[6], d3.schemeCategory10[7]];         // Give this matrix to d3.chord()       var chords = d3.chord()           .padAngle(0.175)           .sortSubgroups(d3.ascending)           (data);         svg.datum(chords)           .append("g")           .selectAll("path")           .data(function (d) { return d; })           .enter()           .append("path")           .attr("d", d3.ribbon()               .radius(150)           )           .style("fill", function (d) {               return (colors[d.source.index])           })           .style("stroke", "black");     </script>   </center> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!
