xxxxxxxxxx<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> <script type="text/javascript"> //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