D3 Examples - First D3 bar chart of emissions data

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Greenhouse gas emissions in 2012</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
        
        <style type = "text/css">
            svg{background-color : #f0f0f0;}
        </style>
    </head>
    <body>
​
        <h1> Greenhouse gas emissions in 2012 by country </h1>
​
        <script type="text/javascript">     
​
        // Add the SVG element
        var svg = d3.select("body")
            .append("svg")
            .attr("width", 600)
            .attr("height", 400);
        
        // Load the greenhouse gas data
        d3.csv("greenhouseGasData2012.csv", function(data) {
            
        // Sort the data
        data.sort(function(a,b) {return d3.descending(+a.totalEmissions, +b.totalEmissions);});
            
        // Create rectangles
        var rects = svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect");
            
        // Set rectangle attributes
        rects.attr("x", 0)
            .attr("y", function(d, i) {return i*12;})
            .attr("width", function(d) {return d.totalEmissions / 12000;})
            .attr("height", 10)
            .attr("fill", "blue")
            .append("title")
                .text(function(d) {return "Total emissions for " + d.Country + " in 2012 are " 
                + Math.round(d.totalEmissions / 1000, 0) + " million tonnes CO2 equivalent.";});
​
        });
        
        </script>
​
    </body>
</html>
    