Degree Centrality based force-layout // source http://jsbin.com/fijefe

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Degree Centrality based force-layout" />
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://jsbin.com/xiyehe/1.js"></script>

.link {
  stroke: #999;
  stroke-opacity: .6;
}
</style>
</head>
<body>

width = 660;

height = 500;

color = d3.scale.category20();

var force = d3.layout.force()
  .charge(-120)
  .linkDistance(30)
  .size([width, height]);

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

//Median
//https://gist.github.com/caseyjustus/1166258
function median(values) {

values.sort( function(a,b) {
      return a - b;
    } );

var half = Math.floor(values.length/2);

if(values.length % 2) {
        return values[half];
    }
    else {
        return (values[half-1] + values[half]);
    }
}

// Returns a function to compute the interquartile range.
function iqr(k) {
  return function(d, i) {
    var q1 = d.quartiles[0],
        q3 = d.quartiles[2],
        iqr = (q3 - q1) * k,
        i = -1,
        j = d.length;
    while (d[++i] < q1 - iqr);
    while (d[--j] > q3 + iqr);
    return [i, j];
  };
}

function determineSpace(gn) {
  console.log(gn.length);
  console.log(width);
  var dist = (width) / gn.length;
  var spaces = [];
  var current = 0;
  for (var i = 0; i < gn.length;i++) {
    spaces.push([current,current+dist]);
    current = current+dist;
  }
  
  return spaces;
}

d3.json("https://jsbin.com/hejef/3.js", function(error, graph) {
  console.log(graph.nodes);
  console.log(graph.nodes.length);
  var link, node;
  var degs = degreeCent(graph);
  console.log(degs);
  var degvalues = [];
  for(var i = 0; i < graph.nodes.length;i++) {
    if (!(degs[i] === undefined)) {
      degvalues.push(degs[i]);
    }
  }
  var xranges = createXranges(degs, determineSpace(graph.nodes));
  console.log(xranges);
  console.log(degvalues.sort());
  var med = median(degvalues);
  
  
  force.nodes(graph.nodes).links(graph.links).start();
  
  link = svg.selectAll(".link")
  .data(graph.links)
  .enter()
  .append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) {
    return Math.sqrt(d.value);
  });
  
  node = svg.selectAll(".node")
  .data(graph.nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) {
    if (degs[d.index] < med) {
      return color(1);
    }
    else if (degs[d.index] > med) {
      return color(3);
    }
    else if (degs[d.index] == med) {
      return color(2);
    }
    else {
      return color(4);
    }
  }).call(force.drag);
  
  node.append("title").text(function(d) {
    return d.name;
  });
  
  return force.on("tick", function() {
    
    link.attr("x1", function(d) {
      d.source.x = boundNodes(d.source.x, xranges[d.source.index]);
      return d.source.x;
    }).attr("y1", function(d) {
      return d.source.y;
    }).attr("x2", function(d) {
      d.target.x = boundNodes(d.target.x, xranges[d.target.index]);
      return d.target.x;
    }).attr("y2", function(d) {
      return d.target.y;
    });
    
    return node.attr("cx", function(d) {
      d.x = boundNodes(d.x,xranges[d.index]);
      return d.x;
    }).attr("cy", function(d) {
      return d.y;
    });
  });
});

// Ideas:
// Could scale the x-axis to the range of values in the centrality scores list.
// Could use discrete number of edges as ticks on the x-axis
//
//

</script>

.link {
  stroke: #999;
  stroke-opacity: .6;
}
</script>

width = 660;

height = 500;

color = d3.scale.category20();

var force = d3.layout.force()
  .charge(-120)
  .linkDistance(30)
  .size([width, height]);

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

//Median
//https://gist.github.com/caseyjustus/1166258
function median(values) {

values.sort( function(a,b) {
      return a - b;
    } );

var half = Math.floor(values.length/2);

if(values.length % 2) {
        return values[half];
    }
    else {
        return (values[half-1] + values[half]);
    }
}

// Ideas:
// Could scale the x-axis to the range of values in the centrality scores list.
// Could use discrete number of edges as ticks on the x-axis
//
//

</script></body>
</html>

Modified http://code.jquery.com/jquery-2.1.0.min.js to a secure url

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

Modified http://jsbin.com/xiyehe/1.js to a secure url

https://code.jquery.com/jquery-2.1.0.min.js

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

https://jsbin.com/xiyehe/1.js