Dynamic Network Visualization

README.md

This force-directed graph visualizes teams that were formed around various projects. It allows the user to select which projects are displayed, altering the graph appropriately. Compare to this, which allows altering the graph parameters.

dynamic-0.json

{"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":[
]}

dynamic-1.json

{"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}
]}

dynamic-2.json

{"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}
]}

dynamic-3.json

{"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}]}

dynamic.css

* {
  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;
}

dynamic.js

$(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);
});

index.html

<!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>

reset.css

/* 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;
}

thumbnail.png