D3 Examples - Module5 - Canberra population growth

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Visualization and Infographics with D3! (Module 5)</title>
<meta name="author" content="Matt Smith" />
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
<style>
body { background-color:#FFF; font-family: Helvetica, Arial, sans-serif; }
h1 {  font-size:20px; font-weight:bold }
svg { background-color:#FFF; border-color: #CCC; border-style: solid; border-width: 1px; box-shadow: 4px 4px 1px #EEE; }
.bar:hover { fill: #B20000; }
p { font-size:14px; }
.xaxis path, .xaxis line, .yaxis path, .yaxis line { fill: none; stroke: #CCC; }
text { fill: #000; font-family: Helvetica, Arial, sans-serif; }
.xaxis text, .xlabel, .yaxis text, .ylabel { font-size:12px; }
</style>
</head>
​
<body>
<h1>Population growth projections for Canberra (2010 - 2059)</h1>
<p>This scatterplot shows a projection of the male (x axis) and female (y axis) population (in thousands) of Canberra from 2010 to 2059. Source: <a href="https://www.data.act.gov.au/People-and-Society/Population-Growth/8eq7-rz25">data.act.gov.au</a>, 2014.</p>
<script type="text/javascript">
    // Set width and height
    var w = 600;
    var h = 540;
    var padding = [ 30, 30, 60, 60 ];
    
​
    
    // Set scales
    var xScale = d3.scale.linear()
    .range([ padding[3], w - padding[1] - padding[3] ]);
    var yScale = d3.scale.linear()
    .range([ padding[0], h - padding[2] ]);
    
    // Create svg canvas
    var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
    
    // Create axis
    var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
    
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(12);
    
    // 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);
        });
        // Auto domain scaling
        xScale.domain([ 
        d3.min(popdata, function(d) {
            return +d.MalePop / 1000;
            }), 
        d3.max(popdata, function(d) {
            return +d.MalePop / 1000;
            }) ]);
            
        yScale.domain([ 
        d3.max(popdata, function(d) {
            return +d.FemalePop / 1000;
            }),
        d3.min(popdata, function(d) {
            return +d.FemalePop / 1000;
        }) ]);
        // Set circles variable
        var circles = svg.selectAll("circle")
        .data(popdata)
        .enter()
        .append("circle");
        
        // Bind data to circles
        circles.attr("cx", 0)
        .attr("cy", function(d) {
            return yScale(d.FemalePop / 1000);  
        })
        .attr("r", 0.2)
        .attr("class", "bar")
        .attr("fill", "#99E5FF")
        .append("title")
        .text(function(d) {
            return "In " + d.Year + ", Canberra's projected population will be " + d.Total + " (" + d.MalePop + " Male and " +d.FemalePop + " Female)."
        });
        
        // On load transition - resize circle radius
        circles.sort(function (a, b) {
            return d3.ascending(+a.Year, +b.Year);
        })
        .transition()
        .delay(function(d, i) {
            return i * 40;
        })
        .duration(1600)
        // Bounce rocks !!! (j/k)
        .ease("bounce")
        .attr("r", 4)
        .attr("fill", "#007FFF")
        .attr("cx", function(d) {
            return xScale(d.MalePop / 1000);
        })
        .attr("cy", function(d) {
            return yScale(d.FemalePop / 1000);  
        })
        ;
        
        // Load axis
        svg.append("g")
        .attr("transform", "translate(0," + (h - padding[2])
        + ")")
        .attr("class", "xaxis")
        .call(xAxis);
        
        svg.append("g")
        .attr("transform", "translate(" + padding[3] + ",0)")
        .attr("class", "yaxis")
        .call(yAxis);
        
        // Axis labels
        svg.append("text")
        .attr("class", "xlabel")
        .attr("text-anchor", "end")
        .attr("x", w - 20)
        .attr("y", h - 20)
        .text("Male Population (Thousands)");
        
        svg.append("text")
        .attr("class", "ylabel")
        .attr("transform", "rotate(-90)")
        .attr("text-anchor", "end")
        .attr("x", -20)
        .attr("y", 20)
        .text("Female Population (Thousands)");
        
    });
</script>
</body>
</html>
    