Skip to content

Instantly share code, notes, and snippets.

@PaladhiDinesh

PaladhiDinesh/Readme.md

Last active March 16, 2016 07:17
Show Gist options
  • Save PaladhiDinesh/1c247e7b25e7b6cc652f to your computer and use it in GitHub Desktop.
Save PaladhiDinesh/1c247e7b25e7b6cc652f to your computer and use it in GitHub Desktop.
Download ZIP
Matrix View - Visualization Implementation 7
Raw
Readme.md

###Insight gained:

  • We can order either by region or alphabetical order or number of links.
  • By ordering the states in alphabetical order, we can easily track down a state and its number of connections if we traverse through the particular row or column
  • By ordering the number of links we get the state with higher number of links on top left and least number of links on bottom right.
  • In all the orderings the states from the same region are with the same color.
Raw
gistfile1.txt
{
"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},
{"source":0,"target":9},
{"source":0,"target":23},
{"source":0,"target":40},
{"source":1,"target":16},
{"source":1,"target":22},
{"source":1,"target":23},
{"source":1,"target":34},
{"source":1,"target":40},
{"source":1,"target":41},
{"source":2,"target":3},
{"source":2,"target":30},
{"source":2,"target":31},
{"source":2,"target":42},
{"source":3,"target":31},
{"source":3,"target":35},
{"source":4,"target":14},
{"source":4,"target":27},
{"source":4,"target":30},
{"source":4,"target":34},
{"source":4,"target":42},
{"source":4,"target":48},
{"source":5,"target":17},
{"source":5,"target":32},
{"source":5,"target":37},
{"source":6,"target":18},
{"source":6,"target":43},
{"source":7,"target":18},
{"source":7,"target":29},
{"source":7,"target":36},
{"source":8,"target":9},
{"source":9,"target":25},
{"source":9,"target":38},
{"source":9,"target":40},
{"source":10,"target":12},
{"source":10,"target":21},
{"source":10,"target":22},
{"source":10,"target":27},
{"source":10,"target":39},
{"source":10,"target":46},
{"source":11,"target":24},
{"source":11,"target":31},
{"source":11,"target":35},
{"source":11,"target":42},
{"source":11,"target":45},
{"source":11,"target":48},
{"source":12,"target":13},
{"source":12,"target":15},
{"source":12,"target":22},
{"source":12,"target":46},
{"source":13,"target":15},
{"source":13,"target":20},
{"source":13,"target":33},
{"source":14,"target":22},
{"source":14,"target":27},
{"source":14,"target":34},
{"source":15,"target":22},
{"source":15,"target":33},
{"source":15,"target":40},
{"source":15,"target":43},
{"source":15,"target":47},
{"source":16,"target":23},
{"source":16,"target":41},
{"source":17,"target":28},
{"source":17,"target":32},
{"source":17,"target":37},
{"source":17,"target":44},
{"source":18,"target":36},
{"source":18,"target":43},
{"source":18,"target":47},
{"source":19,"target":28},
{"source":20,"target":33},
{"source":20,"target":46},
{"source":21,"target":26},
{"source":21,"target":39},
{"source":21,"target":46},
{"source":22,"target":27},
{"source":22,"target":34},
{"source":22,"target":40},
{"source":23,"target":40},
{"source":24,"target":26},
{"source":24,"target":39},
{"source":24,"target":48},
{"source":25,"target":38},
{"source":25,"target":40},
{"source":25,"target":43},
{"source":26,"target":39},
{"source":27,"target":39},
{"source":27,"target":48},
{"source":28,"target":44},
{"source":29,"target":32},
{"source":29,"target":36},
{"source":30,"target":34},
{"source":30,"target":41},
{"source":31,"target":35},
{"source":31,"target":42},
{"source":32,"target":36},
{"source":32,"target":44},
{"source":33,"target":36},
{"source":33,"target":47},
{"source":34,"target":41},
{"source":35,"target":45},
{"source":36,"target":47},
{"source":39,"target":48},
{"source":40,"target":43},
{"source":42,"target":48},
{"source":43,"target":47}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Matrix View of the adjacency between the contiguous US states and DC</title>
<style>
html,body,#wrapper {
width: 80%;
height: 80%;
margin: 0px;
padding: 5px 5px 5px 55px;
padding-top: 20px;
}
.chart {
font-family: Arial, sans-serif;
font-size: 12px;
}
.axis path,.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: #33b5e5;
}
.bar-failed {
fill: #CC0000;
}
.bar-running {
fill: #669900;
}
.bar-succeeded {
fill: #33b5e5;
}
.bar-killed {
fill: #ffbb33;
}
#header2 {
position: center;
top: 0;
left: 10px;
z-index: 10;
}
.background {
fill: #eee;
}
line {
stroke: #fff;
}
text.active {
fill: red;
}
</style>
<body>
<div >
<article style="width:1020px">
<h2 >Matrix View of the adjacency between the contiguous US states and DC</h2>
<div style="float:left">
<section id="header2" style="float:left;width:550px">
</section>
<aside style="font-style:italic;
float:right;width:250px;
margin: 5em auto auto auto;"
>
<p>Order: <select id="order">
<option value="name">By Name</option>
<option value="count">By Number of Links</option>
<option value="group">By Region</option>
</select>
</aside>
</article>
</div>
<script src="//d3js.org/d3.v2.min.js" charset="utf-8"></script>
<div style="float:left">
<script>
var margin = {top: 80, right: 180, bottom: 30, left: 80},
width = 550,
height = 550;
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("#header2").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("my_data.json", function(my_data) {
var matrix = [],
nodes = my_data.nodes,
links = my_data.links,
n = nodes.length,
sampleCategoricalData =[];
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}; });
});
links.forEach(function(link) {
matrix[link.source][link.target].z += 4;
matrix[link.target][link.source].z += 4;
nodes[link.source].count++;
nodes[link.target].count++;
sampleCategoricalData[nodes[link.source].group] = nodes[link.source].region;
});
sampleCategoricalData[0]="Different Region";
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[a].group - nodes[b].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) : c(0); })
.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.selectAll("rect").attr("width",x.rangeBand());
d3.selectAll("rect").attr("height",x.rangeBand());
}
d3.select("#order").on("change", function() {
clearTimeout(timeout);
order(this.value);
});
function order(value) {
x.domain(orders[value]);
var t = svg.transition().duration(1500);
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();
}, 2000);
});
</script></div>
<svg width="1510" height="530" style="margin-left: -880px;">
<g transform="translate(880,250)" class="legend"><g class="legendCells" transform="translate(0,0)"><rect height="18" width="25" style="fill: rgb(31, 119, 180); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Different Region</text></g><g class="legendCells" transform="translate(0,23)"><rect height="18" width="25" style="fill: rgb(255, 127, 14); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">New England</text></g><g class="legendCells" transform="translate(0,46)"><rect height="18" width="25" style="fill: rgb(44, 160, 44); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Middle Atlantic</text></g><g class="legendCells" transform="translate(0,69)"><rect height="18" width="25" style="fill: rgb(214, 39, 40); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">East North Central</text></g><g class="legendCells" transform="translate(0,92)"><rect height="18" width="25" style="fill: rgb(148, 103, 189); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">West North Central</text></g><g class="legendCells" transform="translate(0,115)"><rect height="18" width="25" style="fill: rgb(140, 86, 75); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">South Atlantic</text></g><g class="legendCells" transform="translate(0,138)"><rect height="18" width="25" style="fill: rgb(227, 119, 194); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">East South Central</text></g><g class="legendCells" transform="translate(0,161)"><rect height="18" width="25" style="fill: rgb(127, 127, 127); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">West South Central</text></g><g class="legendCells" transform="translate(0,184)"><rect height="18" width="25" style="fill: rgb(188, 189, 34); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Mountain</text></g><g class="legendCells" transform="translate(0,207)"><rect height="18" width="25" style="fill: rgb(23, 190, 207); stroke-width: 2px;"></rect><text x="30" y="10" style="pointer-events: none;">Pacific</text></g><text y="-10" style="font-size: 15px;">Region by Color</text></g>
</div>
</body>
Raw
my_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},
{"source":0,"target":9},
{"source":0,"target":23},
{"source":0,"target":40},
{"source":1,"target":16},
{"source":1,"target":22},
{"source":1,"target":23},
{"source":1,"target":34},
{"source":1,"target":40},
{"source":1,"target":41},
{"source":2,"target":3},
{"source":2,"target":30},
{"source":2,"target":31},
{"source":2,"target":42},
{"source":3,"target":31},
{"source":3,"target":35},
{"source":4,"target":14},
{"source":4,"target":27},
{"source":4,"target":30},
{"source":4,"target":34},
{"source":4,"target":42},
{"source":4,"target":48},
{"source":5,"target":17},
{"source":5,"target":32},
{"source":5,"target":37},
{"source":6,"target":18},
{"source":6,"target":43},
{"source":7,"target":18},
{"source":7,"target":29},
{"source":7,"target":36},
{"source":8,"target":9},
{"source":9,"target":25},
{"source":9,"target":38},
{"source":9,"target":40},
{"source":10,"target":12},
{"source":10,"target":21},
{"source":10,"target":22},
{"source":10,"target":27},
{"source":10,"target":39},
{"source":10,"target":46},
{"source":11,"target":24},
{"source":11,"target":31},
{"source":11,"target":35},
{"source":11,"target":42},
{"source":11,"target":45},
{"source":11,"target":48},
{"source":12,"target":13},
{"source":12,"target":15},
{"source":12,"target":22},
{"source":12,"target":46},
{"source":13,"target":15},
{"source":13,"target":20},
{"source":13,"target":33},
{"source":14,"target":22},
{"source":14,"target":27},
{"source":14,"target":34},
{"source":15,"target":22},
{"source":15,"target":33},
{"source":15,"target":40},
{"source":15,"target":43},
{"source":15,"target":47},
{"source":16,"target":23},
{"source":16,"target":41},
{"source":17,"target":28},
{"source":17,"target":32},
{"source":17,"target":37},
{"source":17,"target":44},
{"source":18,"target":36},
{"source":18,"target":43},
{"source":18,"target":47},
{"source":19,"target":28},
{"source":20,"target":33},
{"source":20,"target":46},
{"source":21,"target":26},
{"source":21,"target":39},
{"source":21,"target":46},
{"source":22,"target":27},
{"source":22,"target":34},
{"source":22,"target":40},
{"source":23,"target":40},
{"source":24,"target":26},
{"source":24,"target":39},
{"source":24,"target":48},
{"source":25,"target":38},
{"source":25,"target":40},
{"source":25,"target":43},
{"source":26,"target":39},
{"source":27,"target":39},
{"source":27,"target":48},
{"source":28,"target":44},
{"source":29,"target":32},
{"source":29,"target":36},
{"source":30,"target":34},
{"source":30,"target":41},
{"source":31,"target":35},
{"source":31,"target":42},
{"source":32,"target":36},
{"source":32,"target":44},
{"source":33,"target":36},
{"source":33,"target":47},
{"source":34,"target":41},
{"source":35,"target":45},
{"source":36,"target":47},
{"source":39,"target":48},
{"source":40,"target":43},
{"source":42,"target":48},
{"source":43,"target":47}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment