A toy for playing with the force-directed layout algorithm's parameters.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
  padding: 0;
  margin: 0;
  background: black;
	font-family: sans-serif;
}
rect {
  fill: none;
  pointer-events: all;
}

.node {

}
.inputs {transition: opacity .2s; text-align: left; position:absolute; font-family: sans-serif;
 opacity: .5; color:#ccc; font-size: 10pt; color: #cdcdcf; position:absolute; display:block; size: 8em; top: 30px;}
 
em { size:14em; opacity: .8;}
.slideLog {
	position:absolute;
	left: 300px;
}
.inputs:hover {opacity: .8;}
.cursor {
  fill: none;
  stroke: #333;
  pointer-events: none;
}

.slider {
	height: 10px;
	left: 3em;
	width: 200px;
	position: absolute;
	right: 2px;
	opacity: .82;
	
}

input[type='range'] {
-webkit-appearance: none;
padding-left:2px; padding-right:2px;
-webkit-border-radius: 5px;
opacity: .5;
background: #3ac;
}

input[type='range']::-webkit-slider-thumb {  
    -webkit-appearance: none;  
    background-color: #fff;
		opacity: 1;
    width: 10px;  
    height: 10px;  
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var currentWidth;
currentWidth = function() {
	return [window.innerWidth, window.innerHeight];
}

var width = window.innerWidth,
    height = window.innerHeight;

var fill = d3.scale.category20();
var force = d3.layout.force();
var trailLength = 500;

window.onresize = function() { force.size(currentWidth());}

function resize () {
	force.size(currentWidth());
}

force
    .size(currentWidth())
    .nodes([{}]) // initialize with a single node
    .linkDistance(30)
    .charge(0)
		.gravity(0)
    .on("tick", tick)
    
    
//oscillators.push(newOsc());
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", mousemove)
		.attr('style', 'position: fixed')
    .on("mousedown", mousedown);

svg.append("rect")
    .attr("width", width)
    .attr("height", height);

var nodes = force.nodes(),
    links = force.links(),
    node = svg.selectAll(".node"),
    link = svg.selectAll(".link");

var cursor = svg.append("circle")
    .attr("r", 30)
    .attr("transform", "translate(-100,-100)")
    .attr("class", "cursor");

restart();

});

restart();  }
}

function distanceFromZero(d) {
  return Math.sqrt ( (d.x - width / 2) * (d.x - width / 2) + (d.y - height / 2) * (d.y - height / 2) );
}

}
var lastTime = 0;
function drawFps(){
	var now = (new Date).getTime();
	document.getElementById('fps').innerHTML = Math.round(1000 / (now - lastTime));
	lastTime = (new Date).getTime();
}
var sometimes = 0;

// requested to make color stick depending on where its placed

totalEnergy = 0;
  node.attr("cx", function(d, i) { //console.log(oscillators[0]); 
    //updateFreq(oscillators[i], numberToNote(distanceFromZero(d) / 10)) ; 
    return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("fill", function(d) { //console.log(d3.hsl(d.x % 360, .5, .5).toString()); 
				var energy = Math.pow(d.x - d.x_last, 2) + Math.pow(d.y - d.y_last, 2) ;
        svg.insert("line", ":first-child")
          .attr("stroke", d3.hsl(-200 + 68*Math.log(energy) % 360, .5, .1*Math.log(energy)).toString())
          .attr("x1", function(v) {if (d.x_last == undefined) {return d.x;} else {return d.x_last;}})
          .attr("y1", function(v) {if (d.y_last == undefined) {return d.y;} else {return d.y_last;}})
          .attr("x2", d.x)
          .attr("y2", d.y).attr("stroke-width", 1).transition().duration(trailLength)
          //.transition().duration(10000).attr("transform", "scale(1.1) translate( " + width / 2 + " " + height / 2 + ")")
          .remove();
          
                
                  //.transition().duration(10000).attr("transform", "scale(1.1) translate( -" + width / 2 + " " + height / 2 + ")")
        
        d.x_last = d.x;
        d.y_last = d.y;
      //  svg.append("circle")
      //    .attr("r", 2)
      //    .attr("fill", d3.hsl(distanceFromZero(d) % 360, .5, .5).toString())
      //    .attr("cx", d.x)
      //    .attr("cy", d.y)
      //    .transition().delay(10000)
        //  .remove()
				totalEnergy = totalEnergy + energy;
				
        return d3.hsl(-200 + 68*Math.log(energy) % 360, .5, .8).toString();})
}
function removeTrails(){
	d3.selectAll("line").remove();
				}
function restart() {
  link = link.data(links);

link.enter().insert("line", ".node")
      .attr("class", "link");

node = node.data(nodes);

node.enter().insert("circle", ".cursor")
      .attr("class", "node")
      .attr("r", 1)
      .call(force.drag);

force.start();
}
function sliderLog(obj, id) {
	document.getElementById(id).innerHTML = obj.value;
}
</script>

<div class="inputs" id="control">
Click to add nodes, then adjust parameters below!
<div>charge<span class="slider"><input class="slider" type="range" value=0 max=1000 min=-1000 id="charge" onChange="console.log(this.value); force.charge(this.value); force.start(); sliderLog(this, 'ch')"></span>
<span id="ch" class="slideLog"></span>
</div>	
<div>
link distance<span class="slider"><input class="slider" type="range" value=0 max=1000 min=0 id="linkDistance" onChange="console.log(this.value); force.linkDistance(this.value); force.start(); sliderLog(this, 'ld')"></span>
<span id="ld" class="slideLog"></span>
</div>	
<div>gravity<span class="slider"><input class="slider" type="range" value=0 max=1000 min=-1000 id="gravity" onChange="console.log(this.value/10000); force.gravity(this.value/10000); force.start(); sliderLog(this, 'gr')"></span>
<span id="gr" class="slideLog"></span>
</div>	
<div>link strength<span class="slider"><input class="slider" type="range" value=0 max=100 min=-100 id="linkStrength" onChange="console.log(Math.log(this.value/100)); force.linkStrength(this.value / 100); force.start(); sliderLog(this, 'ls')"></span>
<span id="ls" class="slideLog"></span>
</div>	
<div>trail length<span class="slider"><input class="slider" type="range" value=1000 max=10000 min=0 id="linkStrength" onChange="console.log(this.value); removeTrails();  trailLength = this.value;force.start() ; sliderLog(this, 'tl')"></span>
<span id="tl" class="slideLog"></span></div>
<div>Kinetic: <span id="energy"> </span></div>
<div>Max: <span id="maxE">0</span></div>
<div>FPS: <span id="fps"> </span></div>
<button onClick="force.stop()">Pause</button>
<button onClick="force.start()">Resume</button>

</div>
<div id="controlhide" style="position:absolute; left: 0px; opacity: .3; color: white;"><button onclick="var div = document.getElementById('control'); if (div.style.visibility == 'hidden') { div.style.visibility = 'visible'; } else { div.style.visibility = 'hidden'; };">controls</button></div>

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

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