D3 Examples - Module6 - Canberra population growth

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Data Visualization and Infographics with D3! (Module 6)</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; }
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; }
.malekey { fill: #00008C; }
.femalekey { fill: #FFBFFF; }
.totalkey { fill: #EEE; opacity: .8; }
</style>
</head>
​
<body>
<h1>Population growth projections for Canberra (2010 - 2059)</h1>
<p>This chart shows a projection of the male  and female 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 date format
    var dateFormat = d3.time.format("%Y");
​
    // Set scales
    var xScale = d3.time.scale()
    .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")
    .tickFormat(function(d) {
        return dateFormat(d);
    });
    
    var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(12);
    
    // Generate svg area chart
    var TotalArea = d3.svg.area()
    .x(function(d) {
        return xScale(dateFormat.parse(d.Year));
    })
    .y0(h - padding[2])
    .y1(function(d) {
        return yScale(d.Total);
    })
    
    // Generate svg line chart
    
    var MaleLine = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.Year));
    })
    .y(function(d) {
        return yScale(d.MalePop);
    })
    
    var FemaleLine = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.Year));
    })
    .y(function(d) {
        return yScale(d.FemalePop);
    })
    
    // 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 dateFormat.parse(d.Year);
            }), 
        d3.max(popdata, function(d) {
            return dateFormat.parse(d.Year);
            }) ]);
            
        yScale.domain([ 
        d3.max(popdata, function(d) {
            return +d.Total;
            }), 0
        
         ]);
        
        // Draw svg lines and area
        svg.data([popdata])
        .append("path")
        .attr("class", "totalarea")
        .attr("d", TotalArea)
        .attr("fill", "#EEE")
        .attr("stroke", "#EEE")
        .attr("stroke-width", 3)
        .attr("opacity", 0) 
        .transition()
        .delay(1000)
        .duration(1500)
        .attr("opacity", .8);
        
        svg.data([popdata])
        .append("path")
        .attr("d", MaleLine)
        .attr("fill", "none")
        .attr("stroke", "#00008C")
        .attr("stroke-width", 4)
        .attr("Text", "Male population")
        
        svg.data([popdata])
        .append("path")
        .attr("d", FemaleLine)
        .attr("fill", "none")
        .attr("stroke", "#FFBFFF")
        .attr("stroke-width", 4)
        
        // 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", 214)
        .attr("y", h - 16)
        .text("Male Population Growth");
        
        svg.append("text")
        .attr("class", "xlabel")
        .attr("text-anchor", "end")
        .attr("x", 390)
        .attr("y", h - 16)
        .text("Female Population Growth");
        
        svg.append("text")
        .attr("class", "xlabel")
        .attr("text-anchor", "end")
        .attr("x", 496)
        .attr("y", h - 16)
        .text("Total Growth");
        
        svg.append("rect")
        .attr("x", 60)
        .attr("y", h - 30)
        .attr("width", "20")
        .attr("height", "20")
        .attr("class", "malekey");
        
        svg.append("rect")
        .attr("x", 220)
        .attr("y", h - 30)
        .attr("width", "20")
        .attr("height", "20")
        .attr("class", "femalekey");
        
        svg.append("rect")
        .attr("x", 400)
        .attr("y", h - 30)
        .attr("width", "20")
        .attr("height", "20")
        .attr("class", "totalkey");     
    });
</script>
</body>
</html>
    