D3 Examples - Updated bar chart with axis and scales

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Module 4 - complete bar chart...</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.axis path, 
            .x.axis line
            {stroke-width: 1px; stroke: #aaaaaa;}
            
            .y.axis path,
            .y.axis line{opacity: 0;}
                        
            rect:hover {fill: orange;}
                
        </style>
    </head>
    <body>
​
        <h1> Greenhouse gas emissions in 2012 </h1>
        <p> In millions of tonnes of CO2 equivalent. Source: <a href = "https://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en"> OECD </a> </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 : 20, l : 100}
​
        // Define scale ranges
        var xScale = d3.scale.linear().range([0,w - pad.l - pad.r]);
        var yScale = d3.scale.ordinal().rangeRoundBands([pad.b, h - pad.t], 0.1);
​
        // Define number formats
        var fmtStandard = d3.format(",g");
​
        // Add the SVG element
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
        
        // Load the greenhouse gas data
        d3.csv("greenhouseGasData2012.csv", function(data) {
            
            // 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(data.map(function(d) {return d.Country;}));
        
            // Define axes
            var xAxis = d3.svg.axis().scale(xScale).orient("top")
                .ticks(5)
                .tickFormat(fmtStandard);
                
            var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
        
            // Create rectangles
            var rects = svg.selectAll("rect")
                .data(data)
                .enter()
                .append("rect");
            
            // Set rectangle attributes
            rects.attr("x", pad.l)
                .attr("y", function(d, i) {return yScale(d.Country);})
                .attr("width", function(d) {return xScale(d.totalEmissions);})
                .attr("height", yScale.rangeBand())
                .attr("fill", "steelblue")
                .append("title")
                    .text(function(d) {return "Total emissions for " + d.Country + " in 2012 are " 
                    + fmtStandard(Math.round(d.totalEmissions, 0)) + " million tonnes CO2 equivalent.";});
​
                // Add axes
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate (" + pad.l + "," + (pad.t*0.90) + ")")
                    .call(xAxis);
                    
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate (" + (pad.l-1)  + ",0)")
                    .call(yAxis);
​
        });
                
        </script>
​
    </body>
</html>
    