D3 Examples - Module3 - Canberra population growth

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Visualization and Infographics with D3! (Module 3)</title>
<meta name="author" content="Matt Smith" />
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style>
body { background-color:#EEE; }
h1 { font-family: Arial, sans-serif ; font-size:20px; font-weight:bold }
svg { background-color:#FFF; border-color: #CCC; border-style: solid; border-width: 1px; box-shadow: 4px 4px 2px #888888; padding: 2px 0px 0px 2px; }
.bar { fill: #72EF90; }
text, p { font-family: Arial, sans-serif; font-size:12px; fill: #000; font-weight:bold }
</style>
</head>
​
<body>
<h1>Population growth projections for Canberra (2010 - 2059)</h1>
<p>This horizontal bar graph shows a projection of the total population of Canberra. The projection charts an increase of approximately one hundred and seventy thousand people over the next fourty four years.</p>
<script type="text/javascript">
    // Create svg canvas
    var svg = d3.select("body")
    .append("svg")
    .attr("width", 640)
    .attr("height", 1000);
    
    // Load external data file
    d3.csv("Population_Growth_Canberra.csv", function(popdata){
        // Sort data by Year
        popdata.sort(function(a, b){
            return d3.ascending(a.Year, b.Year);
        });
        // Set rects variable
        var rects = svg.selectAll("rects")
        .data(popdata)
        .enter()
        .append("rect");
        
        // Bind data to rectangles
        rects.attr("x", 0)
        .attr("y", function(d, i) {
            return i * 20;  
        })
        .attr("width", function(d) {
            return d.Total / 1000;
        })
        .attr("height", 18)
        .attr("class", "bar")
        .append("title")
        .text(function(d) {
            return "In the year " + d.Year + ", Canberra's total projected population will be " + d.Total + "."
        });
        
        //Set Labels
        var labels = svg.selectAll("text")
        .data(popdata)
        .enter()
        .append("text")
        .text (function(d) {
            return d.Year + ": " + d.Total;
        });
        
        labels.attr("x", 10)
        .attr("y", function (d, i) {
            return (i * 20) + 14;
        }); 
    });
</script>
</body>
</html>
    