Directional Force Layout Diagram with node colouring

This is a follow-on graph to the Basic Directional Force Layout Diagram and the Directional Force Layout Diagram with Node Highlighting and builds on it by couring the nodes.

forked from d3noob's block: Directional Force Layout Diagram with node colouring

forked from anonymous's block: Directional Force Layout Diagram with node colouring

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.js"></script>
<style>
 
path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}
 
path.link.twofive {
  opacity: 0.25;
}
 
path.link.fivezero {
  opacity: 0.50;
}
 
path.link.sevenfive {
  opacity: 0.75;
}
 
path.link.onezerozero {
  opacity: 1.0;
}
 
circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}
 
text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}
 
</style>
<body>
<script>
 
// get the data
d3.csv("force.csv", function(error, links) {
 
var nodes = {};
 
// Compute the distinct nodes from the links.
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});
    link.value = +link.value;
});
 
var width = 960,
    height = 500,
    color = d3.scale.category20c();

// add the text 
node.append("text")
    .attr("x", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });
 
// add the curvy lines
function tick() {
    path.attr("d", function(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;
    });
 
    node
        .attr("transform", function(d) { 
		    return "translate(" + d.x + "," + d.y + ")"; });
}
 
// action to take on mouse click
function click() {
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 22)
        .style("stroke", "lightsteelblue")
        .style("stroke-width", ".5px")
        .style("font", "20px sans-serif");
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 16);
}
 
// action to take on mouse double click
function dblclick() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", 6);
    d3.select(this).select("text").transition()
        .duration(750)
        .attr("x", 12)
        .style("stroke", "none")
        .style("fill", "black")
        .style("stroke", "none")
        .style("font", "10px sans-serif");
}
 
});
 
</script>
</body>
</html>

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

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