Another Inlet

_.md

[ Launch Inlet ]
Gist #4197472 [ Launch Inlet ]
Gist #4180755
Gist #4179235
Gist #4179218
Gist #4179191
Gist #4179171
Gist #4179097
Gist #4179080
Gist #3200444

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5656374703218789,"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,"hidepanel":false}

inlet.js

var svg = d3.select("svg");
var path = "M370,200 L400,170 L400,230Z";
path += "M400,200";
path += "Q"+(400)+","+(200)+" "+(401)+","+(200)
path += "C"+(450)+","+(200)+" "+(550)+","+(200)+" "+(1000)+","+(200)+""

  
  
//path += "Q"+(516)+","+(199)+" "+(547)+","+(153)
//path += "C"+(591)+","+(98)+" "+(620)+","+(375)+" "+(742)+","+(220)+""
//path += "Q"+(756)+","+(199)+" "+(805)+","+(200)


var path2 = "M420,200 L450,170 L450,230Z";  
path2 += "M"+(450)+","+(200);
path2 += "Q"+(460)+","+(200)+" "+(506)+","+(179)
path2 += "C"+(623)+","+(101)+" "+(687)+","+(386)+" "+(851)+","+(200)+""
//path2 += "L950,200"
     
  
   
 svg.append("path")
  .attr("d", path)
  .attr("stroke","#888")
  .attr("stroke-width",20)
   .attr("fill","none")
 
          
 svg.append("path")
  .attr("d", path2)
  .attr("stroke","#888")
  .attr("stroke-width",20)
  .attr("fill","none")
  .attr("transform","translate(0,200)")   
           
 


var el = svg.append("path")
  .attr("d", path)
  .attr('id','pathy')
  .attr("stroke","#888")
  .attr("stroke-width",20)
   .attr("fill","none")
   	

var trans1 = el.attr("transform","translate(0,400)")
	.transition()
  .ease("elastic",1.2,3)     
  	.duration(1000)
  	 .attr("d", path)
  
trans1.transition()
     .delay(1000)
  .duration(1000)
  	.attr("d", path2);
   
trans1.transition()
     .delay(2000)
    .ease("elastic",1.2)  
  .duration(1000)
  	.attr("d", path);
       
var g = svg.append("svg:g")
	.attr("transform","translate("+[0,500]+")")
	.attr("class","group")
    .on('click',function(d,i){
      console.log('sdfsd')
      var trans1 = d3.select('#pathy').attr("transform","translate(0,400)")
          .transition()
        .ease("elastic",1.2,3)     
          .duration(1000)
           .attr("d", path)
        
      trans1.transition()
           .delay(1000)
        .duration(1000)
          .attr("d", path2);
         
      trans1.transition()
           .delay(2000)
          .ease("elastic",1.2)  
        .duration(1000)
          .attr("d", path);
	});

var rect = g  
	.append("svg:rect")
	.attr("width",200)
	.attr("height",60)
   	.attr("x",51)
	.attr("y",0)
	.attr("fill","#558999");
        
g.append('svg:text')
.text(function(d,i){ return "Click me!";})
.attr("fill", "#FFFFFF")
.attr("x", 113)
.attr("y", 36)
.attr("font-size", 19)
.attr("font-family", "Arial")
.attr("text-anchor", "start");