D3.js Network Force Directed

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

.link {
  stroke-width: 5px;
}

.link.green {
  stroke 'green'
}

.link.red {
  stroke 'red'
}

.link.blue {
  stroke 'blue'
}

.node {
  cursor: move;
  fill: #ccc;
  stroke: #000;
  stroke-width: 1.5px;
}

.node.fixed {
  fill: #f00;
}


text {
  font: 10px sans-serif;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

JavaScript

var width = 960,
    height = 700

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);


var json = {
  "nodes":[
    {
      "id": 5,
      "name": "a",
      "group": 0
    },
    {
      "id": 2,
      "name": "b",
      "group": 2
    },
    {
      "id": 3,
      "name": "c",
      "group": 0
    },
    {
      "id": 4,
      "name": "d",
      "group": 0
    },
    {
      "id": 5,
      "name": "e",
      "group": 1
    },
    {
      "id": 6,
      "name": "f",
      "group": 0
    },
    {
      "id": 7,
      "name": "g",
      "group": 0
    },
    {
      "id": 8,
      "name": "h",
      "group": 1
    }
  ], "links":[    
      {
      "source": 1,
      "target": 2,
      "col": "green"
    },
    {
      "source": 2,
      "target": 3,
      "col": "red"
    },
    {
      "source": 3,
      "target": 4,
      "col": "green"
    },
    {
      "source": 4,
      "target": 1,
      "col": "red"
    },
    {
      "source": 5,
      "target": 6,
      "col": "green"
    },
    {
      "source": 6,
      "target": 7,
      "col": "red"
    },
    {
      "source": 7,
      "target": 8,
      "col": "green"
    },
    {
      "source": 8,
      "target": 5,
      "col": "red"
    },
    {
      "source": 1,
      "target": 5,
      "col": "blue"
    },
    {
      "source": 2,
      "target": 6,
      "col": "blue"
    },
    {
      "source": 3,
      "target": 7,
      "col": "blue"
    },
    {
      "source": 4,
      "target": 8,
      "col": "blue"
    }
  ]}

var edges = [];
var   fill = d3.scale.category20();

json.links.forEach(function(e) { 
    // Get the source and target nodes
    var sourceNode = json.nodes.filter(function(n) { return n.id === e.source; })[0],
        targetNode = json.nodes.filter(function(n) { return n.id === e.target; })[0],
        col = e.col;

    // Add the edge to the array
    edges.push({source: sourceNode, target: targetNode, col: col});
});

var force =...