Control colors in d3.js chord diagram

This post follows the 2 previous posts on chord diagram: most basic chord and adding labels. It shows how to attribute a color to each group of the dataset. See the chord section for more examples.

chord diagram section


  • See the basic chord diagram post for an intro on chord

  • Here a vector of 4 colors is built. Then a color is called for each group based on their index.

  • Note that a color scale could have been used as well, like here.

  • Next step: interactivity.
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src=""></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>


// create the svg area
var svg ="#my_dataviz")
    .attr("width", 440)
    .attr("height", 440)
    .attr("transform", "translate(220,220)")

// create a matrix
var matrix = [
  [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 = [ "#440154ff", "#31668dff", "#37b578ff", "#fde725ff"]

// give this matrix to d3.chord(): it will calculates all the info we need to draw arc and ribbon
var res = d3.chord()

// add the groups on the outer part of the circle
  .data(function(d) { return d.groups; })
    .style("fill", function(d,i){ return colors[i] })
    .style("stroke", "black")
    .attr("d", d3.arc()

// Add the links between groups
  .data(function(d) { return d; })
    .attr("d", d3.ribbon()
    .style("fill", function(d){ return(colors[d.source.index]) }) // colors depend on the source group. Change to target otherwise.
    .style("stroke", "black");


Related blocks →