Matrix Generator

Using Mike Bostock's Chord Diagram to add in my custom matrix generator from csv. All functionality remains the same...

<!DOCTYPE html>

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

.ribbons {
    fill-opacity: 0.67;
  }
</style>

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>

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