D3 Examples - College Grants Chart with Scales and Axes

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
.axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
​
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
​
.y.axis path, .y.axis line {
    opacity:0;
}
​
h2 {
    font-family: sans-serif;
    font-size: 24px;
}
​
rect {
    fill:teal;
}
​
rect:hover {
    fill:black;
}
​
.subtext {
    font-family: sans-serif;
    font-size: 14px;
    margin-left:130px;
}
​
a:link, a:visited {
    color:#000;
}
​
</style>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<title>D3 Examples - Loading CSV Data</title>
</head>
​
<body>
    <h2>Provincial Grant Funding for Ontario Colleges - 2013</h2>
    <p class="subtext">Figure 1 - Total of all grants by college (in millions). Source: <a href="https://www.ontario.ca/data-search/vote-open-data?id=37296/postsecondary-education-institution-operating-grants">Ontario Open Data</a></p>
<script>
​
var w = 900;
var h = 500;
var padding = [20,10,30,130]; //top,right,bottom,left
​
var Xscale = d3.scale.linear().range([0, w - padding[1] - padding[3] ]);
var Yscale = d3.scale.ordinal().rangeRoundBands([padding[0], h - padding[2]], 0.2); //.1 = 10% spacing
var Xaxis = d3.svg.axis().scale(Xscale).ticks(5).tickFormat(d3.format("$,.2f")).orient("bottom");
var Yaxis = d3.svg.axis().scale(Yscale).orient("left");
​
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));
    });
​
    Xscale.domain([0, d3.max(data, function(d) {
            return +d.TotalPerCollege;
​
        })]);
​
    Yscale.domain(data.map(function(d){ return d.College; }));
​
    svg.selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x",padding[3])
    .attr("y", function(d) {
            return Yscale(d.College);
        })
    .attr("width", function(d) {
            return Xscale(d.TotalPerCollege);
        })
    .attr("height", Yscale.rangeBand())
   .append("title")
   .text(function(d) {
    return d.College+"'s Total Grant Funding: $"+d.TotalPerCollege;
   })
​
   svg.append("g")
   .attr("class","x axis")
   .attr("transform", "translate("+ padding[3]+ "," + (h - padding[2]) + ")")
   .call(Xaxis);
   svg.append("g")
   .attr("class","y axis")
   .attr("transform", "translate(" + (padding[3] - 5) + ",0)")
   .call(Yaxis);
​
});
​
</script>
</body>
</html>
​
    