D3 Examples - mod5-scatterplot

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;
            }
​
            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>
​
    <script type="text/javascript">
    // CREATE VARIABLES FOR WIDTH AND HEIGHT OF SVG
    var w = 600;
    var h = 400;
    var padding = [ 20, 40, 20, 40 ]; //top, right, bottom, left
​
    // 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>
​
    