Circles Tutorial

_.md

[ Launch: EUE - Circles ] 50266c8589dea75305e0 by jkeohan
[ Launch: Tributary inlet ] e6f770d6f51707fccb9d by jkeohan

config.json

{"description":"Circles Tutorial","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/wvqpXTB.png"}

inlet.js

var data = [1,2,3]


var svg = d3.select('svg')

function render(data,color) {

var circles = svg.selectAll("circle").data(data.sort(d3.descending))

circles.enter().append("circle")
		.attr("cx",0)
	  .attr("r",0)
	  .attr("cy", function(d,i) { return 20} )
	  .attr("class","circles-demo")
	  .attr("fill","blue")
	  .attr("stroke","green")
	  .attr("stroke-width",3)
	.transition()
      .delay(function(d, i) { return i / data.length * 2000; })
      .attr("r", 5)
      .attr("cx", function(d,i) { return d * 50 + 30})

circles.exit().remove()

}

render(data,"blue")