just another inlet to tributary

_.md

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":696,"height":574,"hide":false}}

inlet.js

var cx = 430;
var cy = 263;	

var circle = g.append("circle")
		.attr("r",7)
		.attr("cx",cx)
		.attr("cy",cy)
		.attr("fill","#FF00FF");



var x = 356;
var y = 353;


createCircle(g,x,y,'arcCirc' ,'1',10);
createCircle(g,x,y,'arcCirc2','',4);


createCircle(g,x,y,'arcCirc3' ,'2',10);
createCircle(g,x,y,'arcCirc4','',4);
//createCircle(g,10,10,'arcCirc3','3');
//createCircle(g,10,10,'arcCirc4','4');
            
function createCircle(g,x,y,name,text,r){
	var group = g.append("g")
	.attr("transform","translate("+[x,y]+")")
	.attr("class","group")
        .attr("id",name)	

	var circle = group.append("circle")
		.attr("r",r)
		.attr("fill","#0052FF");
  
	var circle = group.append("text")
        .text(text)
		.attr("fill","#000000");
}  
                  
rotateGroup("arcCirc",-50,12,-122);
rotateGroup("arcCirc3",17,360  ,-195);
//rotateGroup("arcCirc2",38,62,84);
//rotateGroup("arcCirc3",100,462,155);
//rotateGroup("arcCirc4",0,462,228);

  
function rotateGroup(id,start,end,r){
	//change r for different radius
	var r = r;
	//change theta to see text rotate
	var thetas = [start,end];
	//turn theta into radians
	var degrees =  Math.PI/180;
	d3.select("#"+id)
	.transition()
	.duration(1500)
    .attrTween("transform", function(d) {
      //we interpolate between our start and end angle
      //by creating an interpolation function
      var theta = d3.interpolateNumber(thetas[0], thetas[1]);
      return function(t) {

        var x = cx + r * Math.cos(theta(t) * degrees);
        var y = cy + r * Math.sin(theta(t) * degrees);
        //function(t) is called for every step of the transition
        //giving us a value of theta inbetween our start and end angle
        //at each time step
        return "translate(" + [x,y] + ")";
      }
    })


}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

inlet.svg

<svg class="tributary_svg" width="1418" height="690"><circle r="7" cx="430" cy="263" fill="#FF00FF"></circle><g transform="translate(310.66599271047573,237.63477372023337)" class="group" id="arcCirc"><circle r="10" fill="#0052FF"></circle><text fill="#000000">1</text></g><g transform="translate(356,353)" class="group" id="arcCirc2"><circle r="4" fill="#0052FF"></circle><text fill="#000000"></text></g><g transform="translate(235,263.00000000000006)" class="group" id="arcCirc3"><circle r="10" fill="#0052FF"></circle><text fill="#000000">2</text></g><g transform="translate(356,353)" class="group" id="arcCirc4"><circle r="4" fill="#0052FF"></circle><text fill="#000000"></text></g></svg>