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>

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js