This example demonstrates D3.js force directed layout with fixed x-values and a band on the y-axis where source nodes will not be placed. Target nodes are fixed at y = 0.
Color Scheme: http://colorschemedesigner.com/#3q61Uw0w0w0w0
xxxxxxxxxx
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>SVG Time-Dependent Graph Example - jsFiddle demo by colin_young</title>
<script type='text/javascript' src="https://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="graph"></div>
<div id="slider"></div>
<div id="charge"></div>
<script type='text/javascript' src='network.js'></script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js