Tributary inlet

_.md

[ Launch: Tributary inlet ] 7782904 by epidemico616

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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

optionRadius = 29;
nodeRadius = 69;
ringRadius = nodeRadius + optionRadius + 5;
optionRotation = 2;

context = [{"name":"first", "action":"test1"},{"name":"second", "action":"test2"},{"name":"third", "action":"test3"},{"name":"fourth", "action":"test4"}];
n = context.length;

svg = d3.select("svg");
node = svg.append("g").attr({transform:"translate(400,400)"})
inner = node.append("circle").attr({cx:0,cy:0,r:nodeRadius,fill:"#068"})
ring = node.append("circle").attr({cx:0,cy:0,r:ringRadius,fill:"none",stroke:"black","stroke-width":2})

option = node.selectAll("option")
  .data(context)
  .enter()
  .append("circle")
  .attr({
    cx:function(d,i){return ringRadius*Math.cos(i/n*(Math.PI*optionRotation))},
    cy:function(d,i){return ringRadius*Math.sin(i/n*(Math.PI*optionRotation))},
    r:optionRadius,
    fill:"grey"
  })
.on("mouseover", function(d,i){d3.select(this).transition().attr({r:optionRadius+5})})
.on("mouseout", function(d,i){d3.select(this).transition().attr({r:optionRadius})})
.on("click", function(d,i){alert(d3.select(this.parentNode).datum(d.name))})
itemText = node.selectAll("text")
	.data(context)
	.enter()
	.append("text")
.text(function(d,i){return d.name})
	.attr({
      x:function(d,i){return ringRadius*(Math.cos(i/n*(Math.PI*optionRotation)))},
      y:function(d,i){return ringRadius*(Math.sin(i/n*(Math.PI*optionRotation)))+optionRadius/(optionRadius/6)}
      })
	.style("text-anchor", "middle")