chart = {
  const svg = d3.select(DOM.svg(width, height))
      .attr("viewBox", [-width / 2, -height / 2, width, height])
      .attr("font-size", 10)
      .attr("font-family", "sans-serif")
      .style("width", "100%")
      .style("height", "auto");

  const chords = chord(data.matrix);

  const group = svg.append("g")
    .selectAll("g")
    .data(chords.groups)
    .enter().append("g");

  // **QUESTION: Does the opacity mouseover go here?
-
  group.append("path")
+
  const groupPath = group.append("path")
      .attr("class", "group")
      .attr("fill", d => color(d.index))
      .attr("stroke", d => color(d.index))
      .attr("d", arc)
      .on("mouseover", fade(.1))
      .on("mouseout", fade(opacityDefault));

+
  // **QUESTION: How to adapt this for the current chord diagram?

  // From http://bl.ocks.org/farazshuja/6225ffc34c23ade0de169c4d96252bbe  
  //Returns an event handler for fading a given chord group.
  function fade(opacity) {
    return function(d,i) {
      ribbons
        .filter(function(dd) { return dd.source.index != d.index && dd.target.index != d.index; })
        .transition()
          .style("opacity", opacity);
      // fade all other groups
      groupPath
        .filter(function(dd) { return dd.index != d.index; })
        .transition()
          .style("opacity", opacity);
    };
  }//fade
  
  group.append("text")
      .each(d => { d.angle = (d.startAngle + d.endAngle) / 2; })
      .attr("dy", ".35em")
      .attr("transform", d => `
        rotate(${(d.angle * 180 / Math.PI - 90)})
        translate(${innerRadius + 26})
        ${d.angle > Math.PI ? "rotate(180)" : ""}`)
      .attr("text-anchor", d => d.angle > Math.PI ? "end" : null)
      .text(d => data.nameByIndex.get(d.index));

-
  svg.append("g")
+
  const ribbons = svg.append("g")
      .attr("fill-opacity", 1)
    .selectAll("path")
    .data(chords)
    .enter().append("path")
      .attr("class", "ribbons")
      .attr("stroke", d => d3.rgb(color(d.source.index)).darker())
      .attr("fill", d => color(d.source.index))
      .attr("d", ribbon)
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", opacityDefault);
          tooltip.html(data.nameByIndex.get(d.source.index) + " leads to " + data.nameByIndex.get(d.target.index))
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
+
          // fade other ribbons
          ribbons
            .filter(dd => dd !== d)
            .transition()
              .style('opacity', 0.1);
          // fade other groups
          groupPath
            .filter((dd,i) => dd.index !== d.source.index && dd.index !== d.target.index)
            .transition()
              .style("opacity", 0.1);
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
+
          // unfade ribbons
          ribbons
            .transition()
              .style('opacity', opacityDefault);
          // unfade groups
          groupPath
            .transition()
              .style("opacity", opacityDefault);

      });
  
  return svg.node();
}