playing with joins and transitions

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"endpoint":"tributary"}

inlet.js

var data = [{"x": 100, "y": 110}, {"x": 200, "y": 201}];
var data2 = [{"x": 150, "y": 150}, {"x": 210, "y": 202}];
var svg = d3.select("svg");

svg.selectAll("circle")
    .data(data)
      .enter().append("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .transition()
           .attr("r", function(d){ return 51;});

setTimeout(function(){
	svg.selectAll("circle")
  		.data(data2)
      	.transition()
  			.attr("cx", function(d) { return d.x; })
  			.attr("cy", function(d) { return d.y; });
	;
},1000)


// function(){ return 51;}

inlet.svg

<svg class="tributary_svg" width="1680" height="667"><circle cx="150" cy="150" r="51"></circle><circle cx="210" cy="202" r="51"></circle></svg>