xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Line Chart with Multiple Lines</title> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font: bold 34px "Century Schoolbook", Georgia, Times, serif; color: #333; line-height: 90%; margin: .2em 0 .4em 0; letter-spacing: -2px; } p { color: #76879b; font-size: 10px; margin: 5px; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: 11px; } svg { background-color: white; } circle:hover { fill: orange; } .axis path, .axis line { fill: none; stroke: grey; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <h1>We Love Migration to London Hackney!</h1> <p>Underlying migration data in and out from London Hackney. Hover over the lines to find out how many come and leave again <br>Source: <a href="https://data.london.gov.uk/dataset/2014-round-population-projections">Data.london.gov.uk</a>, 2014<br></p> <script type="text/javascript"> //Dimensions and padding var w = 900; var h = 400; var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left //Set up date formatting and years var dateFormat = d3.time.format("%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"); //Configure line generator var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.year)); }) .y(function(d) { return yScale(+d.amount); }); //Create the empty SVG image var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load data d3.csv("populationProjectionshackney.csv", function(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] ] // //We, however, are using 'year' as x and 'amount' as y. //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", emissions: [ { year: 1961, amount: 90589.568 }, { year: 1962, amount: 94912.961 }, { year: 1963, amount: 101029.517 }, … ] }, { country: "Bermuda", emissions: [ { year: 1961, amount: 176.016 }, { year: 1962, amount: 157.681 }, { year: 1963, amount: 150.347 }, … ] }, … ] */ //Note that this is an array of objects. Each object //contains two values, 'country' and 'emissions'. //The 'emissions' value is itself an array, containing //more objects, each one holding 'year' and 'amount' values. //New array with all the years, for referencing later var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030", "2031", "2032", "2033", "2034", "2035", "2036", "2037", "2038", "2039", "2040", "2041"]; //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] = { country: data[i].countryName, emissions: [] }; //Loop through all the years for (var j = 0; j < years.length; j++) { // If value is not empty if (data[i][years[j]]) { //Add a new object to the emissions data array //for this country dataset[i].emissions.push({ year: years[j], amount: data[i][years[j]] }); } } } //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); //Set scale domains xScale.domain([ d3.min(years, function(d) { return dateFormat.parse(d); }), d3.max(years, function(d) { return dateFormat.parse(d); }) ]); yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.emissions, function(d) { return +d.amount; }); }), 0 ]); //Make a group for each country var groups = svg.selectAll("g") .data(dataset) .enter() .append("g"); //Append a title with the country name (so we get easy tooltips) groups.append("title") .text(function(d) { return d.country; }); //Within each group, create a new line/path, //binding just the emissions data to each one groups.selectAll("path") .data(function(d) { return [ d.emissions ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2); //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); }); //End USA data load function </script><p>2014 round population projections - This is the first round of GLA projections to incorporate migration flow data from the 2011 Census for Hackney, London. The GLA's 2014 round of projections is its first to fully incorporate the results of the 2011 Census, with underlying migration data updated using commissioned origin-destination tables. Because of the uncertainty about future migration, projections have been released based on both long- and short-term migration trends. </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js