d3 final - airlines multiline

airlinesData.csv

d3-styles.css

body, svg {
	background-color: #EEEEEE;
	font-family: "Helvetica", sans-serif;
}

h1 {
	font-size: 1.4rem;
	line-height: 1.8rem;
	color: #272727;
}

p {
	font-size: 1rem;
	line-height: 1.2rem;
	color: #272727;
	width: 100%;
	max-width: 700px;
}

p.sourceline {
	font-size: 0.8rem;
}

a {
	color: #367492;
	text-decoration: none;
}

a:hover {
	color: #4DAAD8;
}

path {
	stroke: #663366;
	stroke-width: 2;
	fill: none;
}

.axis path, .axis line {
	fill: none;
	stroke: #666666;
	stroke-width: 1;
	shape-rendering: crispEdges;
}



.axis .minor line {
  stroke: #777;
}



.legend {
    font-size: 12px;
  }
  rect {
    stroke-width: 2;
  }

  .y path {
  	display: none;
  }

  .axis text {
  	margin: 20px;
  }

  .airline {
  	opacity: 0.2;
  	-webkit-transition: opacity .2s;
    transition: opacity .2s;
  }

.airline .line {
  	stroke: #666;
  	stroke-width: 4;
  	opacity: 0.5;
  }

  
  .airline:hover {
  	opacity: 1;
  	cursor: pointer;
  }

 

  .airline:hover {
  	opacity: 1;
  }

d3multiline.js

function drawChart() {

// 1. SETUP MARGIN AND WIDTH, HEIGHT VARIABLES
var margin = { top: 30, right: 20, bottom: 30, left: 50 },
    width = 800 - margin.left - margin.right,
    height = 440 - margin.top - margin.bottom;

// 3b. SETUP DATE, TIME PARSER
var parseDate = d3.time.format('%Y%m%d').parse;

// 4. SET UP RANGES (PIXEL DIMENSIONS)
var x = d3.time.scale().range([0, (width - margin.right*5)]);

var y = d3.scale.linear().range([height, 0]);

/////////COLOR SCALE
var color = d3.scale.category10();




// 6. SET UP X,Y AXIS GENERATORS
var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left')
    .tickFormat(function(d) {
       return d + "%";
       });

// 7. DEFINE LINE
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.delays); });


// 2. SET UP VARIABLE FOR SVG 'CANVAS'
var svg = d3.select('#d3Chart').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


 // ------------- THE CHART BLOCK ----------------
 

// 3a. LOAD CSV DATA & PARSE IT
d3.csv('airlinesData.csv', function(error, data) {
    color.domain(d3.keys(data[0])
    .filter(function(key) { return key !== "date"; }));

    data.forEach(function(d) {
        d.date = parseDate(d.date);
    });

///NOT SURE---------------
var airlines = color.domain().map(function(name) {
    return {
        name: name,
        values: data.map(function(d) {
            return {date: d.date, delays: +d[name]};
        })
    };
});

// 5. SCALE THE RANGE OF THE DATA (SETUP DOMAIN)
    x.domain(d3.extent(data, function(d) { return d.date; }));//extent returns a min and max value
///NOT SURE---------------
    y.domain([0,    d3.max(airlines, function(c) { return d3.max(c.values, function(v) { return v.delays; }); }) 
        ]);

//---------------
var airline = svg.selectAll(".airline")
    .data(airlines)
    .enter().append("g")
    .attr("class", "airline");




// 9. ADD X AXIS SVG
    svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

   
// 10. ADD Y AXIS SVG
    var gy = svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    gy.selectAll("g").filter(function(d) { return d; })
        .classed("minor", true);

// 8. ADD LINE
    airline.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values); });

// ADD TEXT LABELS
    airline.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.delays) + ")"; })
      .attr("class" ,  (function(d) { return d.name; }))
      .attr("x", 10)
      .attr("dy", ".35em")
      .attr("class", "textLabel")
      .text(function(d) { return d.name; });


});


}

window.onload = drawChart;

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>d3-linechart-mod6</title>
    <link rel="stylesheet" type="text/css" href="d3-styles.css" />
    <script type="text/javascript" src="d3.v3.js"></script>

    

</head>

<body>

    <h1>Flight delays</h1>

    <p>Unlike weather delays, carrier delays can be prevented. This chart shows the percentage of U.S. domestic flights delayed by circumstances within the airline&#146;s control (e.g. maintenance, crew problems, fueling).</p>

    <div id="d3Chart"></div>




    <p class="sourceline">Source: <a href="http://www.transtats.bts.gov/OT_Delay/OT_DelayCause1.asp">Bureau of Transportation Statistics</a></p>

    <script type="text/javascript" src="d3multiline.js"></script>


</body>	



</html>