test

_.md

[ Launch: test ] 736a3da5626e8bff40d3 by roundrobin
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"test","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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var svg = d3.select("svg")


var matrix = [
  2,
  3,
  4,
  5
];

function update(data){
var circle = svg.selectAll("circle")
    .data(data)
     .enter()
		.append("circle")
		.attr('opacity', 0)
		.attr('cx', 30)
		.attr('cy', function(d, i){
			return 100 + i * 20;
        })
		.attr('r', function(d, i){
			return d;
        })
		.attr('transform', function(){
			return 'translate()'
		})
		.transition()
		.duration(2000)
			.attr('opacity', 1)
		
}

update(matrix)

setTimeout(function(){
	matrix.push(23);
	update(matrix);
}, 3000);