Tributary inlet

_.md

[ Launch: Tributary inlet ] 5804062 by dsuket

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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 dataSet = [10, 20, 30, 40];

var circle = svg.selectAll('circle')
    .data(dataSet)
    .enter()
    .append('circle')
    .attr({
        r:function(d){ return d },
        cx:function(d, i){ return i * 100 + 50 },
        cy:50,
        fill: 'red'
    })
    .on("mouseover", function(){
      d3.select(this).transition().style("fill", "aliceblue");
    })
    .on("mouseout", function(){
      d3.select(this).transition().style("fill", "red");
    })
    .on("mousedown", animateFirstStep);

function animateFirstStep() {
    d3.select(this)
    .append("circle")
      .style("fill", "#eef")
    .transition()
        .duration(1000)
        .attr("r", 300)
		.style("opacity", 0)
	    .each("end", animateSecondStep);
}


function animateSecondStep(){
    d3.select(this)
      .transition()
        .duration(1000)
        .attr("r", 40);
}