var numNodes =  4, nodes = [];
var width  = 200, height = 200, r = 15;
for (var k = 0; k < numNodes; k += 1) {nodes.push({ num: k});}

var force = d3.layout.force()
  .nodes(nodes)
  .gravity(0)
  .charge(-150)
  .size([width, height])
  .start();

var svg = d3.select('svg')
  .attr('width', width)
  .attr('height', height);
/*
var colorScale = d3.scale.linear()
  .domain([0, height])
  .range(['#32ff66', '#b914bc']);
*/

/*
var circles = svg.selectAll('.node').data(nodes);

circles.enter().append('circle').classed('node', true);
circles.attr('r', r);
circles.exit().remove();
*/
var images = svg.selectAll('.node').data(nodes);

images.enter().append('circle').classed('node', true);
images.attr('r', r);
images.exit().remove();

force.on('tick', function(e) {
  nodes.forEach(function(o) {
    var dy = (height - r) - o.y;
    o.y = (dy < 0) ? (height - r) : o.y + (dy / height);
  });

//  circles
  images
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; })
//    .attr('fill', function(d) { return colorScale(d.y); });
    .attr('fill', function(d) { return '#b914bc'; });
  
});