Viz
<rect y="0" height="20" width="700" style="fill:red;"/>
<text y="15" x="710">AS</text>
<rect y="25" height="20" width="81.74235403151066" style="fill:red;"/>
<text y="40" x="91.74235403151066">BU</text>
<rect y="50" height="20" width="30.058696323756564" style="fill:red;"/>
<text y="65" x="40.058696323756564">EB</text>
<rect y="75" height="20" width="123.91102873030584" style="fill:red;"/>
<text y="90" x="133.91102873030584">EN</text>
<rect y="100" height="20" width="11.02873030583874" style="fill:red;"/>
<text y="115" x="21.028730305838742">GR</text>
<rect y="125" height="20" width="20.759962928637627" style="fill:red;"/>
<text y="140" x="30.759962928637627">JR</text>
<rect y="150" height="20" width="38.05993203583565" style="fill:red;"/>
<text y="165" x="48.05993203583565">LW</text>
<rect y="175" height="20" width="52.11615693543405" style="fill:red;"/>
<text y="190" x="62.11615693543405">MB</text>
<rect y="200" height="20" width="6.487488415199259" style="fill:red;"/>
<text y="215" x="16.48748841519926">XX</text>
<rect y="225" height="20" width="4.10874266295953" style="fill:red;"/>
<text y="240" x="14.10874266295953">undefined</text>
<rect y="250" height="20" width="12.974976830398518" style="fill:red;"/>
<text y="265" x="22.974976830398518">AP</text>
Solution: SVG Template
<rect y="${y}" height="20" width="${width}" style="fill:red;"/>
<text y="${y+15}" x="${width+10}">${name}</text>
Solution: Javascript
var counts = _(data).groupBy('CrsPBAColl').map(function(group, name){
return {
name : name,
count : group.length
};
}).value();
var max = _(counts).pluck('count').max();
function computeWidth(d, i) {
return d.count*(700/max);
}
var result = _.map(counts, function(count, i){
return template({
y : 25*i,
width : count.count*(700/max),
name : count.name
});
})
return result.join('\n\n')