Last active
August 29, 2015 14:13
-
-
Save timcameron/46203914b289154d4927 to your computer and use it in GitHub Desktop.
Australian labour force transitions
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=[ | |
['FT','FT',6], | |
['FT','PT',0.3], | |
['FT','UE',0], | |
['FT','NILF',0.11], | |
['PT','FT',0.4], | |
['PT','PT',2.4], | |
['PT','UE',0], | |
['PT','NILF',0.2], | |
['UE','FT',0], | |
['UE','PT',0.1], | |
['UE','UE',0.3], | |
['UE','NILF',0.1], | |
['NILF','FT',0.1], | |
['NILF','PT',0.2], | |
['NILF','UE',0.2], | |
['NILF','NILF',4.7] | |
]; | |
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> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment