force_example

_.md

[ Launch: force_example ] 4744347 by antulik

config.json

{"description":"force_example","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var w = tributary.sw,
    h = tributary.sh,
    fill = d3.scale.category10(),
    nodes = d3.range(100).map(Object)
var counter = 0;

nodes.forEach(function(d, i){
  d.id = counter++;
});

var svg = d3.select("svg")
    //.attr("width", w)
    //.attr("height", h);

var vis = svg.append('g')

var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .size([w, h])
    .start();

function draw_nodes() {
  var d = vis.selectAll("circle.node")
    .data(nodes, function(d){return d.id})
  	
  d.enter()
  	.append("svg:circle")
    .attr("class", "node")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 8)
    .style("fill", function(d, i) { return fill(d.id & 3); })
    .style("stroke", function(d, i) { return d3.rgb(fill(d.id & 3)).darker(2); })
    .style("stroke-width", 1.5)
    .call(force.drag);
  
  d.exit()
  	.attr('opacity', 1)
  	.transition()
	.duration(1000)
  	.attr('r', 50)
  	.attr('opacity', 0)
  	.remove();
  
  return d;
}

var node = draw_nodes();

force.on("tick", function(e) {

  // Push different nodes in different directions for clustering.
  var k = 6 * e.alpha;
  console.log(k);
  nodes.forEach(function(o, i) {
    o.y += o.id & 1 ? k : -k;
    o.x += o.id & 2 ? k : -k;
  });
  
  node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});


vis.on("click", function() {  
  var entering = d3.range(10).map(Object);

  //nodes = d3.merge(nodes, entering)
  entering.forEach(function(d, i){
    d.id = counter++;
    nodes.push(d);
    
    nodes.splice(0, 1);
  });
  
  force.start()
  
  node = draw_nodes()
});


a = nodes;