JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="d3js.org/d3-format.v1.min.js"></script>
<svg width="960" height="960"></svg>

CSS

body {
  font: 10px sans-serif;
}

.group-tick line {
  stroke: #000;
}

.office-label {
  font-size: 25px;
  font: sans-serif;
  text-anchor: middle;
}

.ribbons {
  fill-opacity: 0.6;
}

JavaScript

/** HOW DO I GET THIS WORKING? */
function fade(opacity) {
  return function(d, i) {
    ribbons
        .filter(function(d) {
          return d.source.index != i && d.target.index != i;
        })
      .transition()
        .style("opacity", opacity);
  };
}
/********************************/

var matrix = [
    [11975, 5871, 8916, 2868],
    [1951, 10048, 2060, 6171],
    [8010, 16145, 8090, 8045],
    [1013, 990, 940, 6907]
];

var office = ["A", "B", "C", "D"]

//Initialize canvas and inner/outer radii of the chords
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    outerRadius = Math.min(width, height) * 0.5 - 65,
    innerRadius = outerRadius - 20;

//Set number format to show $M for millions with thousands separator (i.e. $1,000M). 
var formatValue = d3.formatPrefix("$,.0", 1e3);

//Initialize chord diagram
var chord = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending);

//Set Arc Raddii
var arc = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);

//Set Ribbbons
var ribbon = d3.ribbon()
    .radius(innerRadius);

//Initialize colors to an ordinal scheme with 10 categories
var color = d3.scaleOrdinal(d3.schemeCategory10);


//What does this do?
var g = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .datum(chord(matrix));

//Defines each "group" in the chord diagram
var group = g.append("g")
    .attr("class", "groups")
  .selectAll("g")
  .data(function(chords) { return chords.groups; })
  .enter().append("g")


//Draw the radial arcs for each group
group.append("path")
    .style("fill", function(d) { return color(d.index); })
    .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
    .attr("d", arc)
    .on("mouseover", fade(.1))         /* Where attempt at mouseover is made */
    .on("mouseout", fade(1))


group.append("title").text(function(d) {
        return groupTip(d);
    });



//Add labels to...