thole/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke-width: 1.5px;
}

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

var width = 960,
    height = 500;

var fill = d3.scale.ordinal()
    .domain([0,1,2,3,4,5])
    .range(['#3b0f12','#34424e','#5d262f','#7f8594','#cacad2']);

var nodes = [],
    foci = [{x: 150, y: 150}, {x: 350, y: 150}, {x: 550, y: 150}, {x: 800, y: 150}];

var svg = d3.select("body").style('background-color','#070c0f').append("svg")
    .attr("width", width)
    .attr("height", height);

var defs = svg.append('defs');
var filter = defs.append('filter').attr('id','gooey')
  filter.append('feGaussianBlur')
    .attr('in','SourceGraphic')
    .attr('stdDeviation','7')
    .attr('result','blur');
  filter.append('feColorMatrix')
    .attr('in','blur')
    .attr('mode','matrix')
    .attr('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9')
    .attr('result','gooey');

var force = d3.layout.force()
    .nodes(nodes)
    .charge(-10)
    .links([])
    .gravity(0)
    .size([width, height])
    .on("tick", tick);

var g = svg.append("g")
  .style("filter", "url(#gooey)")

var node = g.selectAll("circle");

function tick(e) {
  var k = .1 * e.alpha;

  // Push nodes toward their designated focus.
  nodes.forEach(function(o, i) {
    o.y += (foci[o.id].y - o.y) * k;
    o.x += (foci[o.id].x - o.x) * k;
  });

  node
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
}

setInterval(function(){
  nodes.push({id: ~~(Math.random() * foci.length)});
  force.start();

  node = node.data(nodes);

  node.enter().append("circle")
      .attr("class", "node")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", 10)
      .style("fill", function(d) { return fill(d.id); })
      .call(force.drag);
}, 500);

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.node {
	stroke-width: 1.5px;
	}

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

	var width = 960,
	height = 500;

	var fill = d3.scale.ordinal()
	.domain([0,1,2,3,4,5])
	.range(['#3b0f12','#34424e','#5d262f','#7f8594','#cacad2']);

	var nodes = [],
	foci = [{x: 150, y: 150}, {x: 350, y: 150}, {x: 550, y: 150}, {x: 800, y: 150}];

	var svg = d3.select("body").style('background-color','#070c0f').append("svg")
	.attr("width", width)
	.attr("height", height);

	var defs = svg.append('defs');
	var filter = defs.append('filter').attr('id','gooey')
	filter.append('feGaussianBlur')
	.attr('in','SourceGraphic')
	.attr('stdDeviation','7')
	.attr('result','blur');
	filter.append('feColorMatrix')
	.attr('in','blur')
	.attr('mode','matrix')
	.attr('values','1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9')
	.attr('result','gooey');

	var force = d3.layout.force()
	.nodes(nodes)
	.charge(-10)
	.links([])
	.gravity(0)
	.size([width, height])
	.on("tick", tick);

	var g = svg.append("g")
	.style("filter", "url(#gooey)")

	var node = g.selectAll("circle");

	function tick(e) {
	var k = .1 * e.alpha;

	// Push nodes toward their designated focus.
	nodes.forEach(function(o, i) {
	o.y += (foci[o.id].y - o.y) * k;
	o.x += (foci[o.id].x - o.x) * k;
	});

	node
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });
	}

	setInterval(function(){
	nodes.push({id: ~~(Math.random() * foci.length)});
	force.start();

	node = node.data(nodes);

	node.enter().append("circle")
	.attr("class", "node")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 10)
	.style("fill", function(d) { return fill(d.id); })
	.call(force.drag);
	}, 500);

	</script>