xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Module 6...</title> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <!-- CSS styles--> <style type = "text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif;} h1 {font-size: 20px; margin: 0;} p{font-family: Georgia; font-size: 12px;} .axis path, .axis line { fill : none; stroke : black; shape-rendering : crispEdges; } .axis text {font-family : sans-serif; font-size : 11px;} .x.label, .y.label {font-family : Georgia; font-size : 14px;} path { stroke: #aaaaaa; stroke-width: 2; opacity: 0.5; } .axis path, .axis line { fill: none; stroke: #777777; stroke-width: 1; shape-rendering: crispEdges; } g.Down path { stroke: steelblue; opacity: 0.25; } g.Down path:hover {opacity : 1;} g.Up path { stroke: red; } g.Up path:hover {opacity : 1;} /* .y.axis path, .y.axis line{opacity: 0;} */ </style> </head> <body> <h1> Greenhouse gas emissions per capita for selected OECD countries </h1> <p> In thousands of kg CO2 equivalent. Source: <a href = "https://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en"> OECD </a> </p> <p> Countries where per capita emissions have <span style='color:red'> increased </span> from 1990 to 2012 are shown in red. Hover over a line to display the country. </p> <script type="text/javascript"> // Set width and height of SVG var h = 600; var w = 800; // Padding: Top, right, bottom, left var pad = {t : 20, r : 25, b : 50, l : 100} // Define scale ranges var xScale = d3.time.scale() .range([pad.l,w - pad.r]); var yScale = d3.scale.linear().range([pad.t, h - pad.b]); // Define number formats var fmtStandard = d3.format(",g"); var fmt2dp = d3.format(",.2f"); // Add the SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // Set up date formats dateFmt = d3.time.format("%Y"); // Set up global variables to contain data //var data; var dataset = []; //var dataFiltered; var years = ["1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012"]; function chartSetup() { // Define axes var xAxis = d3.svg.axis().scale(xScale).orient("bottom") .tickFormat(function(d) {return dateFmt(d);}); var yAxis = d3.svg.axis().scale(yScale).orient("left") .tickFormat(fmtStandard); // Add axes svg.append("g") .attr("class", "x axis") .attr("transform", "translate (" + 0 + "," + (h - pad.b) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate (" + pad.l + "," + 0 + ")") .call(yAxis); // x axis label svg.append("text") .text("Year") .attr("class", "x label") .attr("x", (pad.l + ((w-pad.r-pad.l) /2 ))) .attr("y", (h-(pad.b*0.25))) .attr("text-anchor", "middle"); // y axis label var yLabelX = pad.l*0.5 var yLabelY = pad.t + ((h-pad.t-pad.b) /2) svg.append("text") .text("Total emissions per capita (thousand kgs CO2 equivalent)") .attr("class", "y label") .attr("x", yLabelX) .attr("y", yLabelY) .attr("transform", "rotate(-90 " + yLabelX + "," + yLabelY + ")") .attr("text-anchor", "middle"); }; function drawPoints() { // Define scale domains xScale.domain([ d3.min(years, function(d) {return dateFmt.parse(d);}), d3.max(years, function(d) {return dateFmt.parse(d);})]); yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.emissions, function(d) { return +d.amount; }); }), 0]); // Set up line generator var line = d3.svg.line() .x(function(d) {return xScale(dateFmt.parse(d.Year)) ;}) .y(function(d) {return yScale(+d.amount) ;}); // Make a group for each country var groups = svg.selectAll("g") .data(dataset) .enter() .append("g"); groups.attr("class", function(d) { if (+d.emissions[0].amount > +d.emissions[d.emissions.length - 1].amount) {return "Down";} else {return "Up";} }); groups.append("title") .text(function(d) { return d.Country; }); // Within each group, draw a line groups.selectAll("path") .data(function(d) { return [d.emissions]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke-width, 2"); }; // Load the greenhouse gas data d3.csv("AIR_GHG_v2.csv", function (error, data) { if (error) {console.log(error);} else { // // First, get the emissions values in millions of tonnes of CO2 equivalent for (var i=0; i < data.length; i++) { data[i].totalEmissions = +data[i].totalEmissions / 1000;}; //Re-format the data //console.log(data); var lastCountry = " " ; var idx = -1; // Arrays are zero-based! for (var i=0; i < data.length; i++) { if (data[i].Country != lastCountry) { // Set up object for new country idx++; dataset[idx] = { Country : data[i].Country, emissions : [] }; dataset[idx].emissions.push({ Year : data[i].Year, amount : data[i].emissionsPerCapita }); } else { dataset[idx].emissions.push({ Year : data[i].Year, amount : data[i].emissionsPerCapita }); }; lastCountry = data[i].Country; //console.log(idx, + ", " + i) }; // Draw lines drawPoints(); // Draw axes and labels chartSetup(); } }); </script> </body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js