Flights from Belgian airports

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Flights from Belgium</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<style type="text/css">

body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
                width: 1100px;
                margin: auto;
                margin-top: 0px;
                border-right : 6px solid black;
                border-left : 6px solid black;
                border-top: 0;
			}

h1 {
				font-size: 24px;
				margin-left: 100px;
                padding-top: 10px;
			}

p {
				font-size: 14px;
				margin: 10px 100px 0 100px;
			}

path:hover {
				fill: #554391;
			}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

</style>
	</head>
	<body>

<h1>Flights from Belgian airports</h1>

<p>Number of flights per month from the main Belgian airports, for the period January 2009 to March 2013. It shows cycles with a increase in the number of flights during the spring and summer seasons. The data also suggests the growing importance of the Charleroi airport. <br>Source: <a href="https://data.gov.be/fr/dataset/sommaire-des-statistiques-sur-le-transport">Statistics Belgium</a>, 2013</p>

//Set up stack method
			var stack = d3.layout.stack()
							.values(function(d) {
								return d.flights;
							})
							.order("reverse");

//Width, height, padding
			var w = 1100;
			var h = 500;
			var padding = [ 20, 25, 50, 100 ];  //Top, right, bottom, left

//Set up date format function (years)
			var dateFormat = d3.time.format("%m/%Y");

//Set up scales
			var xScale = d3.time.scale()
								.range([ padding[3], w - padding[1] - padding[3] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.ticks(15);

//Configure area generator
			var area = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.x));
				})
				.y0(function(d) {
					return yScale(d.y0);  //Updated
				})
				.y1(function(d) {
					return yScale(d.y0 + d.y);  //Updated
				});

//Color array
			var color = ["#9b7c9a", "#cf81ca", "#e580b4","#cb3969","#b80231","#80bf90"];

//Create the empty SVG image
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Load data
			d3.csv("donnees.csv", function(data) {

//New array with all the airports, for referencing later
				var airports = ["BrusselsNational","Antwerp","Ostende","Charleroi","Liege"];

//Create a new, empty array to hold our restructured dataset
				var dataset = [];
                    
                for (var i=0; i < airports.length; i++){
                    dataset[i] = {
                        airport : airports[i],
                        flights : []
                    };
                    
                    for (var j = 0; j < data.length; j++){
                        dataset[i].flights[j] = {
                            x : data[j].month,
                            y : +data[j][airports[i]]
                        };
                    }
                }

//Stack the data!
				stack(dataset);

//Uncomment to log the original data to the console
				//console.log(data);

//Uncomment to log the newly restructured dataset to the console
				console.log(dataset);

//Now that the data is ready, we can check its
				//min and max values to set our scales' domains!
				xScale.domain([ dateFormat.parse(data[0].month), 
                               dateFormat.parse(data[data.length - 1].month) ]);

//Need to recalcluate the max value for yScale  
				//differently, now that everything is stacked.

//Loop once for each year, and get the total value
				//of CO2 for that year.
				var totals = [];
                
                for (i =0; i < data.length; i++){
                    var sub = 0;
                    for (j = 0; j < airports.length; j++){
                        sub += +data[i][airports[j]];
                    }
                    totals[i] = sub;
                }
                
				yScale.domain([ d3.max(totals), 0 ]);

//Areas
				//Make a path for each country
				var paths = svg.selectAll("path")
					.data(dataset)
					.enter()
					.append("path")
					.attr("class", "area")
                    .attr("id", function(d,i){return i;})
					.attr("d", function(d) {
						//Calculate path based on only d.emissions array,
						//not all of d (which would include the country name)
						return area(d.flights);
					})
					.attr("stroke", "none")
					.attr("fill", function(d, i) {
						return color[i];
					});

//Create axes
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);
                
                // Label of the Y axis.
                svg.append("text")
                    .attr("x", padding[3] + 5)
                    .attr("y", padding[0])
                    .style("font-size", "10px")
                    .text("Number of departing flights");
                
                //This is for the labels to the right
                for (i = 0; i < airports.length; i++){
                    svg.append("text")
                        .attr("id", "text" + i.toString())
                        .attr("x", w - padding[3] - padding[1] + 5)
                        .attr("y", function(){
                            var long = dataset[i].flights[dataset[i].flights.length-1].y;
                            var base = dataset[i].flights[dataset[i].flights.length-1].y0;
                            return yScale(base + (long/2)) + 5;
                        })
                        .style("font-size", "14px")
                        .text(function(){
                            return airports[i];
                        });
                }
                
                // Set labels to bold when area hovered
                d3.selectAll(".area")
                    .on("mouseover",function(){
                        var ident = d3.select(this).attr("id");
                        d3.select("#text"+ident).style("font-weight","bold");
                    })
                    .on("mouseout",function(){
                        var ident = d3.select(this).attr("id");
                        d3.select("#text"+ident).style("font-weight","normal");
                    });
			});

</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js