Skip to content

Instantly share code, notes, and snippets.

@abhishekpolavarapu

abhishekpolavarapu/README.md

Last active March 16, 2016 03:41
Show Gist options
  • Save abhishekpolavarapu/aa7db913289798cb80f2 to your computer and use it in GitHub Desktop.
Save abhishekpolavarapu/aa7db913289798cb80f2 to your computer and use it in GitHub Desktop.
Download ZIP
VI7 Matrix view
Raw
README.md

Using matrix view we can find out the states which are adjacent to each other when we select ordering by name. When ordering by frequency is choosen the state which has maximum number of connections is displayed first ie. tennessee has more number of adjacent states whereas Maine has only one adjacent state(New Hampshire).

Raw
data.json
{
"nodes":[
{"abb":"AL","name":"Alabama","region":"East South Central","group":6},
{"abb":"AR","name":"Arkansas","region":"West South Central","group":7},
{"abb":"AZ","name":"Arizona","region":"Mountain","group":8},
{"abb":"CA","name":"California","region":"Pacific","group":9},
{"abb":"CO","name":"Colorado","region":"Mountain","group":8},
{"abb":"CT","name":"Connecticut","region":"New England","group":1},
{"abb":"DC","name":"DC","region":"South Atlantic","group":5},
{"abb":"DE","name":"Delaware","region":"South Atlantic","group":5},
{"abb":"FL","name":"Florida","region":"South Atlantic","group":5},
{"abb":"GA","name":"Georgia","region":"South Atlantic","group":5},
{"abb":"IA","name":"Iowa","region":"West North Central","group":4},
{"abb":"ID","name":"Idaho","region":"Mountain","group":8},
{"abb":"IL","name":"Illinois","region":"East North Central","group":3},
{"abb":"IN","name":"Indiana","region":"East North Central","group":3},
{"abb":"KS","name":"Kansas","region":"West North Central","group":4},
{"abb":"KY","name":"Kentucky","region":"East South Central","group":6},
{"abb":"LA","name":"Louisiana","region":"West South Central","group":7},
{"abb":"MA","name":"Massachusetts","region":"New England","group":1},
{"abb":"MD","name":"Maryland","region":"South Atlantic","group":5},
{"abb":"ME","name":"Maine","region":"New England","group":1},
{"abb":"MI","name":"Michigan","region":"East North Central","group":3},
{"abb":"MN","name":"Minnesota","region":"West North Central","group":4},
{"abb":"MO","name":"Missouri","region":"West North Central","group":7},
{"abb":"MS","name":"Mississippi","region":"East South Central","group":6},
{"abb":"MT","name":"Montana","region":"Mountain","group":8},
{"abb":"NC","name":"North Carolina","region":"South Atlantic","group":5},
{"abb":"ND","name":"North Dakota","region":"West North Central","group":4},
{"abb":"NE","name":"Nebraska","region":"West North Central","group":4},
{"abb":"NH","name":"New Hampshire","region":"New England","group":1},
{"abb":"NJ","name":"New Jersey","region":"Middle Atlantic","group":2},
{"abb":"NM","name":"New Mexico","region":"Mountain","group":8},
{"abb":"NV","name":"Nevada","region":"Mountain","group":8},
{"abb":"NY","name":"New York","region":"Middle Atlantic","group":2},
{"abb":"OH","name":"Ohio","region":"East North Central","group":3},
{"abb":"OK","name":"Oklahoma","region":"West South Central","group":7},
{"abb":"OR","name":"Oregon","region":"Pacific","group":9},
{"abb":"PA","name":"Pennsylvania","region":"Middle Atlantic","group":2},
{"abb":"RI","name":"Rhode Island","region":"New England","group":1},
{"abb":"SC","name":"South Carolina","region":"South Atlantic","group":5},
{"abb":"SD","name":"South Dakota","region":"West North Central","group":4},
{"abb":"TN","name":"Tennessee","region":"East South Central","group":6},
{"abb":"TX","name":"Texas","region":"West South Central","group":7},
{"abb":"UT","name":"Utah","region":"Mountain","group":8},
{"abb":"VA","name":"Virginia","region":"South Atlantic","group":5},
{"abb":"VT","name":"Vermont","region":"New England","group":1},
{"abb":"WA","name":"Washington","region":"Pacific","group":9},
{"abb":"WI","name":"Wisconsin","region":"East North Central","group":3},
{"abb":"WV","name":"West Virginia","region":"South Atlantic","group":5},
{"abb":"WY","name":"Wyoming","region":"Mountain","group":8}
],
"links":[
{"source":0,"target":8,"value":5},
{"source":0,"target":9,"value":5},
{"source":0,"target":23,"value":5},
{"source":0,"target":40,"value":5},
{"source":1,"target":16,"value":5},
{"source":1,"target":22,"value":5},
{"source":1,"target":23,"value":5},
{"source":1,"target":34,"value":5},
{"source":1,"target":40,"value":5},
{"source":1,"target":41,"value":5},
{"source":2,"target":3,"value":5},
{"source":2,"target":30,"value":5},
{"source":2,"target":31,"value":5},
{"source":2,"target":42,"value":5},
{"source":3,"target":31,"value":5},
{"source":3,"target":35,"value":5},
{"source":4,"target":14,"value":5},
{"source":4,"target":27,"value":5},
{"source":4,"target":30,"value":5},
{"source":4,"target":34,"value":5},
{"source":4,"target":42,"value":5},
{"source":4,"target":48,"value":5},
{"source":5,"target":17,"value":5},
{"source":5,"target":32,"value":5},
{"source":5,"target":37,"value":5},
{"source":6,"target":18,"value":5},
{"source":6,"target":43,"value":5},
{"source":7,"target":18,"value":5},
{"source":7,"target":29,"value":5},
{"source":7,"target":36,"value":5},
{"source":8,"target":9,"value":5},
{"source":9,"target":25,"value":5},
{"source":9,"target":38,"value":5},
{"source":9,"target":40,"value":5},
{"source":10,"target":12,"value":5},
{"source":10,"target":21,"value":5},
{"source":10,"target":22,"value":5},
{"source":10,"target":27,"value":5},
{"source":10,"target":39,"value":5},
{"source":10,"target":46,"value":5},
{"source":11,"target":24,"value":5},
{"source":11,"target":31,"value":5},
{"source":11,"target":35,"value":5},
{"source":11,"target":42,"value":5},
{"source":11,"target":45,"value":5},
{"source":11,"target":48,"value":5},
{"source":12,"target":13,"value":5},
{"source":12,"target":15,"value":5},
{"source":12,"target":22,"value":5},
{"source":12,"target":46,"value":5},
{"source":13,"target":15,"value":5},
{"source":13,"target":20,"value":5},
{"source":13,"target":33,"value":5},
{"source":14,"target":22,"value":5},
{"source":14,"target":27,"value":5},
{"source":14,"target":34,"value":5},
{"source":15,"target":22,"value":5},
{"source":15,"target":33,"value":5},
{"source":15,"target":40,"value":5},
{"source":15,"target":43,"value":5},
{"source":15,"target":47,"value":5},
{"source":16,"target":23,"value":5},
{"source":16,"target":41,"value":5},
{"source":17,"target":28,"value":5},
{"source":17,"target":32,"value":5},
{"source":17,"target":37,"value":5},
{"source":17,"target":44,"value":5},
{"source":18,"target":36,"value":5},
{"source":18,"target":43,"value":5},
{"source":18,"target":47,"value":5},
{"source":19,"target":28,"value":5},
{"source":20,"target":33,"value":5},
{"source":20,"target":46,"value":5},
{"source":21,"target":26,"value":5},
{"source":21,"target":39,"value":5},
{"source":21,"target":46,"value":5},
{"source":22,"target":27,"value":5},
{"source":22,"target":34,"value":5},
{"source":22,"target":40,"value":5},
{"source":23,"target":40,"value":5},
{"source":24,"target":26,"value":5},
{"source":24,"target":39,"value":5},
{"source":24,"target":48,"value":5},
{"source":25,"target":38,"value":5},
{"source":25,"target":40,"value":5},
{"source":25,"target":43,"value":5},
{"source":26,"target":39,"value":5},
{"source":27,"target":39,"value":5},
{"source":27,"target":48,"value":5},
{"source":28,"target":44,"value":5},
{"source":29,"target":32,"value":5},
{"source":29,"target":36,"value":5},
{"source":30,"target":34,"value":5},
{"source":30,"target":41,"value":5},
{"source":31,"target":35,"value":5},
{"source":31,"target":42,"value":5},
{"source":32,"target":36,"value":5},
{"source":32,"target":44,"value":5},
{"source":33,"target":36,"value":5},
{"source":33,"target":47,"value":5},
{"source":34,"target":41,"value":5},
{"source":35,"target":45,"value":5},
{"source":36,"target":47,"value":5},
{"source":39,"target":48,"value":5},
{"source":40,"target":43,"value":5},
{"source":42,"target":48,"value":5},
{"source":43,"target":47,"value":5}
]
}
Raw
index.html
<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<style>
@import url(../style.css?aea6f0a);
.background {
fill: #eee;
}
line {
stroke: #fff;
}
text.active {
fill: red;
}
</style>
<script src="//d3js.org/d3.v2.min.js" charset="utf-8"></script>
<aside style="margin-top:80px;">
<p>Order: <select id="order">
<option value="name">by Name</option>
<option value="count">by Frequency</option>
<option value="group">by Cluster</option>
</select>
</aside>
<script>
var margin = {top: 80, right: 150, bottom: 10, left: 80},
width = 720,
height = 720;
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-right", -margin.right + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", function(miserables) {
var matrix = [],
nodes = miserables.nodes,
n = nodes.length;
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}; });
});
miserables.links.forEach(function(link) {
matrix[link.source][link.target].z += link.value;
matrix[link.target][link.source].z += link.value;
nodes[link.source].count += link.value;
nodes[link.target].count += link.value;
});
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; })
};
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment