xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>module 2 project</title> <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,greek' rel='stylesheet' type='text/css'> <style type="text/css"> body { background-color: #EAEAE5; ; font-family: 'Open Sans', sans-serif; } #container{ width: 850px; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 50px; background-color: white; /*border: 1px solid lightgray;*/ border-radius: 5px; background:white; box-shadow: 0px 0px 5px 2px lightgray; } h1 { font-size: 38px; margin: 0 0 3px 40px; font-weight: 100; } h2 { font-size: 21px; color:#777; font-weight: 400; margin:0 0 20px 40px; } p { font-size: 16px; font-weight: 400; color:#777; margin-bottom: 0; } p .note{ font-size: 16px; text-decoration:none; color:#777; } p .note a{ text-decoration:none; } svg { background-color: white; margin: auto; } /*path:hover { fill:#8f9d00; fill-opacity:0.9; }*/ path{ fill-opacity:.875; } .axis path, .axis line { fill: none; stroke: #777; shape-rendering: crispEdges; } .y.axis line{ stroke-dasharray: 2,2; } .y.axis path{ display: none; } .axis text { font-family: 'Open Sans', sans-serif; font-size: 16px; color:#777; } .highlight{ fill:#94a000; } /* Styling for new <div> */ #tooltip { position: absolute; width: 200px; height: auto; padding: 10px; color: #777; background-color: rgba(255, 255, 255, 0.9); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); pointer-events: none; } #tooltip.hidden { display: none; } #tooltip p { margin: 0; font-size: 10px; text-align: left; } </style> </head> <body> <div id="container"> <h1>Distance travelled by car has increased</h1> <h2>Passenger transport by mode*, Great Britain, 1980 to 2013.<h2/> <p>Passenger kilometres (bn)</p> <div id = "tooltip" class = "hidden"> <p id = "transportType"></p> </div> </div> <script type="text/javascript"> //Set up stack method var stack = d3.layout.stack() .values(function(d) { return d.transport; }) .order("reverse"); //Width, height, padding var w = 800; var h = 700; var padding = [ 0, 10, 50, 80 ]; //Top, right, bottom, left //Set up date format function (years) var dateFormat = d3.time.format("%Y"); //Set up scales var xScale = d3.time.scale() .range([ padding[3], w - padding[1] - padding[1] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); //Configure area generator var area0 = d3.svg.area() .x(function(d) { return xScale(dateFormat.parse(d.x)); }) .y0(function(d) { return yScale(0); //Updated }) .y1(function(d) { return yScale(0); //Updated }); //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 }); //Easy colors accessible via a 10-step ordinal scale // var color = d3.scale.category10(); var color = d3.scale.category10().range(["#b02d00", "#da9100", "#7b2b00"]); //Create the empty SVG image var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h); //Load data d3.csv("1-Passenger-transport-by-modev3.csv", function(data) { //Uncomment to log the newly loaded data to the console console.log(data); //Data is loaded in, but we need to restructure it. //Remember, each line requires an array of x/y pairs; //that is, an array of arrays, like so: // // [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ] // //Our x value will be the year, and y will be the amount //of CO2. We also need to know which country belongs to //each line, so we will build an array of objects that is //structured like this: // /* [ { country: "Australia", transport: [ { x: "1961", y: 90589.568 }, { x: "1962", y: 94912.961 }, { x: "1963", y: 101029.517 }, … ] }, { country: "Bermuda", transport: [ { x: "1961", y: 176.016 }, { x: "1962", y: 157.681 }, { x: "1963", y: 150.347 }, … ] }, … ] */ // //Note that this is an array of objects. Each object //contains two values, 'country' and 'transport'. //The 'transport' value is itself an array, containing //more objects, each one holding x and y values. // //The x (year) values have to be strings in this case, //because the date format function expects a string //to parse into a Date object. //New array with all the years, for referencing later var years = [ "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010","2011", "2012", "2013"]; //Create a new, empty array to hold our restructured dataset var dataset = []; //Loop once for each row in data for (var i = 0; i < data.length; i++) { //Create new object with this country's name and empty array dataset[i] = { transportMode: data[i].transport, transport: [] }; //Loop through all the years for (var j = 0; j < years.length; j++) { //Default value, used in case no value is present var amount = null; // If value is not empty if (data[i][years[j]]) { amount = +data[i][years[j]]; } //Add a new object to the transport data array //for this country dataset[i].transport.push({ x: years[j], y: amount }); } } //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([ d3.min(years, function(d) { return dateFormat.parse(d); }), d3.max(years, function(d) { return dateFormat.parse(d); }) ]); //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 < years.length; i++) { totals[i] = 0; for (j = 0; j < dataset.length; j++) { totals[i] += dataset[j].transport[i].y; } } yScale.domain([ d3.max(totals), 0 ]); //Areas // //Now that we are creating multiple paths, we can use the //selectAll/data/enter/append pattern to generate as many //as needed. //Make a path for mode of transport var paths = svg.selectAll("path") .data(dataset) .enter() .append("path") .attr("class", "area") .attr("fill", "#B02D00") .attr("d", function(d) { //Calculate path based on only d.transport array, //not all of d (which would include the country name) return area0(d.transport); }) //tooltip .on("mouseover", function(d, i) { d3.select(this) .classed("highlight", true); //Position the tooltip <div> and set its content d3.select("#tooltip") .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 5) + "px") .text(d.transportMode) .transition() .duration(500) .style("opacity", 1); //Show the tooltip d3.select("#tooltip").classed("hidden", false); }) .on("mouseout", function() { d3.select(this) .classed("highlight", false); //Hide the tooltip d3.select("#tooltip") .transition() .duration(500) .style("opacity", 0); }) .transition() .duration(1700) .ease("cubic-in-out") .attr("d", function(d) { //Calculate path based on only d.transport array, //not all of d (which would include the country name) return area(d.transport); }) .attr("stroke", "none") .attr("fill", function(d, i) { return color(i); }); // Create labels svg.append("text") .attr("x", 760) .attr("y", 630) .text("Rail") .attr("text-anchor","end") .attr("opacity", 0) .transition() .delay(1000) .duration(1500) .attr("opacity", 1) .attr("fill", "white") .attr("font-size", "20px");; svg.append("text") .attr("x", 760) .attr("y", 585) .attr("text-anchor","end") .text("Buses and coaches") .attr("opacity", 0) .transition() .delay(1000) .duration(1500) .attr("opacity", 1) .attr("fill", "white") .attr("font-size", "20px"); svg.append("text") .attr("x", 760) .attr("y", 530) .text("Cars, vans and taxis") .attr("text-anchor","end") .attr("opacity", 0) .transition() .delay(1000) .duration(1500) .attr("opacity", 1) .attr("fill", "white") .attr("font-size", "20px"); //Append a title with the country name (so we get easy tooltips) // paths.append("title") // .text(function(d) { // return d.transportMode; // }); //Configure axis generators var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(15) .tickPadding([padding[1]]) .tickFormat(function(d) { return dateFormat(d); }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(5) .tickPadding([padding[1]]) .tickSize(- w); //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); }); //Add source to bottom of svg d3.select("#container").append("p").html('<p class="note">*Total distance travelled (all modes) also includes distance travelled by motor cycle, pedal cycle and UK air travel.<p class="note">Source:<a style="color:steelblue", "text-decoration:none;" href="https://www.gov.uk/government/statistical-data-sets/ras30-reported-casualties-in-road-accidents"> Transport Statistics Great Britain: 2014, Table TSGB0101, DFT</a></p>'); </script> </body></html> https://d3js.org/d3.v3.min.js