Canada's GHGs since 1990

Canada's Greenhouse Gas Emissions

A quick look at Canada's GHG emissions since 1990.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    #better-then-worse-datavis {
    width: 100%;
    height: 400px;
		}
		rect {
      fill: steelblue;
    }
    circle {
      fill: steelblue;
    }
    text {
      font: 10px sans-serif;
      text-anchor: end;
    }
    path, line {
      stroke: black;
      fill: none;
    }
 
  </style>
</head>

// Find the window dimensions
var margins = {top: 10, right: 10, bottom: 30, left: 30};
var width = parseInt(d3.select("#better-then-worse-datavis").style("width"));
height = parseInt(d3.select("#better-then-worse-datavis").style("height"));

// Setup container & chart dimensions
var container_dimensions = {width: width, height: height},
chart_dimensions = {
    width: container_dimensions.width - margins.left - margins.right,
    height: container_dimensions.height - margins.top - margins.bottom
};

// Setup SVG
var chart = d3.select("#better-then-worse-datavis")
    .append("svg")
    .attr("width", container_dimensions.width)
    .attr("height", container_dimensions.height)
    .append("g")
    .attr("transform", "translate(" + margins.left + "," + margins.top + ")")
    .attr("id","chart");

// Variables for scales & axis
var time_scale, percent_scale;
var time_axis, count_axis;

// Draw function
function draw(data) {
    // Make the data avaialble to the console
    csv_data = data;
    // Get the extent of the data
    var years = d3.extent(data, function(d) { return d.year; });
    var ghgs = d3.extent(data, function(d) { return d.ghgs; });

// Muck with dates
    var low_year = new Date ( years[0] );
    var high_year = new Date ( years[1] );
    low_year = low_year.setDate( low_year.getDate() - 365 );
    high_year = high_year.setDate( high_year.getDate() + 365 );
    var kyoto_year = new Date(1997, 01, 01);
    var cop_year = new Date(2009, 01, 01);

// Setup the scales
    time_scale = d3.time.scale()
        .range([0,chart_dimensions.width])
        .domain([low_year,high_year]);
    percent_scale = d3.scale.linear()
        .range([chart_dimensions.height, 0])
        .domain([ghgs[0]-100,ghgs[1]+10]);

// Setup axis
    time_axis = d3.svg.axis()
        .scale(time_scale);
    count_axis = d3.svg.axis()
        .scale(percent_scale)
        .orient("left");

time_axis.ticks(Math.max(chart_dimensions.height/50, 2));
    count_axis.ticks(Math.max(chart_dimensions.width/50, 2));

// Add the time axis
    chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + chart_dimensions.height + ")")
        .call(time_axis);
    // Add the percent axis
    chart.append("g")
        .attr("class", "y axis")
        .call(count_axis);

// Axis labels
    // Add the y label
    d3.select(".y.axis")
        .append("text")
        .attr("text-anchor","middle")
        .text("Total greenhouse gas emissions")
        .attr("x", -chart_dimensions.height/3)
        .attr("y", -40)
        .attr("transform", "rotate(-90)");

// Create lines for the GHG values
    var line = d3.svg.line()
        .x(function(d){ return time_scale(d.year); })
        .y(function(d){ return percent_scale(d.ghgs); })
        .interpolate("linear");

// Add a group for the lines
    var lines = d3.select("#chart")
        .append("g");
    lines.append("path")
        .attr("class", "line")
        .attr("id", "ghgs")
        .attr("d", line(data));

// Add line for Kyoto target (550 mt)
    var kyoto_target = 550;
    var k = d3.select("#chart");
      k.append("g")
          .attr("class", "k axis")
      .append("line")
          .attr("x1", time_scale(kyoto_year)) // 1997
          .attr("x2", time_scale(high_year)) // end of range
          .attr("y1", percent_scale(kyoto_target)) // equiv of 550
          .attr("y2", percent_scale(kyoto_target)); // equiv of 550
      d3.select(".k").append("text")
        .text("Kyoto target (550 mt)")
        .attr("x", time_scale(high_year))
        .attr("y", percent_scale(kyoto_target)-6);

// Add line for Coppenhagen target (611 mt)
    var cop_target = 611;
    var cop = d3.select("#chart");
      cop.append("g")
          .attr("class", "cop axis")
      .append("line")
          .attr("x1", time_scale(cop_year)) // 2009
          .attr("x2", time_scale(high_year)) // end of range
          .attr("y1", percent_scale(cop_target)) // equiv of 611
          .attr("y2", percent_scale(cop_target)); // equiv of 611
      d3.select(".cop").append("text")
        .text("Copenhagen target (611 mt)")
        .attr("x", time_scale(high_year))
        .attr("y", percent_scale(cop_target)-6);

// Add a group for the circles
    var circles = d3.select("#chart");
    circles.append("g");
    // Add points to line
    circles.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) { return time_scale( d.year ); })
        .attr("cy", function(d) { return percent_scale( d.ghgs ); })
        .attr("r",0)
        .attr("class", "circle");

// Add mouse overs & transitions (GHCs)
    chart.selectAll("circle")
    .on("mouseover", function(d){
        d3.select(this)
        .transition()
        .attr("r",12);
    })
    .on("mouseout", function(d){
        d3.select(this)
        .transition()
        .attr("r",5);
    });
    var enter_duration = 2000;
    chart.selectAll("circle")
        .transition()
        .delay(function(d, i) { return i / data.length * enter_duration; })
        .attr("r", 5);

chart.selectAll("circle")
    .on("mouseover.tooltip", function(d){
        d3.select("text#ghgs").remove();
        d3.select("#chart")
            .append("text")
            .text(d.ghgs + " mt (" + d.year.getFullYear() + ")")
            .attr("x", time_scale(d.year) + 30)
            .attr("y", percent_scale(d.ghgs) - 15)
            .attr("id", "ghgs");
    });
    chart.selectAll("circle")
        .on("mouseout.tooltip", function(d){
            d3.select("text#ghgs")
                .transition()
                .duration(500)
                .style("opacity",0)
                .remove();
    });
};
    
 d3.csv("https://raw.githubusercontent.com/TheTyee/bottom-lines/master/data/data.csv", function(d) {
    return {
        year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
        ghgs: +d.GHGs,
        pop: +d.Population,
        kyoto: +d.Kyoto
    };
}, draw );
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js