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-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } circle:hover { fill: orange; } path { stroke: gray; stroke-width: 1; opacity: 0.3; } g.highlightUSA path { stroke: steelblue; stroke-width:3; opacity: 0.8; z-index: 5; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } path:hover { fill: none; stroke-width: 1.5; stroke: #E20177; } </style> </head> <body> <h1>Annual GDP By Country</h1> <p>Per capita annual GDP for several countries (Austria, Canada, France, Germany, Greece, Italy, Sweden, UK, and USA) during 1950-1983. One interest lies in studying the "periodic" behaviour of such series in connection with understanding business cycles. Another lies in forecasting turning points. Another lies in comparisons of characteristics of the series across national economies. Notice the GDP of Greece soar from the 60s until the end of 70s. Source: <a href="https://stat.duke.edu/~mw/data-sets/ts_data/gdp">Department of Statistical Science, Duke University</a>, 2015</p> <script type="text/javascript"> //Dimensions and padding var w = 1080; var h = 600; var padding = [ 20, 10, 50, 100 ]; //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.gdp); }); //Create the empty SVG image var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load data d3.csv("gdp.csv", function(data) { //New array with all the years, for referencing later var countryName = ["AUSTRIA", "CANADA", "FRANCE", "GERMANY", "GREECE", "ITALY", "SWEDEN", "UK", "USA"]; //Create a new, empty array to hold our restructured dataset var dataset = []; //Loop once for each country name for (var i = 0; i < countryName.length; i++) { dataset[i] = { country: countryName[i], wealth: [] }; } console.log(dataset) for (var j = 0; j < data.length; j++) { //Create new object with this country's name and empty array //Loop through all the countries for (var i = 0; i < countryName.length; i++) { //console.log(dataset) // If value is not empty if (data[j][countryName[i]]) { //Add a new object to the emissions data array //for this country dataset[i].wealth.push({ year: data[j]["YEAR"], gdp: data[j][countryName[i]] }); } } } //Set scale domains xScale.domain([ d3.min(dataset, function(d) { return d3.min(d.wealth, function(d) { return dateFormat.parse(d.year); }); }), d3.max(dataset, function(d) { return d3.max(d.wealth, function(d) { return dateFormat.parse(d.year); }); }) ]); yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.wealth, function(d) { return +d.gdp; }); }), 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 gdp data to each one groups.selectAll("path") .data(function(d) { return [ d.wealth ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2); groups.classed("highlightUSA", function(d) { if (d.country == "USA") { return true; } else { return false; } }); //ADDING HERE FOR LABELS var datalabel = svg.selectAll("text") .data(dataset.filter(function(d) { return (d.country == "USA"); })) .enter() .append("text"); datalabel.attr("x", [w - padding[1] - padding[3]]) .attr("y", (function(d) { return yScale( d.wealth[8].gdp ); })) .attr("fill", "black") .attr("font-size", "12px") .attr("font-family", "Georgia") .text(function(d) { return d.country; }); //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); svg.append("g") .attr("transform", "translate(115," + 60 + ")") .append("text") .attr("transform","rotate(270)") .text("GDP") .attr("font-size",11) }); </script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js