D3 Examples - Module 5 - Scatterplot of greenhouse gas emissions

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module 5 - Scatter plot</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        
        <!-- CSS styles-->
        
        <style type = "text/css">
            
            body {  background-color: white;
                    font-family: Helvetica, Arial, sans-serif;}
                    
            h1 {font-size: 20px;
                margin: 0;}
            
            p{font-family: Georgia;}
            
            .axis path, .axis line {
                fill : none;
                stroke : black;
                shape-rendering : crispEdges;
            }   
                
            .axis text {font-family : sans-serif;
                        font-size : 11px;}
            
            .x.label, .y.label  {font-family : Georgia;
                        font-size : 14px;}
        
                        
            .x.axis path,
            .x.axis line,
            .y.axis path,
            .y.axis line
            {stroke-width: 1px; stroke: #aaaaaa;}
            
            /* .y.axis path,
            .y.axis line{opacity: 0;} */
                        
            circle:hover {fill: orange;}
                
        </style>
    </head>
    <body>
​
        <h1> Greenhouse gas emissions, total and per capita, in 2012 </h1>
        <p style = "font-size : 12px"> In millions of tonnes of CO2 equivalent. Source: <a href = "https://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en"> OECD </a> </p>
        <p style = "font-size : 12px"> Each point on the chart represents a country. Countries towards the top left tend to have relatively high 
        levels of greenhouse gas emissions per person, but low total emissions due to low population. Countries towards
         the top right have high emissions both per capita and overall. </p>
​
        <p style = "font-size : 12px"> The chart could be improved with some colour-coding on the points (e.g. where the colour
        indicates a country's continent), and some animation showing how the figures change over the years. </p>
​
        <script type="text/javascript">     
​
        // Set width and height of SVG
        var h = 600;
        var w = 800;
        // Padding: Top, right, bottom, left
        var pad = {t : 20, r : 10, b : 50, l : 100}
​
        // Define scale ranges
        var xScale = d3.scale.linear().range([0,w - pad.l - pad.r]);
        var yScale = d3.scale.linear().range([0, h - pad.t - pad.b]);
​
        // Define number formats
        var fmtStandard = d3.format(",g");
        var fmt2dp = d3.format(",.2f");
​
        // Add the SVG element
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
        
        // Set up global variable to contain data
        var data;
        
        function makeChart() {
            
                // First, get the emissions values in millions of tonnes of CO2 equivalent
                for (var i=0; i<=data.length - 1; i++) {
                    data[i].totalEmissions = +data[i].totalEmissions / 1000;};
        
                // Sort the data
                data.sort(function(a,b) {return d3.descending(+a.totalEmissions, +b.totalEmissions);});
    
                // Define scale domains
                xScale.domain([0, d3.max(data, function(d) {return +d.totalEmissions;})]);
                yScale.domain([d3.max(data, function(d) {return +d.emissionsPerCapita * 1.05 ;}), 0]);
​
                // Define axes
                var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
                    .ticks(5)
                    .tickFormat(fmtStandard);
        
                var yAxis = d3.svg.axis().scale(yScale).orient("left")
                    .tickFormat(fmtStandard);
​
                // Create cirlces
                var circles = svg.selectAll("circle")
                    .data(data)
                    .enter()
                    .append("circle");
    
                // Set circle attributes
                circles.attr("cx", function(d) {return xScale(d.totalEmissions) + pad.l; })
                    .attr("cy", function(d) {return yScale(d.emissionsPerCapita) + pad.t ; })
                    .attr("r", 5)
                    .attr("fill", "steelblue")
                    .append("title")
                        .text(function(d) {return "Total emissions for " + d.Country + " in 2012 are " 
                        + fmtStandard(Math.round(d.totalEmissions)) 
                        + " million tonnes CO2 equivalent, and emissions per capita are " 
                        + fmt2dp(d.emissionsPerCapita) + " thousand kg."
                    ;});
​
                // Add axes
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate (" + pad.l + "," + (h - pad.b) + ")")
                    .call(xAxis);
        
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate (" + pad.l  + "," + pad.t + ")")
                    .call(yAxis);
        
                // x axis label
                svg.append("text")
                    .text("Total emissions (million tonnes CO2 equivalent)")
                    .attr("class", "x label")
                    .attr("x", (pad.l + ((w-pad.r-pad.l) /2 )))
                    .attr("y", (h-(pad.b*0.25)))
                    .attr("text-anchor", "middle");
        
                // y axis label
                var yLabelX = pad.l*0.5
                var yLabelY = pad.t + ((h-pad.t-pad.b) /2) 
                svg.append("text")
                    .text("Total emissions per capita (thousand kgs CO2 equivalent)")
                    .attr("class", "y label")
                    .attr("x", yLabelX)
                    .attr("y", yLabelY)
                    .attr("transform", "rotate(-90 " + yLabelX + "," + yLabelY + ")")
                    .attr("text-anchor", "middle");
    
        };
        
        // Load the greenhouse gas data
        d3.csv("greenhouseGasData2012.csv", function (error, d) {
            if (error) {console.log(error);}
            else {
                data = d;
                makeChart();
            }
        });
                
        </script>
​
    </body>
</html>
    