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.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; font-weight: bold; margin-left: 50px; } h1 { font-family: Helvetica, Arial, sans-serif; font-size: 24px; margin: 0; color: #323232; } p { font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #323232; margin: 10px 0 0 0; } svg { background-color: #323232; } .axis path, .axis line { fill: none; stroke: white; shape-rendering: crispEdges; } .axis text { fill: white; font-family: sans-serif; font-size: 11px; } .countryName { font-weight: bold; font-size: 14px; color: white; } .toolTip { padding: 6px; background-color: #323232; border-radius: 4px; position: absolute; font-size: 12px; color: #ff9900; line-height: 18px; visibility: hidden; } .subhead { fill: white; font-size: 14px; } </style> </head> <body> <div class="toolTip"></div> <h1>Refugee intake by Country</h1> <p> Refugee intake for selected countries, 2000-2013. Source: <a href="https://popstats.unhcr.org/#_ga=1.152203577.1033056182.1429126874">UNHCR</a> </p> <br/> <script type="text/javascript"> //Dimensions and padding var w = 900; var h = 750; var tt; var padding = [50, 10, 75, 120]; //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] - 50]); 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) { console.log(+d.amount); return yScale(+d.amount); }).interpolate("cardinal"); //Create the empty SVG image var svg = d3.select("body").append("svg").attr("width", w).attr("height", h); //create axis labels svg.append('text').text('Number of refugees').attr('transform', function(d) { return "rotate(-90 0, 360)" }).attr('x', 0).attr('y', h / 2 + 15).attr('text-anchor', 'middle').attr('class', 'y subhead').attr('opacity', 1) svg.append('text').text('Year').attr('x', w / 2).attr('y', h - 15).attr('text-anchor', 'middle').attr('class', 'x subhead').attr('opacity', 1) //Load data d3.csv("Refugee_time_series.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", refugees: [ { year: 1961, amount: 90589.568 }, { year: 1962, amount: 94912.961 }, { year: 1963, amount: 101029.517 }, � ] }, { country: "Bermuda", refugees: [ { 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 'refugees'. //The 'refugees' 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 = ["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] = { country : data[i].country, refugees : [] }; //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 refugees data array //for this country dataset[i].refugees.push({ year : years[j], amount : data[i][years[j]] }); } } } //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.refugees, 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 refugees data to each one var paths = groups.selectAll("path").data(function(d) { return [d.refugees]; }).enter().append("path"); paths.attr("class", "line").attr("d", line).attr("fill", "none").attr("stroke", "#ffc04c").attr("stroke-width", 2).style('opacity', '0.8').style('cursor', 'pointer'); paths.on('mouseover', function() { d3.select(this).classed('hover', true).attr('stroke-width', 4).attr('stroke', 'white') }).on('mouseout', function() { d3.select(this).classed('hover', false).attr('stroke-width', 2).attr('stroke', '#ffc04c') }); //hover action on lines groups.on('mouseover', function(d) { tt = d3.select('.toolTip'); tt.html('<span class="countryName">' + d.country + '</span>').style('left', d3.event.pageX + 10 + 'px').style('top', d3.event.pageY + 10 + 'px').style('visibility', 'visible'); }).on('mouseout', function() { tt.style('visibility', 'hidden') }) //Axes svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + (h - padding[2] + 10) + ")").call(xAxis); svg.append("g").attr("class", "y axis").attr("transform", "translate(" + (padding[3] - 10) + ",0)").call(yAxis); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js