D3 Examples - The current BGC ecosystem

xxxxxxxxxx
 
<!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;
            });
        };
    }
​
​
});
​
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>
    