Open In App

D3.js chord() Function

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 26 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads