D3 Examples - d3v4: Chord diagram

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
​
    </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>
​
    