D3 Examples - D3 Horizontal Bar Graph: Ontario College Total Funding 2013

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
​
div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;
    margin-right:2px;
    background-color: teal;
}
​
</style>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>D3 Examples - Loading CSV Data</title>
</head>
​
<body>
    <h3>Provincial Grant Funding for Ontario Colleges - 2013</h3>
<script>
​
var w = 800;
var h = 850;
var barpadding = 20;
​
var svg = d3.select("body")
    .append("svg")
    .attr("width",w)
    .attr("height",h);
​
d3.csv("grants.csv",function(data) {
​
    data.sort(function(a,b) {
        return d3.descending(Math.floor(a.TotalPerCollege),Math.floor(b.TotalPerCollege));
    });
​
    svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x",0)
    .attr("y", function(d, i) {
            return i*25;
        })
    .attr("width", function(d) {
            return d.TotalPerCollege*0.000005;
        })
    .attr("height", 20)
   .append("title")
   .text(function(d){
    return d.College+"'s Total Grant Funding: "+d.TotalPerCollege;
   })
​
});
​
</script>
</body>
</html>
​
    