d3v4: Chord diagram

<!DOCTYPE html>
<html>

</style>
</head>

<body>
    <div id="tooltip"></div>
    <link rel="stylesheet" href="style.css">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://underscorejs.org/underscore-min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/sghall/7859113/raw/422da4401f7d4fc0352a7c49961d24f03716be7a/gistfile1.js"></script>
    <script>
        d3.csv('data.csv', function(error, data) {
            var mpr = chordMpr(data);
            mpr
                .addValuesToMap('root')
                .addValuesToMap('node')
                .setFilter(function(row, a, b) {
                    return (row.root === a.name && row.node === b.name)
                })
                .setAccessor(function(recs, a, b) {
                    if (!recs[0]) return 0;
                    return +recs[0].count;
                });
            drawChords(mpr.getMatrix(), mpr.getMap());
        });

function drawChords(matrix, mmap) {

var w = 980,
                h = 800,
                r1 = h / 2,
                r0 = r1 - 110;

var chord = d3.chord()
                .padAngle(0.05)
                .sortSubgroups(d3.descending)
                .sortChords(d3.descending);

var arc = d3.arc()
                .innerRadius(r0)
                .outerRadius(r0 + 20);

var ribbon = d3.ribbon()
                .radius(r0);

var svg = d3.select("body").append("svg:svg")
                .attr("width", w)
                .attr("height", h)
                .append("svg:g")
                .attr("id", "circle")
                .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
                .datum(chord(matrix));

svg.append("circle")
                .attr("r", r0 + 20);

var mapReader = chordRdr(matrix, mmap);

var g = svg.selectAll("g.group")
                .data(function(chords) {
                    return chords.groups;
                })
                .enter().append("svg:g")
                .attr("class", "group")

g.append("svg:path")
                .style("stroke", "grey")
                .style("fill", function(d) {
                    return mapReader(d).gdata;
                })
                .attr("d", arc);

g.append("svg:text")
                .each(function(d) {
                    d.angle = (d.startAngle + d.endAngle) / 2;
                })
                .attr("dy", ".35em")
                .style("font-family", "helvetica, arial, sans-serif")
                .style("font-size", "9px")
                .attr("text-anchor", function(d) {
                    return d.angle > Math.PI ? "end" : null;
                })
                .attr("transform", function(d) {
                    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" +
                        "translate(" + (r0 + 26) + ")" +
                        (d.angle > Math.PI ? "rotate(180)" : "");
                })
                .text(function(d) {
                    return mapReader(d).gname;
                });

var colors = d3.scaleOrdinal(d3.schemeCategory20c);

var chordPaths = svg.selectAll("path.chord")
                .data(function(chords) {
                    return chords;
                })
                .enter().append("svg:path")
                .attr("class", "chord")
                .style("stroke", "grey")
                .style("fill", function(d, i) {
                    return colors(i)
                })
                .attr("d", ribbon.radius(r0))

}
    </script>
</body>

</html>

Modified http://underscorejs.org/underscore-min.js to a secure url

Updated missing url https://rawgit.com/sghall/7859113/raw/422da4401f7d4fc0352a7c49961d24f03716be7a/gistfile1.js to https://cdn.jsdelivr.net/gh/sghall/7859113/raw/422da4401f7d4fc0352a7c49961d24f03716be7a/gistfile1.js

https://d3js.org/d3.v4.min.js

https://underscorejs.org/underscore-min.js

https://rawgit.com/sghall/7859113/raw/422da4401f7d4fc0352a7c49961d24f03716be7a/gistfile1.js