D3 Examples - Matrix Generator

xxxxxxxxxx
 
<!DOCTYPE html>
​
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
  body {
    font: 10px sans-serif;
  }
​
  .group-tick line {
    stroke: #000;
  }
​
  .ribbons {
    fill-opacity: 0.67;
  }
</style>
​
<svg width="900" height="900"></svg>
<body>
    <script>
        console.clear();
        d3.csv("data.csv", function (data) {
            MatrixGenerator(data)
        })
​
        function MatrixGenerator(data, from, to, value) {
            if (data) {
                var fromColumn = from != undefined ? d[from] : data.columns[0];
                var toColumn = to != undefined ? d[to] : data.columns[1];
                var value = value != undefined ? value : data.columns[2];
                var matrixDimension = d3.map(data, function (d) {
                    return d[fromColumn]
                }).keys()
​
                var matrix = []
​
                for (var i = 0; i < matrixDimension.length; i++) {
                    matrix[i] = [];
                    for (var j = 0; j < matrixDimension.length; j++) {
                        matrix[i][j] = undefined;
                    }
                }
​
                for (let i = 0; i < matrixDimension.length; i++) {
                    temp = data.filter(function (d) {
                        return d[fromColumn] === matrixDimension[i]
                    });
                    for (let j = 0; j < matrixDimension.length; j++) {
​
                        var sameMatrix;
                        var matrixValue;
​
                        window["temp" + j] = temp.filter(function (tmp) {
                            return tmp[toColumn] == j
                        });
​
                        if (i == j) {
                            if (window["temp" + j] != "")
                                matrixValue = window["temp" + j][0][value]
                            else
                                matrixValue = 0;
                        } else {
                            if (window["temp" + j] != "")
                                matrixValue = window["temp" + j][0][value]
                            else
                                matrixValue = 0;
                        }
                        matrix[j][i] = +matrixValue
                    }
                }
              init(matrix)
            }
        }
​
        function init(matrix) {
            var svg = d3.select("svg"),
                width = +svg.attr("width"),
                height = +svg.attr("height"),
                outerRadius = Math.min(width, height) * 0.5 - 40,
                innerRadius = outerRadius - 30;
​
            var formatValue = d3.formatPrefix(",.0", 1e3);
​
            var chord = d3.chord()
                .padAngle(0.05)
                .sortSubgroups(d3.descending);
​
            var arc = d3.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
​
            var ribbon = d3.ribbon()
                .radius(innerRadius);
​
            var color = d3.scaleOrdinal()
                .domain(d3.range(4))
                .range(["#000000", "#FFDD89", "#957244", "#F26223"]);
​
            var g = svg.append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
                .datum(chord(matrix));
​
            var group = g.append("g")
                .attr("class", "groups")
                .selectAll("g")
                .data(function (chords) {
                    return chords.groups;
                })
                .enter().append("g");
​
            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)
                .append("svg:title")
                .text(function (d) {
                    console.log(d);
                    return d.index + " : " + d.value;
                });
​
            var groupTick = group.selectAll(".group-tick")
                .data(function (d) {
                    return groupTicks(d, 1e3);
                })
                .enter().append("g")
                .attr("class", "group-tick")
                .attr("transform", function (d) {
                    return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)";
                });
​
            groupTick.append("line")
                .attr("x2", 6);
​
            groupTick
                .filter(function (d) {
                    return d.value % 5e3 === 0;
                })
                .append("text")
                .attr("x", 8)
                .attr("dy", ".35em")
                .attr("transform", function (d) {
                    return d.angle > Math.PI ? "rotate(180) translate(-16)" : null;
                })
                .style("text-anchor", function (d) {
                    return d.angle > Math.PI ? "end" : null;
                })
                .text(function (d) {
                    return formatValue(d.value);
                });
​
            var ribbons = g.append("g")
                .attr("class", "ribbons")
                .selectAll("path")
                .data(function (chords) {
                    return chords;
                })
                .enter();
​
            ribbons.append("path")
                .attr("d", ribbon)
                .style("fill", function (d) {
                    return color(d.target.index);
                })
                .style("stroke", function (d) {
                    return d3.rgb(color(d.target.index)).darker();
                }).append("svg:title")
                .text(function (d) {
                    console.log(d);
                    return "From : " + d.source.index + ";" + d.source.value + " To : " + d.target.index + ";" + d.target
                        .value
                })
​
            // Returns an array of tick angles and values for a given group and step.
            function groupTicks(d, step) {
                var k = (d.endAngle - d.startAngle) / d.value;
                return d3.range(0, d.value, step).map(function (value) {
                    return {
                        value: value,
                        angle: value * k + d.startAngle
                    };
                });
            }
        }
    </script>
</body>
    