Skip to content

Instantly share code, notes, and snippets.

@saraquigley

saraquigley/graph.json

Last active October 5, 2015 04:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saraquigley/f6b6fb455a413e36b50a to your computer and use it in GitHub Desktop.
Save saraquigley/f6b6fb455a413e36b50a to your computer and use it in GitHub Desktop.
Download ZIP
The current BGC ecosystem
Raw
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}
]
}
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment