D3 Examples - mod4-chart-updated

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <meta charset="utf-8">
    <title>Flight delays - Module 4</title>
    <!-- LINK TO D3 -->
    <script type="text/javascript" src="d3.v3.js"></script>
​
​
    <!-- SET UP CSS STYLES -->
    <style type="text/css">
            
            body {
                background-color: white;
                font-family: sans-serif;
            }
​
            h1 {
                font-size: 20px;
                margin: 0;
            }
​
            p {
                font-size: 14px;
                margin: 5px 0 0 0;
                width: 500px;
            }
​
            svg {
                background-color: white;
            }
​
            rect {
                fill: #cccccc;
                transition: fill .15s ease-in-out;
                -webkit-transition: fill .15s ease-in-out;
            }
​
            rect:hover {
                fill: #CC3333;
            }
​
            /*STYLES FOR SVG AXIS*/
            .axis path, .axis line {
                fill: none;
                stroke: #999999;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
                color: #999999;
            }
​
            .y.axis path, .y.axis line {
                opacity: 0;
            }
​
        </style>
​
</head>
​
<body>
​
    <h1>Flight delays</h1>
​
    <p>Percentage of U.S. domestic flights delayed by circumstances within the airline's control (December 2014)</p>
​
    <script type="text/javascript">
    // CREATE VARIABLES FOR WIDTH AND HEIGHT OF SVG
    var w = 500;
    var h = 400;
    var padding = [ 20, 10, 20, 120 ]; //top, right, bottom, left
​
    // SET UP SCALES
    var widthScale = d3.scale.linear()
                        // .domain([ 0, 48 ])    // < put domain below data call,automatically sets domain range based on data
                        .range([ 0, w - padding[1] - padding[3] ]); //sets chart pixel width to 240 (300-10-50)
​
    var heightScale = d3.scale.ordinal()
                        .rangeRoundBands([ padding[0], h - padding[2] ], 0.1);
​
    // SET UP X AXIS GENERATOR
    var xAxis = d3.svg.axis()
                    .scale(widthScale)
                    .orient("bottom");
​
    // SET UP Y AXIS GENERATOR
    var yAxis = d3.svg.axis()
                    .scale(heightScale)
                    .orient("left");
​
    // SET UP VARIABLE TO CREATE THE SVG 'CANVAS'
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);
​
// ------------- THE CHART BLOCK ----------------
    // LOAD CSV DATA
    d3.csv("airline_carrier_delay2014v3.csv", function(data) {
​
        // SORT DATA ALPHABETICALLY
        data.sort(function(a, b) {
            return d3.descending(+a.Dec_2014, +b.Dec_2014); // adding the + ensures that the data is treated as numbers and not strings
        });
​
        // SET DOMAIN INPUT BASED ON CSV DATA
        widthScale.domain([ 0, d3.max(data, function(d) {
            return +d.Dec_2014; 
        }) ]);
​
        //heightScale.domain(d3.range(data.length)); <<< //finds the number of items in the data and sets that array as the domain
​
        heightScale.domain(data.map(function(d) { return d.Airline;
        } )); //finds the number of items in the data and sets that array as the domain
​
​
        // DATA JOIN SETUP (BINDING)
        var rects = svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect");
​
        // ENTER STAGE, CREATES ELEMENTS
        rects.attr("x", padding[3]) //makes the x position at 120px
            .attr("y", function(d, i) {
                // return heightScale(i); >>> //sets y position based on band
                return heightScale(d.Airline); //sets y position based on data value
            })
            .attr("width", function(d) {
                return widthScale(d.Dec_2014); //wrap data in the scale function
            })
            .attr("height", heightScale.rangeBand())
            // .attr("fill", "#999999")
            .append("title")
            .text(function(d) {
                return d.Airline + ", " + d.Dec_2014 + "%";
            });
​
         // ADD THE X AXIS SVG
         svg.append("g")
            .attr("class", "x axis") //attach a class for css selection
            .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") //positions with translate attribute as translate(120,380)
            .call(xAxis);
​
         // ADD THE Y AXIS SVG
         svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + (padding[3] - 5) + ",0)")
            .call(yAxis);
    });
​
// ------------------END CHART BLOCK ------------------
​
​
    </script>
    <p>Source: Bureau of Transportation Statistics</p>
</body>
​
</html>
​
    