The current BGC ecosystem

<!DOCTYPE html>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=PT+Serif|PT+Serif:b|PT+Serif:i|PT+Sans|PT+Sans:b' rel='stylesheet' type='text/css'>
<style>

.header {
  font-family: "PT Sans", sans-serif;
  font-size: 32px;
  font-weight: 200;
  margin-left: 60px;
  color: #525252;
}

.hint {
 font-family: "Helvetica Neue", sans-serif;
 font-weight: 200;
 font-size: 12pt;
 margin-left: 68px;
  color: #ccc;
}

#force {
  padding-top: 30px;
}
.node {
  cursor: move;
  stroke: #ccc;
  stroke-width: 1;
}

.node.fixed {
  fill: #f00;
}

.node.partner {
  fill: #3062B3;
}

.node.topic {
  fill: #F2A900;
}

path.link {
  stroke-width: 1px;
  stroke: #ccc;
  fill: none;
}

span.topic {
  color: #F2A900;
}

span.partner {
  color: #3062B3;
}

.label.topic {
 font: 400 16pt "PT Sans", sans-serif;
 fill: #525252;
}

.label.partner {
  font: 400 22pt "PT Sans", sans-serif;
  fill: #3062B3;
}
</style>
<body>
<div class="header">The current ecosystem of proposed <span class="partner">BGC academic partners</span> and <span class="topic">shared research foci</span></div>
<div class="hint">hint: mouseover a node to see its connections; you can also drag the nodes around; reload the page to start over</div>
<div id="force"></div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
<script>

var width = 860,
    height = 600;

var force = d3.layout.force()
    .size([width, height])
    .charge(-400)
    .linkDistance(100)
    .on("tick", tick);

var drag = force.drag()
    .on("dragstart", dragstart);

var svg = d3.select("#force").append("svg")
    .attr("width", width)
    .attr("height", height);

var link = svg.selectAll(".link");
    node = svg.selectAll(".node");

d3.json("graph.json", function(error, graph) {
  if (error) throw error;

force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

link = link.data(graph.links)
    .enter().append("path")
      .attr("class", "link");

var linkedByIndex = {};
    graph.links.forEach(function(d) {
        linkedByIndex[d.source.index + "," + d.target.index] = 1;
    });

function isConnected(a, b) {
        return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
    }

/*  node = node.data(graph.nodes)
    .enter().append("circle")
      .attr("class", function(d) {return "node " + d.type;})
      .attr("id", function(d) {return d.name;})
      .attr("r", 12)
      .on("dblclick", dblclick)
      .on("mouseover", fade(.1))
      .on("mouseout", fade(1))
      .call(drag);*/

node = node.data(graph.nodes)
  .enter()
  .append("g")
  .attr("class", "nodegroup");
  // .call(drag);
  
 node.append("circle")
  .attr("class", function(d) {return "node " + d.type;})
  .attr("id", function(d) {return d.name;})
  .attr("r", function(d) {return d.type === "partner" ? 12 : 10;})
  .on("dblclick", dblclick)
  .on("mouseover", fade(.1))
  .on("mouseout", fade(1))
  .call(drag);

node.append("text")
  .style("text-anchor", "middle")
  .attr("class", function(d) {return "label " + d.type;})
  .text(function (d) {return d.name});

// fade out the non-pertinent links & nodes
function fade(opacity) {
        return function(d) {
            node.style("stroke-opacity", function(o) {
                thisOpacity = isConnected(d, o) ? 1 : opacity;
                this.setAttribute('fill-opacity', thisOpacity);
                return thisOpacity;
            });

link.style("stroke-opacity", function(o) {
                return o.source === d || o.target === d ? 1 : opacity;
            });
        };
    }

});

link.attr("d", linkArc);

node.selectAll("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });

node.selectAll("text")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y - 15; });

d3.selectAll("circle").classed("fixed", function(d) {return d.fixed = true;});

}

function dblclick(d) {
  d3.select(this).classed("fixed", d.fixed = false);
}

function dragstart(d) {
  d3.select(this).classed("fixed", d.fixed = true);

}

// make the links all curvy
function linkArc(d) {

var dx = d.target.x - d.source.x,
      dy = d.target.y - d.source.y,
      dr = Math.sqrt(dx * dx + dy * dy);
  return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js