mod4-chart-updated

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Flight delays - Module 4</title>
    
    <script type="text/javascript" src="d3.v3.js"></script>

<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>

// 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>