Skip to content

Instantly share code, notes, and snippets.

@matt-bernhardt
Last active December 30, 2015 17:14
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save matt-bernhardt/32ad5d557471f3a00703 to your computer and use it in GitHub Desktop.
Dynamic Network Visualization
{"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":[
]}
{"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}
]}
{"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}
]}
{"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":11,"target":6,"value":1},
{"source":11,"target":7,"value":1},
{"source":12,"target":2,"value":1},
{"source":12,"target":6,"value":1},
{"source":13,"target":4,"value":1},
{"source":14,"target":3,"value":1},
{"source":14,"target":7,"value":1},
{"source":14,"target":8,"value":1},
{"source":14,"target":10,"value":1},
{"source":15,"target":2,"value":1},
{"source":16,"target":1,"value":1},
{"source":16,"target":5,"value":1},
{"source":16,"target":9,"value":1},
{"source":17,"target":0,"value":1},
{"source":17,"target":3,"value":1},
{"source":17,"target":8,"value":1},
{"source":17,"target":10,"value":1},
{"source":18,"target":8,"value":1},
{"source":18,"target":10,"value":1},
{"source":19,"target":8,"value":1},
{"source":19,"target":10,"value":1},
{"source":20,"target":4,"value":1},
{"source":20,"target":8,"value":1},
{"source":21,"target":4,"value":1},
{"source":22,"target":8,"value":1},
{"source":23,"target":7,"value":1},
{"source":24,"target":2,"value":1},
{"source":25,"target":0,"value":1},
{"source":25,"target":1,"value":1},
{"source":25,"target":2,"value":1},
{"source":25,"target":3,"value":1},
{"source":25,"target":4,"value":1},
{"source":25,"target":5,"value":1},
{"source":25,"target":6,"value":1},
{"source":25,"target":7,"value":1},
{"source":25,"target":8,"value":1},
{"source":25,"target":9,"value":1},
{"source":25,"target":10,"value":1},
{"source":26,"target":5,"value":1},
{"source":27,"target":0,"value":1},
{"source":28,"target":0,"value":1},
{"source":29,"target":8,"value":1},
{"source":30,"target":8,"value":1},
{"source":30,"target":10,"value":1},
{"source":31,"target":2,"value":1},
{"source":31,"target":6,"value":1},
{"source":32,"target":0,"value":1},
{"source":32,"target":3,"value":1},
{"source":33,"target":2,"value":1},
{"source":33,"target":6,"value":1},
{"source":34,"target":8,"value":1},
{"source":35,"target":1,"value":1},
{"source":35,"target":9,"value":1},
{"source":36,"target":5,"value":1},
{"source":37,"target":2,"value":1},
{"source":37,"target":6,"value":1},
{"source":38,"target":10,"value":1},
{"source":39,"target":2,"value":1},
{"source":39,"target":6,"value":1},
{"source":40,"target":8,"value":1},
{"source":40,"target":10,"value":1}]}
* {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
body {
font-family: Arial, sans-serif;
}
ul {
margin: 0.25rem;
}
li {
display: inline-block;
margin: 0.25rem;
border: 1px solid #ccc;
background: #f2f2f2;
padding: 0.25rem;
}
#page {
max-width: 960px;
}
circle.node {
stroke: #fff;
stroke-width: 1.5px;
}
line.link {
stroke: #999;
stroke-opacity: .6;
}
$(document).ready( function() {
var w, h, fill;
w = $("#page").width();
h = 450;
fill = d3.scale.category20();
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
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);
var force = d3.layout.force()
.charge(-100)
.linkDistance(60)
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.start();
var link = vis.selectAll("line.link")
.data(json.links);
link.enter().append("svg:line");
link.exit().remove();
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; });
var node = vis.selectAll("circle.node")
.data(json.nodes);
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; });
vis.style("opacity", 1e-6)
.transition()
.duration(1000)
.style("opacity", 1);
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);
});
plot(2);
});
<!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>
<li>
<input type="radio" name="project" id="p3" value="3">
<label for="p3">All</label>
</li>
</ul>
<div class='gallery' id='chart'> </div>
</div>
<script type="text/javascript" src="dynamic.js"></script>
</body>
</html>
/* 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