index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg text{
font-size:12px;
}
rect{
shape-rendering:crispEdges;
}
</style>
<body>
<div style = "width:100%;height:100%;">
<svg id = "bipartite_svg" style = "width:90%;height:90%" viewbox = "0 0 1100 610" preserveAspectRatio="xMidYMid">
</svg>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="biPartite.js"></script>
<script>
var sales_data=[
['Lite','AL',16,0],
['Small','AL',1278,4],
['Medium','AL',27,0],
['Plus','AL',58,0],
['Grand','AL',1551,15],
['Elite','AL',141,0],
['Lite','AZ',5453,35],
['Small','AZ',683,1],
['Medium','AZ',862,0],
['Grand','AZ',6228,30],
['Lite','CA',15001,449],
['Small','CA',527,3],
['Medium','CA',836,0],
['Plus','CA',28648,1419],
['Grand','CA',3,0],
['Lite','CO',13,0],
['Small','CO',396,0],
['Medium','CO',362,0],
['Plus','CO',78,10],
['Grand','CO',2473,32],
['Elite','CO',2063,64],
['Medium','DE',203,0],
['Grand','DE',686,2],
['Elite','DE',826,0],
['Lite','FL',1738,110],
['Small','FL',12925,13],
['Medium','FL',15413,0],
['Small','GA',2166,2],
['Medium','GA',86,0],
['Plus','GA',348,3],
['Grand','GA',4244,18],
['Elite','GA',1536,1],
['Small','IA',351,0],
['Grand','IA',405,1],
['Small','IL',914,1],
['Medium','IL',127,0],
['Grand','IL',1470,7],
['Elite','IL',516,1],
['Lite','IN',43,0],
['Small','IN',667,1],
['Medium','IN',172,0],
['Plus','IN',149,1],
['Grand','IN',1380,5],
['Elite','IN',791,23],
['Small','KS',1,0],
['Grand','KS',1,0],
['Small','MD',1070,1],
['Grand','MD',1171,2],
['Elite','MD',33,0],
['Plus','ME',1,0],
['Small','MS',407,0],
['Medium','MS',3,0],
['Grand','MS',457,2],
['Elite','MS',20,0],
['Small','NC',557,0],
['Medium','NC',167,0],
['Plus','NC',95,1],
['Grand','NC',1090,5],
['Elite','NC',676,6],
['Lite','NM',1195,99],
['Small','NM',350,3],
['Medium','NM',212,0],
['Grand','NM',1509,8],
['Lite','NV',3899,389],
['Small','NV',147,0],
['Medium','NV',455,0],
['Plus','NV',1,1],
['Grand','NV',4100,16],
['Lite','OH',12,0],
['Small','OH',634,2],
['Medium','OH',749,0],
['Plus','OH',119,1],
['Grand','OH',3705,19],
['Elite','OH',3456,25],
['Small','PA',828,2],
['Medium','PA',288,0],
['Plus','PA',141,0],
['Grand','PA',2625,7],
['Elite','PA',1920,10],
['Small','SC',1146,2],
['Medium','SC',212,0],
['Plus','SC',223,4],
['Grand','SC',1803,6],
['Elite','SC',761,8],
['Small','TN',527,0],
['Medium','TN',90,0],
['Grand','TN',930,4],
['Elite','TN',395,1],
['Lite','TX',7232,58],
['Small','TX',1272,0],
['Medium','TX',1896,0],
['Plus','TX',1,0],
['Grand','TX',10782,33],
['Elite','TX',1911,3],
['Small','VA',495,0],
['Medium','VA',32,0],
['Plus','VA',7,0],
['Grand','VA',1557,12],
['Elite','VA',24,0],
['Small','WA',460,1],
['Plus','WA',88,3],
['Grand','WA',956,3],
['Small','WV',232,0],
['Medium','WV',71,0],
['Grand','WV',575,2],
['Elite','WV',368,3]
];
var width = 1100, height = 610, margin ={b:0, t:40, l:170, r:50};
var svg = d3.select("#bipartite_svg")
.append("g").attr("transform","translate("+ margin.l+","+margin.t+")");
var data = [
{data:bP.partData(sales_data,2), id:'SalesAttempts', header:["Channel","State", "Sales Attempts"]},
{data:bP.partData(sales_data,3), id:'Sales', header:["Channel","State", "Sales"]}
];
bP.draw(data, svg);
</script>
</body>
biPartite.js
!function(){
var bP={};
var b=30, bb=150, height=600, buffMargin=1, minHeight=14;
var c1=[-130, 40], c2=[-50, 100], c3=[-10, 140];
var colors =["#3366CC", "#DC3912", "#FF9900","#109618", "#990099", "#0099C6"];
bP.partData = function(data,p){
var sData={};
sData.keys=[
d3.set(data.map(function(d){ return d[0];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);}),
d3.set(data.map(function(d){ return d[1];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);})
];
sData.data = [ sData.keys[0].map( function(d){ return sData.keys[1].map( function(v){ return 0; }); }),
sData.keys[1].map( function(d){ return sData.keys[0].map( function(v){ return 0; }); })
];
data.forEach(function(d){
sData.data[0][sData.keys[0].indexOf(d[0])][sData.keys[1].indexOf(d[1])]=d[p];
sData.data[1][sData.keys[1].indexOf(d[1])][sData.keys[0].indexOf(d[0])]=d[p];
});
return sData;
}
function visualize(data){
var vis ={};
function calculatePosition(a, s, e, b, m){
var total=d3.sum(a);
var sum=0, neededHeight=0, leftoverHeight= e-s-2*b*a.length;
var ret =[];
a.forEach(
function(d){
var v={};
v.percent = (total == 0 ? 0 : d/total);
v.value=d;
v.height=Math.max(v.percent*(e-s-2*b*a.length), m);
(v.height==m ? leftoverHeight-=m : neededHeight+=v.height );
ret.push(v);
}
);
var scaleFact=leftoverHeight/Math.max(neededHeight,1), sum=0;
ret.forEach(
function(d){
d.percent = scaleFact*d.percent;
d.height=(d.height==m? m : d.height*scaleFact);
d.middle=sum+b+d.height/2;
d.y=s + d.middle - d.percent*(e-s-2*b*a.length)/2;
d.h= d.percent*(e-s-2*b*a.length);
d.percent = (total == 0 ? 0 : d.value/total);
sum+=2*b+d.height;
}
);
return ret;
}
vis.mainBars = [
calculatePosition( data.data[0].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight),
calculatePosition( data.data[1].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight)
];
vis.subBars = [[],[]];
vis.mainBars.forEach(function(pos,p){
pos.forEach(function(bar, i){
calculatePosition(data.data[p][i], bar.y, bar.y+bar.h, 0, 0).forEach(function(sBar,j){
sBar.key1=(p==0 ? i : j);
sBar.key2=(p==0 ? j : i);
vis.subBars[p].push(sBar);
});
});
});
vis.subBars.forEach(function(sBar){
sBar.sort(function(a,b){
return (a.key1 < b.key1 ? -1 : a.key1 > b.key1 ?
1 : a.key2 < b.key2 ? -1 : a.key2 > b.key2 ? 1: 0 )});
});
vis.edges = vis.subBars[0].map(function(p,i){
return {
key1: p.key1,
key2: p.key2,
y1:p.y,
y2:vis.subBars[1][i].y,
h1:p.h,
h2:vis.subBars[1][i].h
};
});
vis.keys=data.keys;
return vis;
}
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return edgePolygon(i(t));
};
}
function drawPart(data, id, p){
d3.select("#"+id).append("g").attr("class","part"+p)
.attr("transform","translate("+( p*(bb+b))+",0)");
d3.select("#"+id).select(".part"+p).append("g").attr("class","subbars");
d3.select("#"+id).select(".part"+p).append("g").attr("class","mainbars");
var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
.selectAll(".mainbar").data(data.mainBars[p])
.enter().append("g").attr("class","mainbar");
mainbar.append("rect").attr("class","mainrect")
.attr("x", 0).attr("y",function(d){ return d.middle-d.height/2; })
.attr("width",b).attr("height",function(d){ return d.height; })
.style("shape-rendering","auto")
.style("fill-opacity",0).style("stroke-width","0.5")
.style("stroke","black").style("stroke-opacity",0);
mainbar.append("text").attr("class","barlabel")
.attr("x", c1[p]).attr("y",function(d){ return d.middle+5;})
.text(function(d,i){ return data.keys[p][i];})
.attr("text-anchor","start" );
mainbar.append("text").attr("class","barvalue")
.attr("x", c2[p]).attr("y",function(d){ return d.middle+5;})
.text(function(d,i){ return d.value ;})
.attr("text-anchor","end");
mainbar.append("text").attr("class","barpercent")
.attr("x", c3[p]).attr("y",function(d){ return d.middle+5;})
.text(function(d,i){ return "( "+Math.round(100*d.percent)+"%)" ;})
.attr("text-anchor","end").style("fill","grey");
d3.select("#"+id).select(".part"+p).select(".subbars")
.selectAll(".subbar").data(data.subBars[p]).enter()
.append("rect").attr("class","subbar")
.attr("x", 0).attr("y",function(d){ return d.y})
.attr("width",b).attr("height",function(d){ return d.h})
.style("fill",function(d){ return colors[d.key1];});
}
function drawEdges(data, id){
d3.select("#"+id).append("g").attr("class","edges").attr("transform","translate("+ b+",0)");
d3.select("#"+id).select(".edges").selectAll(".edge")
.data(data.edges).enter().append("polygon").attr("class","edge")
.attr("points", edgePolygon).style("fill",function(d){ return colors[d.key1];})
.style("opacity",0.5).each(function(d) { this._current = d; });
}
function drawHeader(header, id){
d3.select("#"+id).append("g").attr("class","header").append("text").text(header[2])
.style("font-size","20").attr("x",108).attr("y",-20).style("text-anchor","middle")
.style("font-weight","bold");
[0,1].forEach(function(d){
var h = d3.select("#"+id).select(".part"+d).append("g").attr("class","header");
h.append("text").text(header[d]).attr("x", (c1[d]-5))
.attr("y", -5).style("fill","grey");
h.append("text").text("Count").attr("x", (c2[d]-10))
.attr("y", -5).style("fill","grey");
h.append("line").attr("x1",c1[d]-10).attr("y1", -2)
.attr("x2",c3[d]+10).attr("y2", -2).style("stroke","black")
.style("stroke-width","1").style("shape-rendering","crispEdges");
});
}
function edgePolygon(d){
return [0, d.y1, bb, d.y2, bb, d.y2+d.h2, 0, d.y1+d.h1].join(" ");
}
function transitionPart(data, id, p){
var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
.selectAll(".mainbar").data(data.mainBars[p]);
mainbar.select(".mainrect").transition().duration(500)
.attr("y",function(d){ return d.middle-d.height/2;})
.attr("height",function(d){ return d.height;});
mainbar.select(".barlabel").transition().duration(500)
.attr("y",function(d){ return d.middle+5;});
mainbar.select(".barvalue").transition().duration(500)
.attr("y",function(d){ return d.middle+5;}).text(function(d,i){ return d.value ;});
mainbar.select(".barpercent").transition().duration(500)
.attr("y",function(d){ return d.middle+5;})
.text(function(d,i){ return "( "+Math.round(100*d.percent)+"%)" ;});
d3.select("#"+id).select(".part"+p).select(".subbars")
.selectAll(".subbar").data(data.subBars[p])
.transition().duration(500)
.attr("y",function(d){ return d.y}).attr("height",function(d){ return d.h});
}
function transitionEdges(data, id){
d3.select("#"+id).append("g").attr("class","edges")
.attr("transform","translate("+ b+",0)");
d3.select("#"+id).select(".edges").selectAll(".edge").data(data.edges)
.transition().duration(500)
.attrTween("points", arcTween)
.style("opacity",function(d){ return (d.h1 ==0 || d.h2 == 0 ? 0 : 0.5);});
}
function transition(data, id){
transitionPart(data, id, 0);
transitionPart(data, id, 1);
transitionEdges(data, id);
}
bP.draw = function(data, svg){
data.forEach(function(biP,s){
svg.append("g")
.attr("id", biP.id)
.attr("transform","translate("+ (550*s)+",0)");
var visData = visualize(biP.data);
drawPart(visData, biP.id, 0);
drawPart(visData, biP.id, 1);
drawEdges(visData, biP.id);
drawHeader(biP.header, biP.id);
[0,1].forEach(function(p){
d3.select("#"+biP.id)
.select(".part"+p)
.select(".mainbars")
.selectAll(".mainbar")
.on("mouseover",function(d, i){ return bP.selectSegment(data, p, i); })
.on("mouseout",function(d, i){ return bP.deSelectSegment(data, p, i); });
});
});
}
bP.selectSegment = function(data, m, s){
data.forEach(function(k){
var newdata = {keys:[], data:[]};
newdata.keys = k.data.keys.map( function(d){ return d;});
newdata.data[m] = k.data.data[m].map( function(d){ return d;});
newdata.data[1-m] = k.data.data[1-m]
.map( function(v){ return v.map(function(d, i){ return (s==i ? d : 0);}); });
transition(visualize(newdata), k.id);
var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
.selectAll(".mainbar").filter(function(d,i){ return (i==s);});
selectedBar.select(".mainrect").style("stroke-opacity",1);
selectedBar.select(".barlabel").style('font-weight','bold');
selectedBar.select(".barvalue").style('font-weight','bold');
selectedBar.select(".barpercent").style('font-weight','bold');
});
}
bP.deSelectSegment = function(data, m, s){
data.forEach(function(k){
transition(visualize(k.data), k.id);
var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
.selectAll(".mainbar").filter(function(d,i){ return (i==s);});
selectedBar.select(".mainrect").style("stroke-opacity",0);
selectedBar.select(".barlabel").style('font-weight','normal');
selectedBar.select(".barvalue").style('font-weight','normal');
selectedBar.select(".barpercent").style('font-weight','normal');
});
}
this.bP = bP;
}();