graph.json

## graph.json
{
    "nodes":  [
    {"x":562.7949460885422,"y":76.86704099939692,"type":"topic","name":"Global (Public) Health","id":0},
    {"x":696.8245384689717,"y":136.16769696694627,"type":"topic","name":"Aging","id":1},
    {"x":672.7754088754202,"y":371.3425657600058,"type":"topic","name":"Precision Medicine","id":2},
    {"x":693.471368464311,"y":285.2189919274104,"type":"topic","name":"Data Science","id":3},
    {"x":503.5218837663822,"y":278.90647515991435,"type":"topic","name":"Global Studies","id":4},
    {"x":462.9478186620898,"y":124.69184706956969,"type":"topic","name":"Mathematics","id":5},
    {"x":629.2678749809958,"y":195.9994137782973,"type":"topic","name":"Inequality","id":6},
    {"x":357.9744302805252,"y":304.40471564810105,"type":"topic","name":"Cybersecurity","id":7},
    {"x":317.8335553255075,"y":129.58678627524003,"type":"topic","name":"Climate Change","id":8},
    {"x":463.8768716096288,"y":391.3578843675139,"type":"topic","name":"Transportation","id":9},
    {"x":394.3807110676704,"y":203.97075315293864,"type":"topic","name":"Advanced Materials","id":10},
    {"x":771.1703935097805,"y":52.63373255226452,"type":"partner","name":"UCSF","id":11},
    {"x":758.8143374093677,"y":461.5347932971226,"type":"partner","name":"PKU","id":12},
    {"x":836.2434256596513,"y":234.5184797233119,"type":"partner","name":"FUB","id":13},
    {"x":154.7665533791762,"y":276.8594444723063,"type":"partner","name":"Cambridge","id":14},
    {"x":459.5696078304757,"y":491.57507028920037,"type":"partner","name":"NUS","id":15},
    {"x":279.0200645220641,"y":29.74322744218372,"type":"partner","name":"UC Berkeley","id":16}
    ],
    "links": [
      {"source":  11, "target":  0},
      {"source":  11, "target":  1},
      {"source":  11, "target":  2},
      {"source":  12, "target":  3},
      {"source":  12, "target":  4},
      {"source":  12, "target":  2},
      {"source":  13, "target":  1},
      {"source":  13, "target":  4},
      {"source":  13, "target":  5},
      {"source":  13, "target":  6},
      {"source":  14, "target":  3},
      {"source":  14, "target":  4},
      {"source":  14, "target":  2},
      {"source":  14, "target":  7},
      {"source":  14, "target":  8},
      {"source":  15, "target":  9},
      {"source":  15, "target":  10},
      {"source":  15, "target":  3},
      {"source":  15, "target":  2},
      {"source":  15, "target":  4},
      {"source":  15, "target":  7},
      {"source":  16, "target":  0},
      {"source":  16, "target":  1},
      {"source":  16, "target":  2},
      {"source":  16, "target":  3},
      {"source":  16, "target":  4},
      {"source":  16, "target":  5},
      {"source":  16, "target":  6},
      {"source":  16, "target":  7},
      {"source":  16, "target":  8},
      {"source":  16, "target":  9},
      {"source":  16, "target":  10}
    ]
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link href='http://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;
            });
        };
    }


});

function tick() {
  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; });

  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>