Mini Shell

/*=========================================================================================
    File Name: chord-diagram.js
    Description: D3 chord diagram chart
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Version: 1.0
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

// Chord Diagram
// ------------------------------
$(window).on("load", function(){

    // Matrix
    var matrix = [
        [6,32,47,81,31,89,24,68,50,39],
        [37,83,57,80,87,7,85,7,68,17],
        [50,15,31,3,1,85,36,95,83,99],
        [37,25,37,81,72,98,32,13,70,25],
        [19,99,97,79,74,43,78,18,4,57],
        [77,2,87,41,93,52,6,42,11,76],
        [44,54,60,69,36,44,76,58,50,16]
    ];

    var ele = d3.select("#chord-diagram");

    // Main variables
    var width = 800,
        height = 800,
        r0 = Math.min(width, height) * .37,
        r1 = r0 * 1.1;

    // Colors
    // var fill = d3.scale.category20c();
    var fill = d3.scale.ordinal()
        .range(["#99B898", "#FECEA8", "#FF847C", "#E84A5F", "#F8B195", "#F67280", "#C06C84"]);

    // Add chord layout
    var chord = d3.layout.chord()
        .padding(.05)
        .sortSubgroups(d3.descending)
        .matrix(matrix);

    // Create chart
    // var container = ele.append("svg");

    var svg = ele
        .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    // Bind data and add chord path
    svg.append("g")
        .selectAll(".chord-path")
        .data(chord.groups)
        .enter()
        .append("path")
            .attr("class", "chord-path")
            .style("fill", function(d) { return fill(d.index); })
            .style("stroke", function(d) { return fill(d.index); })
            .attr("d", d3.svg.arc().innerRadius(r0).outerRadius(r1))
            .on("mouseover", fade(.1, svg))
            .on("mouseout", fade(1, svg));


    // Add ticks
    // ------------------------------

    // Group
    var ticks = svg.append("g")
        .selectAll("g")
        .data(chord.groups)
        .enter()
        .append("g")
            .selectAll("g")
            .data(groupTicks)
            .enter()
            .append("g")
                .attr("transform", function(d) {
                    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
                    + "translate(" + r1 + ",0)";
                });

    // Add tick lines
    ticks.append("line")
        .attr("x1", 1)
        .attr("y1", 0)
        .attr("x2", 5)
        .attr("y2", 0)
        .style("stroke", "#2A363B");

    // Add tick text
    ticks.append("text")
        .attr("x", 8)
        .attr("dy", ".35em")
        .attr("text-anchor", function(d) {
            return d.angle > Math.PI ? "end" : null;
        })
        .attr("transform", function(d) {
            return d.angle > Math.PI ? "rotate(180)translate(-16)" : null;
        })
        .style("font-size", 12)
        .text(function(d) { return d.label; });


    // Add chord
    // ------------------------------

    svg.append("g")
        .attr("class", "d3-chord")
        .selectAll("path")
        .data(chord.chords)
        .enter()
        .append("path")
            .style("fill", function(d) { return fill(d.target.index); })
            .style("stroke", "#000")
            .style("stroke-width", 0.5)
            .style("fill-opacity", 0.7)
            .attr("d", d3.svg.chord().radius(r0))
            .style("opacity", 1);

    // Group Ticks
    function groupTicks(d) {
        var k = (d.endAngle - d.startAngle) / d.value;
        return d3.range(0, d.value, 50).map(function(v, i) {
            return {
                angle: v * k + d.startAngle,
                label: i % 2 ? null : v
            };
        });
    }

    // Fade Chord Group
    function fade(opacity, svg) {
        return function(g, i) {
            svg.selectAll(".d3-chord path").filter(function(d) {
                return d.source.index != i && d.target.index != i;
            })
            .transition()
            .style("opacity", opacity);
        };
    }
});