D3.js chord() Function
The d3.chord() function in D3.js is used to return a constructed new chord layout with the default settings.
Syntax:
d3.chord()
Parameters: This function does not accept any parameters.
Return Value: This function returns the constructed new chord layout.
Below programs illustrate the d3.chord() function in D3.js:
Example 1:
HTML
<!DOCTYPE html> <html> <head>   <script src=   </script> </head> <body>   <center>     <h1 style="color:green;">GeeksForGeeks</h1>       <h3>D3.js | d3.chord() Function</h3>     <div id="GFG"></div>       <script>       // Create the svg area       var svg = d3.select("#GFG")         .append("svg")         .attr("width", 340)         .attr("height", 340)         .append("g")         .attr("transform", "translate(170,170)")         // Create input data       var data = [[8010, 16145, 8090, 8045],       [1013, 990, 940, 6907],       [11975, 5871, 8916, 2868],       [1951, 10048, 2060, 6171]];         // Give this matrix to d3.chord()       var chords = d3.chord()         .padAngle(0.05)         (data)         // Add the groups on the inner part       // of the circle       svg.datum(chords)         .append("g")         .selectAll("g")         .data(function (d) { return d.groups; })         .enter()         .append("g")         .append("path")         .style("fill", "black")         .style("stroke", "black")         .attr("d", d3.arc()           .innerRadius(150)           .outerRadius(160)         )         // Add the links between groups       svg.datum(chords)         .append("g")         .selectAll("path")         .data(function (d) { return d; })         .enter()         .append("path")         .attr("d", d3.ribbon()           .radius(150)         )         .style("fill", "#32a852")         .style("stroke", "black");     </script>   </center> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head>   <script src=   </script>   <script src=   </script>   <script src=   </script>   <script src=   </script> </head> <body>   <center>     <h1 style="color:green;">GeeksForGeeks</h1>       <h3>D3.js | d3.chord() Function</h3>     <div id="GFG"></div>       <script>       // Create the svg area       var svg = d3.select("#GFG")         .append("svg")         .attr("width", 340)         .attr("height", 340)         .append("g")         .attr("transform", "translate(170,170)")         // Create input data       var data = [[0, 5871, 8916, 2868],       [1951, 0, 2060, 6171],       [8010, 16145, 0, 8045],       [1013, 990, 940, 0]];         // 4 groups, so create a vector of 4 colors       var colors =           [d3.schemeDark2[0], d3.schemeDark2[1],            d3.schemeDark2[2], d3.schemeDark2[3]];         // Give this matrix to d3.chord()       var chords = d3.chord()         .padAngle(0.175)         .sortSubgroups(d3.ascending)         (data)         // Add the groups on the inner part       // of the circle       svg.datum(chords)         .append("g")         .selectAll("g")         .data(function (d) { return d.groups; })         .enter()         .append("g")         .append("path")         .style("fill", function (d, i) {           return colors[i]         })         .style("stroke", "black")         .attr("d", d3.arc()           .innerRadius(150)           .outerRadius(160)         )         // Add the links between groups       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!
