Skip to content

Instantly share code, notes, and snippets.

@chemplexity
Last active August 29, 2015 14:10
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 chemplexity/332bdf4e883a42bd1a8d to your computer and use it in GitHub Desktop.
Save chemplexity/332bdf4e883a42bd1a8d to your computer and use it in GitHub Desktop.
Nitrogen Cycle
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.link {
fill: none;
stroke: #666;
stroke-width: 2.8px;
}
.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
stroke-width: 3.0px;
stroke-opacity: 0.75;
}
text {
font-family: "Lucida Sans";
pointer-events: none;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var links = [
{source: 3, target: 0, type: "Fixation"},
{source: 0, target: 1, type: "ANAMMOX"},
{source: 1, target: 3, type: "ANAMMOX"},
{source: 6, target: 5, type: "Denitrification"},
{source: 5, target: 4, type: "Denitrification"},
{source: 4, target: 3, type: "Denitrification"},
{source: 0, target: 2, type: "Nitrification"},
{source: 2, target: 6, type: "Nitrification"},
{source: 6, target: 7, type: "Nitrification"},
{source: 7, target: 6, type: "Denitrification"},
{source: 6, target: 0, type: "DNRA"}
];
var nodes = [
{"name": "NH4", "oxidation": 1},
{"name": "N2H4", "oxidation": 2},
{"name": "NH2OH", "oxidation": 3},
{"name": "N2", "oxidation": 4},
{"name": "N2O", "oxidation": 5},
{"name": "NO", "oxidation": 6},
{"name": "NO2", "oxidation": 7},
{"name": "NO3", "oxidation": 9}
];
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
var width = 500,
height = 350,
r = 15;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(35)
.charge(-3000)
.gravity(0.6)
.theta(0.1)
.on("tick", tick)
.start();
// Color Scale
var color = d3.scale.linear()
.domain([4,9])
.range(['#d43939', '#3237fb']);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").selectAll("marker")
.data(["Fixation", "ANAMMOX", "Denitrification", "Nitrification", "Denitrification", "DNRA"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "1 -5 10 5")
.attr("refX", 20)
.attr("refY", -1.5)
.attr("markerWidth", 5.5)
.attr("markerHeight", 20)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-2L10,0L2,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 19)
.call(force.drag)
//.style("opacity", 0.9)
.style("fill", function(d) {return color(d.oxidation)})
.style("stroke", function(d) {return d3.rgb(color(d.oxidation)).darker(); });
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("y", ".31em")
.attr("fill", "black")
.style("font-size", function(d) { return 16})
.style("font-weight", 200)
.style("text-anchor", "middle")
.text(function(d) { return d.name; });
function tick() {
path.attr("d", linkArc);
path.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; });
circle.attr("cx", function(d) { return d.x = Math.max(r, Math.min(width - r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(height - r, d.y)); });
text.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment