-
-
Save hakbailey/c2e7171be83cfd2d93ec to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
### Dynamic Networks | |
This visualization plots people and projects around the MIT Libraries, with the ability to highlight specific project teams. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"nodes":[ | |
{"name":"EDS Transition","group":2}, | |
{"name":"Makerlib","group":2}, | |
{"name":"OA Stats","group":2}, | |
{"name":"SFX Menu","group":2}, | |
{"name":"Chomsky","group":2}, | |
{"name":"Digital Preservation","group":2}, | |
{"name":"DSpace","group":2}, | |
{"name":"Dome","group":2}, | |
{"name":"Homepage","group":2}, | |
{"name":"Informatics","group":2}, | |
{"name":"Wordpress","group":2}, | |
{"name":"bturner","group":1}, | |
{"name":"carlj","group":1}, | |
{"name":"cttorres","group":1}, | |
{"name":"darcy","group":4}, | |
{"name":"efinnie","group":1}, | |
{"name":"escience","group":1}, | |
{"name":"feiden","group":4}, | |
{"name":"gmac","group":4}, | |
{"name":"hartman","group":4}, | |
{"name":"hdenny","group":1}, | |
{"name":"klangley","group":1}, | |
{"name":"lisah","group":1}, | |
{"name":"lorriem","group":1}, | |
{"name":"mgraves","group":3}, | |
{"name":"mjbernha","group":3}, | |
{"name":"nancymcg","group":1}, | |
{"name":"ninadm","group":1}, | |
{"name":"orbitee","group":1}, | |
{"name":"pcohn","group":1}, | |
{"name":"remlee","group":4}, | |
{"name":"rrodgers","group":3}, | |
{"name":"rwenger","group":1}, | |
{"name":"sands","group":3}, | |
{"name":"sgass","group":1}, | |
{"name":"shapiror","group":1}, | |
{"name":"smithkr","group":1}, | |
{"name":"sthomas","group":1}, | |
{"name":"ter","group":1}, | |
{"name":"vab","group":1}, | |
{"name":"zgreen","group":4} | |
],"links":[ | |
]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"nodes":[ | |
{"name":"EDS Transition","group":2}, | |
{"name":"Makerlib","group":2}, | |
{"name":"OA Stats","group":2}, | |
{"name":"SFX Menu","group":2}, | |
{"name":"Chomsky","group":2}, | |
{"name":"Digital Preservation","group":2}, | |
{"name":"DSpace","group":2}, | |
{"name":"Dome","group":2}, | |
{"name":"Homepage","group":2}, | |
{"name":"Informatics","group":2}, | |
{"name":"Wordpress","group":2}, | |
{"name":"bturner","group":1}, | |
{"name":"carlj","group":1}, | |
{"name":"cttorres","group":1}, | |
{"name":"darcy","group":4}, | |
{"name":"efinnie","group":1}, | |
{"name":"escience","group":1}, | |
{"name":"feiden","group":4}, | |
{"name":"gmac","group":4}, | |
{"name":"hartman","group":4}, | |
{"name":"hdenny","group":1}, | |
{"name":"klangley","group":1}, | |
{"name":"lisah","group":1}, | |
{"name":"lorriem","group":1}, | |
{"name":"mgraves","group":3}, | |
{"name":"mjbernha","group":3}, | |
{"name":"nancymcg","group":1}, | |
{"name":"ninadm","group":1}, | |
{"name":"orbitee","group":1}, | |
{"name":"pcohn","group":1}, | |
{"name":"remlee","group":4}, | |
{"name":"rrodgers","group":3}, | |
{"name":"rwenger","group":1}, | |
{"name":"sands","group":3}, | |
{"name":"sgass","group":1}, | |
{"name":"shapiror","group":1}, | |
{"name":"smithkr","group":1}, | |
{"name":"sthomas","group":1}, | |
{"name":"ter","group":1}, | |
{"name":"vab","group":1}, | |
{"name":"zgreen","group":4} | |
],"links":[ | |
{"source":17,"target":0,"value":1}, | |
{"source":25,"target":0,"value":1}, | |
{"source":27,"target":0,"value":1}, | |
{"source":28,"target":0,"value":1}, | |
{"source":32,"target":0,"value":1} | |
]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"nodes":[ | |
{"name":"EDS Transition","group":2}, | |
{"name":"Makerlib","group":2}, | |
{"name":"OA Stats","group":2}, | |
{"name":"SFX Menu","group":2}, | |
{"name":"Chomsky","group":2}, | |
{"name":"Digital Preservation","group":2}, | |
{"name":"DSpace","group":2}, | |
{"name":"Dome","group":2}, | |
{"name":"Homepage","group":2}, | |
{"name":"Informatics","group":2}, | |
{"name":"Wordpress","group":2}, | |
{"name":"bturner","group":1}, | |
{"name":"carlj","group":1}, | |
{"name":"cttorres","group":1}, | |
{"name":"darcy","group":4}, | |
{"name":"efinnie","group":1}, | |
{"name":"escience","group":1}, | |
{"name":"feiden","group":4}, | |
{"name":"gmac","group":4}, | |
{"name":"hartman","group":4}, | |
{"name":"hdenny","group":1}, | |
{"name":"klangley","group":1}, | |
{"name":"lisah","group":1}, | |
{"name":"lorriem","group":1}, | |
{"name":"mgraves","group":3}, | |
{"name":"mjbernha","group":3}, | |
{"name":"nancymcg","group":1}, | |
{"name":"ninadm","group":1}, | |
{"name":"orbitee","group":1}, | |
{"name":"pcohn","group":1}, | |
{"name":"remlee","group":4}, | |
{"name":"rrodgers","group":3}, | |
{"name":"rwenger","group":1}, | |
{"name":"sands","group":3}, | |
{"name":"sgass","group":1}, | |
{"name":"shapiror","group":1}, | |
{"name":"smithkr","group":1}, | |
{"name":"sthomas","group":1}, | |
{"name":"ter","group":1}, | |
{"name":"vab","group":1}, | |
{"name":"zgreen","group":4} | |
],"links":[ | |
{"source":13,"target":4,"value":1}, | |
{"source":20,"target":4,"value":1}, | |
{"source":21,"target":4,"value":1}, | |
{"source":25,"target":4,"value":1} | |
]} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
padding: 0; | |
margin: 0; | |
font-family: Arial, sans-serif; | |
} | |
body { | |
background-color: #f2f2f2; | |
font-family: Arial, sans-serif; | |
} | |
h1 { | |
margin: 0 1rem 1rem 1rem; | |
font-weight: bold; | |
font-size: 2rem; | |
} | |
h2 { | |
font-weight: normal; | |
border-bottom: 1px solid #ccc; | |
font-size: 1.5rem; | |
margin: 2rem 0 0.5rem 0; | |
} | |
p { | |
margin: 1rem; | |
} | |
ul { | |
margin: 0.5rem; | |
} | |
li { | |
display: inline-block; | |
margin: 0.5rem; | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
background: #f2f2f2; | |
padding: 0.25rem; | |
} | |
#page { | |
margin: 10px auto; | |
padding: 10px; | |
max-width: 960px; | |
border: 1px solid #ddd; | |
background: #fff; | |
} | |
#chart { | |
background-color: #f2f2f2; | |
border: 1px solid #959595; | |
margin: 0 1rem 1rem 1rem; | |
} | |
circle.node { | |
stroke: #fff; | |
stroke-width: 1.5px; | |
} | |
line.link { | |
stroke: #999; | |
stroke-opacity: .6; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html;charset=utf-8"> | |
<title>Dynamic Networks | d3.js Force-Directed Graph</title> | |
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<link rel="stylesheet" type="text/css" href="reset.css"> | |
<link rel="stylesheet" type="text/css" href="dynamic.css"> | |
</head> | |
<body> | |
<div id="page"> | |
<ul class="toggles"> | |
<li> | |
<input type="radio" name="project" id="p0" value="0"> | |
<label for="p0">No Projects</label> | |
</li> | |
<li> | |
<input type="radio" name="project" id="p1" value="1"> | |
<label for="p1">EDS Transition</label> | |
</li> | |
<li> | |
<input type="radio" name="project" id="p2" value="2" checked="checked"> | |
<label for="p2">Chomsky Fundraising</label> | |
</li> | |
</ul> | |
<div class='gallery' id='chart'> </div> | |
<script> | |
$(document).ready( function() { | |
var w, h, fill; | |
w = $("#page").width(); | |
h = w * ( 3 / 4 ); | |
fill = d3.scale.category20(); | |
var nodes = [], | |
links = []; | |
var force = d3.layout.force() | |
.nodes(nodes) | |
.links(links) | |
.charge(-400) | |
.linkDistance(120) | |
.size([w, h]) | |
.on("tick", tick); | |
var vis = d3.select("#chart") | |
.append("svg:svg") | |
.attr("width", w) | |
.attr("height", h); | |
vis.style("opacity", 1e-6) | |
.transition() | |
.duration(1000) | |
.style("opacity", 1); | |
var node = vis.selectAll(".node"), | |
link = vis.selectAll(".link"); | |
var plot = function(thing) { | |
console.log('Plotting ' + thing); | |
d3.json("dynamic-" + thing + ".json", function(json) { | |
// Debug what's coming in as JSON | |
console.log(json); | |
console.log(json["nodes"].length); | |
console.log(json["links"].length); | |
if (nodes.length == 0) { | |
for (var i in json.nodes) { | |
nodes.push(json.nodes[i]); | |
}; | |
}; | |
links.length = 0; | |
for (var i in json.links) { | |
links.push(json.links[i]); | |
}; | |
update(); | |
}); | |
}; | |
plot(2); | |
function update() { | |
link = link.data(force.links(), function(d) { return d.source + "-" + d.target; }); | |
link.enter().append("svg:line"); | |
link.attr("class", "link") | |
.style("stroke-width", function(d) { return Math.sqrt(d.value); }) | |
.attr("x1", function(d) { return d.source.x; }) | |
.attr("y1", function(d) { return d.source.y; }) | |
.attr("x2", function(d) { return d.target.x; }) | |
.attr("y2", function(d) { return d.target.y; }); | |
link.exit().remove(); | |
node = node.data(force.nodes(), function(d) { return d.name; }); | |
node.enter().append("svg:circle"); | |
node.exit().remove(); | |
node.attr("class", "node") | |
.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }) | |
.attr("r", 5) | |
.style("fill", function(d) { return fill(d.group); }) | |
.call(force.drag); | |
node.append("svg:title") | |
.text(function(d) { return d.name; }); | |
force.start(); | |
}; | |
function tick() { | |
force.on("tick", function() { | |
link.attr("x1", function(d) { return d.source.x; }) | |
.attr("y1", function(d) { return d.source.y; }) | |
.attr("x2", function(d) { return d.target.x; }) | |
.attr("y2", function(d) { return d.target.y; }); | |
node.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }); | |
}); | |
}; | |
$("ul.toggles li input").click(function() { | |
var theValue = $(this).attr("value"); | |
console.log('Click ' + theValue); | |
plot(theValue); | |
}); | |
}); | |
</script> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* http://meyerweb.com/eric/tools/css/reset/ | |
v2.0 | 20110126 | |
License: none (public domain) | |
*/ | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment