xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <style type="text/css"> body { background-color: white; font-family: Verdana; } svg { background-color: white; } text { fill: black; } .line { fill: none; stroke: grey; stroke-width: 2; opacity: 0.1; } .line:hover { stroke-width: 3; stroke: black; opacity: 1; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } g.highlight_eu path { stroke: steelblue; stroke-width: 3; opacity: 1; } g.highlight_me path { stroke: green; stroke-width: 3; opacity: 1; } g.highlight_la path { stroke: indianred; stroke-width: 3; opacity: 1; } g.highlight_ss path { stroke: purple; stroke-width: 3; opacity: 1; } g.highlight_na path { stroke: orange; stroke-width: 3; opacity: 1; } g.highlight_ea path { stroke: red; stroke-width: 3; opacity: 1; } .highlight_eu { fill: steelblue; text-anchor: end; font-weight: bold; } .highlight_me { fill: green; text-anchor: end; font-weight: bold; } .highlight_la { fill: indianred; text-anchor: end; font-weight: bold; } .highlight_ss { fill: purple; text-anchor: end; font-weight: bold; } .highlight_na { fill: orange; text-anchor: end; font-weight: bold; } .highlight_ea { fill: red; text-anchor: end; font-weight: bold; } </style> </head> <body> <h2>Youth unemployment rate across the world</h2> <p>This dataset shows the evolution of youth unemployment over the course of two decades. It would be interesting to further explore the subject and research the reasons behind ups and downs.</p> <script type="text/javascript"> var w = 900 var h = 500 var padding = [ 50, 50, 50, 50 ]; //Top, right, bottom, left //Set up date formatting and years var dateFormat = d3.time.format("%Y"); var xScale = d3.time.scale() .range ([ padding[1], w - padding[3] ]); var yScale = d3.scale.linear() .range ([ padding[0], h - padding[2] ]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(30); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(15); //Configure line generator var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.year)); }) .y(function(d) { return yScale(+d.amount); }); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("sl.uem.1524.zs_Indicator_en_excel_v2.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", percentage: [ { 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 = ["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] = { country: data[i].countryName, percentage: [] }; //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 percentage data array //for this country dataset[i].percentage.push({ year: years[j], amount: data[i][years[j]] }); } } } console.log(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); 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.percentage, function(d) { return +d.amount; }); }), 0 ]); var groups = svg.selectAll("g") .data(dataset) .enter() .append("g") .classed("highlight_eu", function(d) { if (d.country == "European Union") { return true; } else { return false; } }) .classed("highlight_me", function(d) { if (d.country == "Middle East & North Africa (all income levels)") { return true; } else { return false; } }) .classed("highlight_la", function(d) { if (d.country == "Latin America & Caribbean (all income levels)") { return true; } else { return false; } }) .classed("highlight_ss", function(d) { if (d.country == "Sub-Saharan Africa (all income levels)") { return true; } else { return false; } }) .classed("highlight_na", function(d) { if (d.country == "North America") { return true; } else { return false; } }) .classed("highlight_ea", function(d) { if (d.country == "East Asia & Pacific (all income levels)") { return true; } else { return false; } }); // var labels = groups.selectAll("text") // .data(data) // .enter() // .append("text"); //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.percentage ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line); //Make lines get to the front on mouseover d3.selectAll("path") .on("mouseover", function(d) { d3.select(this) this.parentNode.parentNode.appendChild(this.parentNode); }) .on("mouseout", function(d) { d3.select(this) }); svg.append("text") .attr("class", "highlight_eu") .attr("x", w - padding[1]) .attr("y", padding[0] + 15) .attr("font-size", 10) .text("Europe"); svg.append("text") .attr("class", "highlight_me") .attr("x", w - padding[1]) .attr("y", padding[0] + 30) .attr("font-size", 10) .text("North Africa and Middle East"); svg.append("text") .attr("class", "highlight_la") .attr("x", w - padding[1]) .attr("y", padding[0] + 45) .attr("font-size", 10) .text("South America"); svg.append("text") .attr("class", "highlight_ss") .attr("x", w - padding[1]) .attr("y", padding[0] + 60) .attr("font-size", 10) .text("Sub-Saharan Africa"); svg.append("text") .attr("class", "highlight_na") .attr("x", w - padding[1]) .attr("y", padding[0] + 75) .attr("font-size", 10) .text("North America"); svg.append("text") .attr("class", "highlight_ea") .attr("x", w - padding[1]) .attr("y", padding[0] + 90) .attr("font-size", 10) .text("East Asia and Pacific"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[0]) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3]) + ", 0)") .call(yAxis); }); </script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js