Skip to content

Instantly share code, notes, and snippets.

@srinivashavanur

srinivashavanur/README.md

Last active April 3, 2016 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srinivashavanur/155d3602465fe8f298d7 to your computer and use it in GitHub Desktop.
Save srinivashavanur/155d3602465fe8f298d7 to your computer and use it in GitHub Desktop.
Download ZIP
Visual Impementation 7 (Matrix View)
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Matrix View</title>
<style>
@import url(style.css);
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.background {
fill: #eee;
}
line {
stroke: #fff;
}
text.active {
fill: red;
}
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
.legend rect {
fill:white;
stroke:black;
opacity:0.8;
}
</style>
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.legend.js"></script>
<body>
<h1>Matrix View</h1>
<p>Order: <select id="order">
<option value="name">by Name</option>
<option value="count">by Number of Connections</option>
<option value="group">by Cluster</option>
</select>
<script>
var margin = {top: 80, right: 0, bottom: 10, left: 80},
width = 720,
height = 720;
d3.select(self.frameElement).style("height", "1000px");
var x = d3.scale.ordinal().rangeBands([0, width]),
z = d3.scale.linear().domain([0, 2]).clamp(true),
c = d3.scale.category20().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("USstates.json", function(miserables) {
var matrix = [],
nodes = miserables.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.
miserables.links.forEach(function(link) {
matrix[link.source][link.target].z += link.value;
matrix[link.target][link.source].z += link.value;
matrix[link.source][link.source].z += link.value;
matrix[link.target][link.target].z += link.value;
nodes[link.source].count += link.value;
nodes[link.target].count += link.value;
});
// 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")
.attr("text-anchor", "end")
.text(function(d, i) { return nodes[i].name; });
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")
.attr("text-anchor", "start")
.text(function(d, i) { return nodes[i].name; });
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>
Raw
USstates.json
{"nodes": [
{"group": 1, "name": "AL", "category":"A"},
{"group": 1, "name": "AR", "category":"A"},
{"group": 1, "name": "AZ", "category":"A"},
{"group": 2, "name": "CA", "category":"C"},
{"group": 2, "name": "CO", "category":"C"},
{"group": 2, "name": "CT", "category":"C"},
{"group": 3, "name": "DC", "category":"D"},
{"group": 3, "name": "DE", "category":"D"},
{"group": 4, "name": "FL", "category":"F"},
{"group": 5, "name": "GA", "category":"G"},
{"group": 6, "name": "IA", "category":"I"},
{"group": 6, "name": "ID", "category":"I"},
{"group": 6, "name": "IL", "category":"I"},
{"group": 6, "name": "IN", "category":"I"},
{"group": 7, "name": "KS", "category":"K"},
{"group": 7, "name": "KY", "category":"K"},
{"group": 8, "name": "LA", "category":"L"},
{"group": 9, "name": "MA", "category":"M"},
{"group": 9, "name": "MD", "category":"M"},
{"group": 9, "name": "ME", "category":"M"},
{"group": 9, "name": "MI", "category":"M"},
{"group": 9, "name": "MN", "category":"M"},
{"group": 9, "name": "MO", "category":"M"},
{"group": 9, "name": "MS", "category":"M"},
{"group": 9, "name": "MT", "category":"M"},
{"group": 10, "name": "NC", "category":"N"},
{"group": 10, "name": "ND", "category":"N"},
{"group": 10, "name": "NE", "category":"N"},
{"group": 10, "name": "NH", "category":"N"},
{"group": 10, "name": "NJ", "category":"N"},
{"group": 10, "name": "NM", "category":"N"},
{"group": 10, "name": "NV", "category":"N"},
{"group": 10, "name": "NY", "category":"N"},
{"group": 11, "name": "OH", "category":"O"},
{"group": 11, "name": "OK", "category":"O"},
{"group": 11, "name": "OR", "category":"O"},
{"group": 12, "name": "PA", "category":"P"},
{"group": 13, "name": "RI", "category":"R"},
{"group": 14, "name": "SC", "category":"S"},
{"group": 14, "name": "SD", "category":"S"},
{"group": 15, "name": "TN", "category":"T"},
{"group": 15, "name": "TX", "category":"T"},
{"group": 16, "name": "UT", "category":"U"},
{"group": 17, "name": "VA", "category":"V"},
{"group": 17, "name": "VT", "category":"V"},
{"group": 18, "name": "WA", "category":"W"},
{"group": 18, "name": "WI", "category":"W"},
{"group": 18, "name": "WV", "category":"W"},
{"group": 18, "name": "WY", "category":"W"}
],
"links": [
{"source": 0, "target": 8, "value": 1},
{"source": 0, "target": 9, "value": 1},
{"source": 0, "target": 23, "value": 1},
{"source": 0, "target": 40, "value": 1},
{"source": 1, "target": 16, "value": 1},
{"source": 1, "target": 22, "value": 1},
{"source": 1, "target": 23, "value": 1},
{"source": 1, "target": 34, "value": 1},
{"source": 1, "target": 40, "value": 1},
{"source": 1, "target": 41, "value": 1},
{"source": 2, "target": 3, "value": 1},
{"source": 2, "target": 30, "value": 1},
{"source": 2, "target": 31, "value": 1},
{"source": 2, "target": 42, "value": 1},
{"source": 3, "target": 31, "value": 1},
{"source": 3, "target": 35, "value": 1},
{"source": 4, "target": 14, "value": 1},
{"source": 4, "target": 27, "value": 1},
{"source": 4, "target": 30, "value": 1},
{"source": 4, "target": 34, "value": 1},
{"source": 4, "target": 42, "value": 1},
{"source": 4, "target": 48, "value": 1},
{"source": 5, "target": 17, "value": 1},
{"source": 5, "target": 32, "value": 1},
{"source": 5, "target": 37, "value": 1},
{"source": 6, "target": 18, "value": 1},
{"source": 6, "target": 43, "value": 1},
{"source": 7, "target": 18, "value": 1},
{"source": 7, "target": 29, "value": 1},
{"source": 7, "target": 36, "value": 1},
{"source": 8, "target": 9, "value": 1},
{"source": 9, "target": 25, "value": 1},
{"source": 9, "target": 38, "value": 1},
{"source": 9, "target": 40, "value": 1},
{"source": 10, "target": 12, "value": 1},
{"source": 10, "target": 21, "value": 1},
{"source": 10, "target": 22, "value": 1},
{"source": 10, "target": 27, "value": 1},
{"source": 10, "target": 39, "value": 1},
{"source": 10, "target": 46, "value": 1},
{"source": 11, "target": 24, "value": 1},
{"source": 11, "target": 31, "value": 1},
{"source": 11, "target": 35, "value": 1},
{"source": 11, "target": 42, "value": 1},
{"source": 11, "target": 45, "value": 1},
{"source": 11, "target": 48, "value": 1},
{"source": 12, "target": 13, "value": 1},
{"source": 12, "target": 15, "value": 1},
{"source": 12, "target": 22, "value": 1},
{"source": 12, "target": 46, "value": 1},
{"source": 13, "target": 15, "value": 1},
{"source": 13, "target": 20, "value": 1},
{"source": 13, "target": 33, "value": 1},
{"source": 14, "target": 22, "value": 1},
{"source": 14, "target": 27, "value": 1},
{"source": 14, "target": 34, "value": 1},
{"source": 15, "target": 22, "value": 1},
{"source": 15, "target": 33, "value": 1},
{"source": 15, "target": 40, "value": 1},
{"source": 15, "target": 43, "value": 1},
{"source": 15, "target": 47, "value": 1},
{"source": 16, "target": 23, "value": 1},
{"source": 16, "target": 41, "value": 1},
{"source": 17, "target": 28, "value": 1},
{"source": 17, "target": 32, "value": 1},
{"source": 17, "target": 37, "value": 1},
{"source": 17, "target": 44, "value": 1},
{"source": 18, "target": 36, "value": 1},
{"source": 18, "target": 43, "value": 1},
{"source": 18, "target": 47, "value": 1},
{"source": 19, "target": 28, "value": 1},
{"source": 20, "target": 33, "value": 1},
{"source": 20, "target": 46, "value": 1},
{"source": 21, "target": 26, "value": 1},
{"source": 21, "target": 39, "value": 1},
{"source": 21, "target": 46, "value": 1},
{"source": 22, "target": 27, "value": 1},
{"source": 22, "target": 34, "value": 1},
{"source": 22, "target": 40, "value": 1},
{"source": 23, "target": 40, "value": 1},
{"source": 24, "target": 26, "value": 1},
{"source": 24, "target": 39, "value": 1},
{"source": 24, "target": 48, "value": 1},
{"source": 25, "target": 38, "value": 1},
{"source": 25, "target": 40, "value": 1},
{"source": 25, "target": 43, "value": 1},
{"source": 26, "target": 39, "value": 1},
{"source": 27, "target": 39, "value": 1},
{"source": 27, "target": 48, "value": 1},
{"source": 28, "target": 44, "value": 1},
{"source": 29, "target": 32, "value": 1},
{"source": 29, "target": 36, "value": 1},
{"source": 30, "target": 34, "value": 1},
{"source": 30, "target": 41, "value": 1},
{"source": 31, "target": 35, "value": 1},
{"source": 31, "target": 42, "value": 1},
{"source": 32, "target": 36, "value": 1},
{"source": 32, "target": 44, "value": 1},
{"source": 33, "target": 36, "value": 1},
{"source": 33, "target": 47, "value": 1},
{"source": 34, "target": 41, "value": 1},
{"source": 35, "target": 45, "value": 1},
{"source": 36, "target": 47, "value": 1},
{"source": 39, "target": 48, "value": 1},
{"source": 40, "target": 43, "value": 1},
{"source": 42, "target": 48, "value": 1},
{"source": 43, "target": 47, "value": 1}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment