mod5-scatterplot

<!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;
			}

circle {
				fill: #CC3333;
                transition: fill .15s ease-in-out;
				-webkit-transition: fill .15s ease-in-out;
			}

circle: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;
			}

</style>

</head>

<body>

<h1>Total flights vs. flight delays </h1>

<p>Number of U.S. domestic flights vs. percentage of flights delayed by circumstances within the airline's control (December 2014)</p>

// SET UP SCALES
    var xScale = d3.scale.linear()
    					// .domain([ 0, 48 ])    // < put domain below data call,automatically sets domain range based on data
    					.range([ padding[3], w - padding[1] ]); //sets chart pixel width to 240 (300-10-50)

var yScale = d3.scale.linear()
    					.range([ padding[0], h - padding[2] ]);

// SET UP X AXIS GENERATOR
    var xAxis = d3.svg.axis()
    				.scale(xScale)
    				.orient("bottom");

// SET UP Y AXIS GENERATOR
    var yAxis = d3.svg.axis()
    				.scale(yScale)
    				.orient("left")
                    .ticks(7)
                    .tickFormat(function(d) {
                        return d + "%"; //adds percentage symbol to axis
                    });

// 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("mod5-airline.csv", function(data) {

// SET DOMAIN INPUT BASED ON CSV DATA
        xScale.domain([ 0, d3.max(data, function(d) {
        	return +d.totalFlights; 
        }) ]);

//yScale.domain(d3.range(data.length)); <<< //finds the number of items in the data and sets that array as the domain

yScale.domain([d3.max(data, function(d) { 
            return +d.delays2014;
        }), d3.min(data, function(d) { 
            return +d.delays2014 - 1;
        }) ]); //sets the low end to the lowest data value, sets high end to highest data value, and flips order

// DATA JOIN SETUP (BINDING)
        var circles = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle");

// ENTER STAGE, CREATES ELEMENTS
        circles.attr("cx", function(d) {
            return xScale(d.totalFlights);
        }) //makes the x position at number of total flights
            .attr("cy", h) //sets start y position at bottom of svg
            .attr("r", 4)
            .attr("fill-opacity", 0)
            
            .append("title")
            .text(function(d) {
            	return d.Airline + ", " + d.totalFlights + " flights, " + d.delays2014 + "% delays";
            });

circles.transition()
            .delay(200)
            .duration(800)
            .attr("cy", function(d) {
                return yScale(d.delays2014); //animates y position to percentage of delays
            })
            .attr("fill-opacity", 1);

// ADD THE X AXIS SVG
         svg.append("g")
         	.attr("class", "x axis") //attach a class for css selection
         	.attr("transform", "translate(0," + (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>