Interactive Pairing Matrix

_.md

[ Launch: Interactive Pairing Matrix ] 6048727 by sudhakarr

config.json

{"description":"Interactive Pairing Matrix","endpoint":"","display":"svg","public":true,"require":[],"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/Nkh64bT.png"}

inlet.js

var cx = 400,
    cy = 330,
    cr = 300,
    memberWidth = 30,
    memberHeight = 30;

var svg = d3.select("svg")
  .append("svg:g")


svg.append("circle")
	.attr("cx", cx)
	.attr("cy", cy)
	.attr("r", cr)
	.attr("stroke", "#0B5F0B")
	.attr("fill-opacity",0.1);


//Team members
var members = ['a','b','c','d'];

var members = svg.selectAll('.members')
	.data(members)
	.enter()
	.append("svg")
	.attr("data-member",function(d) { return d });

members
    .append("rect")
	.attr("width", memberWidth)
	.attr("height", memberHeight)
	.attr("fill", "#DDDD31");

var drag = d3.behavior.drag()
	.on("drag", function() {
      var memberName = d3.select(this).attr("data-member");
      var closestPoint = getClosestPointOnCircumference(d3.event.x, d3.event.y);
      d3.select(this)
        .attr("x", function() {return closestPoint[0]})
        .attr("y", function() {return closestPoint[1]});
      
      var toX = closestPoint[0]+15;
      var toY = closestPoint[1]+15;
      connections.selectAll("[data-to="+memberName+"] path")
      .attr("d",function(d) {
        var currentPath = d3.select(this).attr("d");
        return ConnectionUtil.replaceTo(currentPath, toX, toY);
      });
      var fromX = closestPoint[0]+15;
      var fromY = closestPoint[1]+15;
      connections.selectAll("[data-from="+memberName+"] path")
      .attr("d",function(d) {
        var currentPath = d3.select(this).attr("d");
        return ConnectionUtil.replaceFrom(currentPath, fromX, fromY);
      });
	});

members.call(drag);

function getClosestPointOnCircumference(x,y) {
	var vx = x - cx,
        vy = y - cy,
        magV = Math.sqrt(vx*vx + vy*vy);
  return [(cx + vx / magV * cr) - memberWidth/2, (cy + vy / magV * cr) - memberHeight/2];
}


var pairingData = [['d','c',6], ['d','b',2], ['b','a', 4]];

var connections = svg.selectAll('.connections')
	.data(pairingData)
	.enter()
	.append("g")
	.attr("data-from",function(d){ return d[0]})
	.attr("data-to",function(d){ return d[1]});

connections.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width",function(d,i) { return d[2] });


//UTILS

ConnectionUtil = {
  path: function(fromX, fromY, toX, toY) {
    return ["M",fromX,fromY,"Q",cx,cy,toX,toY].join(" ");
  },
  
  replaceFrom: function(path, fromX, fromY) {
    path = path || "M 0 0 Q " + cx + " " + cy + " 0 0"; 
    var frags = path.split(" ");
    frags[1] = fromX;
    frags[2] = fromY;
    return frags.join(" ");
  },
  
  replaceTo: function(path, toX, toY) {
    path = path || "M 0 0 Q 0 0 0 0"; 
    var frags = path.split(" ");
    frags[6] = toX;
    frags[7] = toY;
    return frags.join(" ");
  }  
}