Skip to content

Instantly share code, notes, and snippets.

@trvrb

trvrb/graph.json

Last active June 13, 2017 23:51
Show Gist options
  • Save trvrb/f7b4210797fd86b5fda2f6d91a920a15 to your computer and use it in GitHub Desktop.
Save trvrb/f7b4210797fd86b5fda2f6d91a920a15 to your computer and use it in GitHub Desktop.
Download ZIP
Network of Bedford lab projects
Raw
graph.json
{
"nodes": [
{
"id": "Alli",
"type": "member",
"img": "http://bedford.io/images/team/allison-black.jpg"
},
{
"id": "Sidney",
"type": "member",
"img": "http://bedford.io/images/team/sidney-bell.jpg"
},
{
"id": "Gytis",
"type": "member",
"img": "http://bedford.io/images/team/gytis-dudas.jpg"
},
{
"id": "Barney",
"type": "member",
"img": "http://bedford.io/images/team/barney-potter.jpg"
},
{
"id": "James",
"type": "member",
"img": "http://bedford.io/images/team/james-hadfield.jpg"
},
{
"id": "Louise",
"type": "member",
"img": "http://bedford.io/images/team/louise-moncla.jpg"
},
{
"id": "John",
"type": "member",
"img": "http://bedford.io/images/team/john-huddleston.jpg"
},
{
"id": "Stephanie",
"type": "member",
"img": "http://bedford.io/images/team/stephanie-stacy.jpg"
},
{
"id": "Maya",
"type": "member",
"img": "http://bedford.io/images/team/maya-lewinsohn.jpg"
},
{
"id": "Zika",
"type": "project"
},
{
"id": "dengue",
"type": "project"
},
{
"id": "Ebola",
"type": "project"
},
{
"id": "influenza",
"type": "project"
},
{
"id": "MERS",
"type": "project"
},
{
"id": "mumps",
"type": "project"
},
{
"id": "Nextstrain",
"type": "project"
},
{
"id": "cancer",
"type": "project"
}
],
"links": [
{"source": "Alli", "target": "Zika"},
{"source": "Alli", "target": "mumps"},
{"source": "Sidney", "target": "dengue"},
{"source": "Sidney", "target": "Nextstrain"},
{"source": "Gytis", "target": "Zika"},
{"source": "Gytis", "target": "Ebola"},
{"source": "Gytis", "target": "MERS"},
{"source": "Barney", "target": "influenza"},
{"source": "Barney", "target": "Zika"},
{"source": "James", "target": "influenza"},
{"source": "James", "target": "Nextstrain"},
{"source": "Louise", "target": "mumps"},
{"source": "Louise", "target": "influenza"},
{"source": "John", "target": "influenza"},
{"source": "John", "target": "Nextstrain"},
{"source": "Stephanie", "target": "Ebola"},
{"source": "Maya", "target": "cancer"}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
<head>
<style>
.member {
stroke: #777;
stroke-width: 1.5px;
}
.project {
stroke: #555;
font: 18px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.link {
stroke: #777;
stroke-width: 1.5px;
}
</style>
</head>
<body style="background-color:#fff;">
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
</script>
<svg>
<filter x="-0.05" y="-0.08" width="1.10" height="1.16" id="background">
<feFlood flood-color="#fff"/>
<feComposite in="SourceGraphic"/>
</filter>
</svg>
<script>
var width = parseInt(d3.select("body").style("width"), 10),
height = width / 2;
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
var defs = svg.append("defs");
var updated = false;
var simulation = d3.forceSimulation().alphaDecay(0.05)
.force("charge", d3.forceManyBody().strength(-1000).distanceMax([300]) )
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("x", d3.forceX(width / 2).strength(0.08))
.force("y", d3.forceY(height / 2).strength(0.08))
.on("tick", ticked);
var patterns = defs.selectAll(".pattern"),
links = svg.append("g").selectAll(".link"),
members = svg.append("g").selectAll(".member"),
projects = svg.selectAll(".project");
d3.json("graph.json", function(error, graph) {
if (error) throw error;
graph.nodes.map(function(d) {
d.x = width*Math.random();
d.y = height*Math.random();
});
simulation.nodes(graph.nodes);
simulation.force("link").links(graph.links);
patterns = patterns
.data(graph.nodes.filter(function(d) { return d.type === "member"; }))
.enter()
.append("pattern")
.attr("id", function(d) { return d.id;})
.attr("class", "pattern")
.attr("patternUnits", "userSpaceOnUse")
.attr("height", 50)
.attr("width", 50)
.append("image")
.attr("x", 0)
.attr("y", 0)
.attr("height", 50)
.attr("width", 50)
.attr("xlink:href", function(d) { return d.img;});
links = links
.data(graph.links)
.enter()
.append("line")
.attr("class", "link");
members = members
.data(graph.nodes.filter(function(d) { return d.type === "member"; }))
.enter()
.append("g")
.attr("width", 50)
.attr("height", 50)
.attr("transform", "translate(-25, -25)")
.append("circle")
.attr("class", "member")
.attr("cx", 25)
.attr("cy", 25)
.attr("r", 25)
.style("fill", function(d) { return "url(#"+d.id+")";});
projects = projects
.data(graph.nodes.filter(function(d) { return d.type === "project"; }))
.enter()
.append("text")
.attr("class", "project")
.attr("text-anchor", "middle")
.attr("dx", 0)
.attr("dy", ".35em")
.text(function(d){ return d.id })
.style("filter", "url(#background)");
restart(graph);
svg.on("click", function() {
var coords = d3.mouse(this);
if (updated == false) {
updated = true;
graph.nodes.push(
{
"id": "phylogenetics",
"type": "project",
"x": coords[0],
"y": coords[1]
}
);
newLinks = []
graph.nodes.map(function(d) {
if (d.type === "member") {
newLinks.push({"source": d.id, "target": "phylogenetics"})
}
})
graph.links = graph.links.concat(newLinks);
}
restart(graph);
});
});
function restart(graph) {
// Apply the general update pattern to the links
links = links.data(graph.links);
links.exit().remove();
links = links.enter()
.append("line")
.attr("class", "link")
.merge(links);
// Apply the general update pattern to the nodes
projects = projects.data(graph.nodes.filter(function(d) { return d.type === "project"; }));
projects.exit().remove();
projects = projects.enter()
.append("text")
.attr("class", "project")
.attr("text-anchor", "middle")
.attr("dx", 0)
.attr("dy", ".35em")
.text(function(d){ return d.id })
.style("filter", "url(#background)")
.merge(projects);
// Update and restart the simulation.
simulation.nodes(graph.nodes);
simulation.force("link").links(graph.links);
simulation.alpha(1).restart();
}
function ticked() {
links.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 ; });
members.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
projects.attr("x", function(d) { return d.x })
.attr("y", function(d) { return d.y });
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment