D3 Examples - VI7 Matrix View

xxxxxxxxxx
 
<html>
<head>
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
<style>
html, body {
    height: 100%;
}
​
html {
    display: table;
    margin: auto;
}
​
body {
    display: table-cell;
    vertical-align: middle;
}
.background {
  fill: #eee;
}
​
line {
  stroke: #fff;
}
​
text.active {
  fill: red;
}
aside {
    text-align: right;
}
</style>
</head>
<body>
​
<aside style="margin-top:10px;">
<p>Order: <select id="order">
  <option value="name">Alphabetical</option>
  <option value="count">Number of Connections</option>
  <option value="group">Region</option>
</select>
    <script>
        var margin = {
            top : 30,
            right : 0,
            bottom : 5,
            left : 30
        }, width = 400, height = 400;
​
        var x = d3.scale.ordinal().rangeBands([ 0, width ]), z = d3.scale
                .linear().domain([ 0, 4 ]).clamp(true), c = d3.scale
                .category10().domain(d3.range(10));
​
        var svg = d3.select("body").append("svg").attr("width",
                width + margin.left + margin.right).attr("height",
                height + margin.top + margin.bottom).style("margin-left",
                -margin.left + "px").append("g").attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");
​
        d3
                .json(
                        "myData.json",
                        function(data) {
                            var matrix = [], nodes = data.nodes, n = nodes.length;
​
                            // Compute index per node.
                            nodes.forEach(function(node, i) {
                                node.index = i;
                                node.count = 0;
                                matrix[i] = d3.range(n).map(function(j) {
                                    return {
                                        x : j,
                                        y : i,
                                        z : 0
                                    };
                                });
                            });
​
                            // Convert links to matrix; count character occurrences.
                            data.links
                                    .forEach(function(link) {
                                        matrix[link.source][link.target].z += 10;
                                        matrix[link.target][link.source].z += 10;
                                        matrix[link.source][link.source].z += 10;
                                        matrix[link.target][link.target].z += 10;
                                        nodes[link.source].count += 1;
                                        nodes[link.target].count += 1;
                                    });
​
                            // Precompute the orders.
                            var orders = {
                                name : d3.range(n).sort(
                                        function(a, b) {
                                            return d3.ascending(nodes[a].name,
                                                    nodes[b].name);
                                        }),
                                count : d3.range(n).sort(function(a, b) {
                                    return nodes[b].count - nodes[a].count;
                                }),
                                group : d3.range(n).sort(function(a, b) {
                                    return nodes[b].group - nodes[a].group;
                                })
                            };
​
                            // The default sort order.
                            x.domain(orders.name);
​
                            svg.append("rect").attr("class", "background")
                                    .attr("width", width)
                                    .attr("height", height);
​
                            var row = svg.selectAll(".row").data(matrix)
                                    .enter().append("g").attr("class", "row")
                                    .attr("transform", function(d, i) {
                                        return "translate(0," + x(i) + ")";
                                    }).each(row);
​
                            row.append("line").attr("x2", width);
​
                            row.append("text").attr("x", -6).attr("y",
                                    x.rangeBand() / 2).attr("dy", ".32em")
                                    .style("font-size", "8px")
                                    .attr("text-anchor", "end").text(
                                            function(d, i) {
                                                return nodes[i].abb;
                                            });
​
                            var column = svg.selectAll(".column").data(matrix)
                                    .enter().append("g")
                                    .attr("class", "column").attr(
                                            "transform",
                                            function(d, i) {
                                                return "translate(" + x(i)
                                                        + ")rotate(-90)";
                                            });
​
                            column.append("line").attr("x1", -width);
​
                            column.append("text").attr("x", 6).attr("y",
                                    x.rangeBand() / 2).attr("dy", ".32em")
                                    .style("font-size", "8px")
                                    .attr("text-anchor", "start").text(
                                            function(d, i) {
                                                return nodes[i].abb;
                                            });
​
                            function row(row) {
                                var cell = d3
                                        .select(this)
                                        .selectAll(".cell")
                                        .data(row.filter(function(d) {
                                            return d.z;
                                        }))
                                        .enter()
                                        .append("rect")
                                        .attr("class", "cell")
                                        .attr("x", function(d) {
                                            return x(d.x);
                                        })
                                        .attr("width", x.rangeBand())
                                        .attr("height", x.rangeBand())
                                        .style("fill-opacity", function(d) {
                                            return z(d.z);
                                        })
                                        .style(
                                                "fill",
                                                function(d) {
                                                    return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group)
                                                            : null;
                                                }).on("mouseover", mouseover)
                                        .on("mouseout", mouseout);
                            }
​
                            function mouseover(p) {
                                d3.selectAll(".row text").classed("active",
                                        function(d, i) {
                                            return i == p.y;
                                        });
                                d3.selectAll(".column text").classed("active",
                                        function(d, i) {
                                            return i == p.x;
                                        });
                            }
​
                            function mouseout() {
                                d3.selectAll("text").classed("active", false);
                            }
​
                            d3.select("#order").on("change", function() {
                                clearTimeout(timeout);
                                order(this.value);
                            });
​
                            function order(value) {
                                x.domain(orders[value]);
​
                                var t = svg.transition().duration(2500);
​
                                t.selectAll(".row").delay(function(d, i) {
                                    return x(i) * 4;
                                }).attr("transform", function(d, i) {
                                    return "translate(0," + x(i) + ")";
                                }).selectAll(".cell").delay(function(d) {
                                    return x(d.x) * 4;
                                }).attr("x", function(d) {
                                    return x(d.x);
                                });
​
                                t.selectAll(".column").delay(function(d, i) {
                                    return x(i) * 4;
                                }).attr(
                                        "transform",
                                        function(d, i) {
                                            return "translate(" + x(i)
                                                    + ")rotate(-90)";
                                        });
                            }
​
                            var timeout = setTimeout(function() {
                                order("group");
                                d3.select("#order")
                                        .property("selectedIndex", 2).node()
                                        .focus();
                            }, 5000);
                        });
    </script>
</body>
</html>
    