Path form

_.md

[ Launch: Path form ] 7982601 by ptvans
[ Launch: Path animation - complex ] 4959206 by roundrobin
[ Launch: SVG Path Element ] 4958914 by roundrobin
[ Launch: SVG Path Element ] 4958860 by roundrobin
[ Launch: Bootstrap Trib ] 4711978 by roundrobin
[ Launch: Tributary inlet ] 4711690 by roundrobin

config.json

{"description":"Path form","endpoint":"","display":"svg","public":true,"require":[{"name":"Helpers","url":"https://raw.github.com/roundrobin/svg-path-generator/master/svg-path-generator.js"}],"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/TzygwMl.png"}

inlet.js

var circles = d3.select("svg").append("g");

circles.append("circle")
.attr({
	r: 30,
	cx: 60,
	cy: 80,
	fill: "#FF00FF",
    id: 'handler1'
})
.datum({'output': '1'});

circles.append("circle")
.attr({
	r: 30,
	cx: 60,
	cy: 175,
	fill: "#64B835",
     'id': 'handler2'
})
.datum({'output': '2'})

circles.append("circle")
.attr({
	r: 30,
	cx: 140,
	cy: 80,
	fill: "#00EBFF",
     'id': 'handler3'
})
.datum({'output': '3'})


circles.append("circle")
.attr({
	r: 30,
	cx: 140,
	cy: 175,
	fill: "#1F00FF",
   'id': 'handler4'
})
.datum({'output': '4'});

circles.append("circle")
.attr({
	r: 30,
	cx: 220,
	cy: 80,
	fill: "#413A77",
   'id': 'handler4'
})
.datum({'output': '5'});


var svg = d3.select('svg').node();

var pt = svg.createSVGPoint();


function cursorPoint(evt){
  pt.x = evt.clientX; pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}

var number = 0;

var text = g.append('text')
.text(number)
.attr("id","check")
.attr({
	fill: "#000000",
	x : 0,
	y: 39,
	"font-size": 32,
	"font-family": "Arial",
	"text-anchor": "start"
});


g.on('mouseout',function(){
	var loc = cursorPoint(d3.event);
    var d  = document.elementFromPoint(d3.event.pageX, d3.event.pageY);
	var el = d3.select(d);
    if(el.node() && el.node().tagName == "circle"){
      	number = el.datum()["output"];
      console.log(number); 
    }
});