Last active
August 29, 2015 14:13
-
-
Save timcameron/6c8fc29724c725e3d71d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!function(){ | |
var bP={}; | |
var b=30, bb=150, height=600, buffMargin=1, minHeight=14; | |
var c1=[-130, 40], c2=[-50, 100], c3=[-10, 140]; //Column positions of labels. | |
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; | |
}(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body{ | |
width:1200px; | |
margin:100px auto; | |
} | |
svg text{ | |
font-size:12px; | |
} | |
rect{ | |
shape-rendering:crispEdges; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="biPartite.js"></script> | |
<script> | |
var sales_data=[ | |
['E-FT','E-FT',6], | |
['E-FT','E-PT',0.3], | |
['E-FT','UE',0.04], | |
['E-FT','NILF',0.11], | |
['E-PT','E-FT',0.4], | |
['E-PT','E-PT',2.4], | |
['E-PT','UE',0], | |
['E-PT','NILF',0.21], | |
['UE','E-FT',0.05], | |
['UE','E-PT',0.1], | |
['UE','UE',0.3], | |
['UE','NILF',0.1], | |
['NILF','E-FT',0.1], | |
['NILF','E-PT',0.2], | |
['NILF','UE',0.2], | |
['NILF','NILF',4.71] | |
]; | |
var width = 1100, height = 610, margin ={b:0, t:40, l:170, r:50}; | |
var svg = d3.select("body") | |
.append("svg").attr('width',width).attr('height',(height+margin.b+margin.t)) | |
.append("g").attr("transform","translate("+ margin.l+","+margin.t+")"); | |
var data = [ | |
{data:bP.partData(sales_data,2), id:'SalesAttempts', header:["Status","Status", "Labour force Transitions"]}, | |
]; | |
bP.draw(data, svg); | |
</script> | |
<br> | |
<br> | |
<b> E-FT </b> - Employed Full Time <br> | |
<b> E-PT </b> - Employed Part Time <br> | |
<b> NILF </b> - Not in Labour Force <br> | |
<b> UE </b> - Unemployed <br> | |
<br> | |
Numbers from GM1 datacube which suffers from some non-response issues (notably, the unemployment rate is too low) | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment