javascript - How to add categories to your chord diagram in D3.js? -

this chord diagram d3.js version 4 (based on this chart in v3) 2 added "super categories" (i.e., the yellow , grey overarching categories) via photoshop:

you can run code here:

  ////////////////////////////////////////////////////////////    //////////////////////// set-up ////////////////////////////    ////////////////////////////////////////////////////////////    var margin = {left:90, top:90, right:90, bottom:90},        width =  1000 - margin.left - margin.right, // more flexibility: math.min(window.innerwidth, 1000)        height =  1000 - margin.top - margin.bottom, // same: math.min(window.innerwidth, 1000)        innerradius = math.min(width, height) * .39,        outerradius = innerradius * 1.1;        var names = ["test1","test2","amo-db","youtube","twitter", "google+", "pflegeratgeber" ,"o-mag","ruv"],        colors = ["#301e1e", "#083e77", "#342350", "#567235", "#8b161c", "#df7c00"],        opacitydefault = 0.8;        var matrix = [        [0,1,1,1,1,1,1,1,1], //test1        [0,0,1,1,1,1,1,0,1], //test2        [0,1,0,1,1,1,1,1,1], //hawkeye        [0,1,1,0,1,1,0,1,1], //the hulk        [0,1,1,1,0,1,1,1,1], //iron man        [0,1,1,1,1,0,1,1,1],        [0,1,1,1,1,1,0,1,1], //iron man        [0,1,1,1,1,1,1,0,1],        [0,1,1,1,1,1,1,0,0] //thor //thor      ];        ////////////////////////////////////////////////////////////      /////////// create scale , layout functions //////////////      ////////////////////////////////////////////////////////////        var colors = d3.scaleordinal()          .domain(d3.range(names.length))        .range(colors);        var chord = d3.chord()        .padangle(.15)        .sortchords(d3.descending)          var arc = d3.arc()        .innerradius(innerradius*1.01)        .outerradius(outerradius);        var path = d3.ribbon()      .radius(innerradius);      ////////////////////////////////////////////////////////////    ////////////////////// create svg //////////////////////////    ////////////////////////////////////////////////////////////      var svg = d3.select("#chart").append("svg")      .attr("width", width + margin.left + margin.right)      .attr("height", height + margin.top + margin.bottom)      .append("g")      .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")      .datum(chord(matrix));      ////////////////////////////////////////////////////////////    ////////////////// draw outer arcs /////////////////////////    ////////////////////////////////////////////////////////////      var outerarcs = svg.selectall("g.group")      .data(function(chords) { return chords.groups; })      .enter().append("g")      .attr("class", "group")      .on("mouseover", fade(.1))      .on("mouseout", fade(opacitydefault))        // text popups      .on("click", mouseoverchord)      .on("mouseout", mouseoutchord);        ////////////////////////////////////////////////////////////    ////////////////////// append names ////////////////////////    ////////////////////////////////////////////////////////////      //append label names inside outside    outerarcs.append("path")      .style("fill", function(d) { return colors(d.index); })      .attr("id", function(d, i) { return "group" + d.index; })      .attr("d", arc);       outerarcs.append("text")             .attr("x", 6)             .attr("dx", 60)            .attr("dy", 18)          .append("textpath")            .attr("href", function(d) { return "#group" + d.index;})            .text(function(chords, i){return names[i];})            .style("fill", "white");      ////////////////////////////////////////////////////////////    ////////////////// draw inner chords ///////////////////////    ////////////////////////////////////////////////////////////      svg.selectall("path.chord")      .data(function(chords) { return chords; })      .enter().append("path")      .attr("class", "chord")      .style("fill", function(d) { return colors(d.source.index); })      .style("opacity", opacitydefault)      .attr("d", path);      ////////////////////////////////////////////////////////////    ////////////////// functions /////////////////////////    ////////////////////////////////////////////////////////////      function popup() {      return function(d,i) {        console.log("love");      };    }//popup      //returns event handler fading given chord group.    function fade(opacity) {      return function(d,i) {        svg.selectall("path.chord")            .filter(function(d) { return d.source.index != && d.target.index != i; })        .transition()            .style("opacity", opacity);      };    }//fade        //highlight hovered on chord    function mouseoverchord(d,i) {        //decrease opacity      svg.selectall("path.chord")        .transition()        .style("opacity", 0.1);      //show hovered on chord full opacity      d3.select(this)        .transition()            .style("opacity", 1);        //define , show tooltip on mouse location      $(this).popover({        //placement: 'auto top',        title: 'test',        placement: 'right',        container: 'body',        animation: false,        offset: "20px -100px",        followmouse: true,        trigger: 'click',        html : true,        content: function() {          return "<p style='font-size: 11px; text-align: center;'><span style='font-weight:900'>"  +               "</span> text <span style='font-weight:900'>"  +               "</span> folgt hier <span style='font-weight:900'>" + "</span> movies </p>"; }      });      $(this).popover('show');    }    //bring chords default opacity    function mouseoutchord(d) {      //hide tooltip      $('.popover').each(function() {        $(this).remove();      })      //set opacity default      svg.selectall("path.chord")        .transition()        .style("opacity", opacitydefault);      }      //function mouseoutchord

 body {    font-size: 12px;    font-family: 'lato', sans-serif;    text-align: center;    fill: #2b2b2b;    cursor: default;  }    @media (min-width: 600px) {    #chart{      font-size: 16px;    }  }

<!doctype html>  <html>    <head>      <meta http-equiv="content-type" content="text/html;charset=utf-8"/>      <title>chord diagram</title>        <!-- d3.js -->      <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>      <!-- google fonts -->      <link href='https://fonts.googleapis.com/css?family=lato:400,900' rel='stylesheet' type='text/css'>      <!-- bootstrap 4(!) -->      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoiresju2yc3z8gv/npezwav56rsmlldc3r/azzgrngxqqknkkofvhfqhnuweyj" crossorigin="anonymous">      <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-a7fzj7v+d/sdmmqp/noqwlilvusjfdhw+k9omg/a/eheadgtzns3hpfag6ed950n" crossorigin="anonymous"></script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-dztdapbwprxsa/3eyeeuwrwcy7g5kfbe8ffjk5jaixuyhkkdx6qin1dkwx51bbrb" crossorigin="anonymous"></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vbwwzlzj8ea9acx4pew3rvhjgjt7zpknpzk+02d9phzyevke+jo0iegizqplforn" crossorigin="anonymous"></script>      </head>    <body>      <div id = "chart"></div>    </body>  </html>

i don’t think, there’s function in d3.js for "overarching categories" out of box. can’t wrap head around how implement that. for starters, thought define array groups defined and the subgroups included. then, somehow passed d3.js? 

// not arcs in group must categorised in super groups. var groups = [ ["group_name1", "ruv","test1"], ["group_name2", "twitter","google+", "pflegeratgeber"] ] 

bonus: can choose colours of super groups.