Simple Floating Circles

_.md

[ Launch: Tributary inlet ] 5004743 by tmcw

config.json

{"description":"Simple Floating Circles","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 svg = d3.select('svg');

var g = svg.append('g')
	.attr('transform', 'translate(100, 100)');

var data = d3.range(0, 30);

var circles = g.selectAll('circle')
	.data(data)
	.enter()
	.append('circle');

d3.timer(function() {
circles.attr('r', 4)
	.attr('transform', function(d) {
          return 'translate(' + [d * 10, Math.sin((+new Date) * d / 10000) * 10] + ')';
	});
});

circles.exit().remove();