xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></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; } path:hover { fill: blue; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <script type="text/javascript"> //Set up stack method var stack = d3.layout.stack() .values(function(d) { return d.core; }) .order("reverse"); //Width, height, padding var w = 1200; var h = 900; var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left //Set up date format function (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(10) .tickFormat(function(d) { return dateFormat(d); }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(15); //Configure area generator var area = d3.svg.area() .x(function(d) { return xScale(dateFormat.parse(d.x)); }) .y0(function(d) { return yScale(d.y0); //Updated }) .y1(function(d) { return yScale(d.y0 + d.y); //Updated }); //Easy colors accessible via a 10-step ordinal scale var color = d3.scale.category10(); //Create the empty SVG image var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load data d3.csv("https://gist.githubusercontent.com/majomo/fb2d2f92fcd9446fedde/raw/09b60aaa0ae1842885cad09affeeca9743b8ff56/CHN.csv", function(data) { //New array with all the years, for referencing later var years = ["1991","1996","2001","2006","2011", ]; //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] = { place: data[i].Place, core: [] }; //Loop through all the years for (var j = 0; j < years.length; j++) { //Default value, used in case no value is present var amount = null; // If value is not empty if (data[i][years[j]]) { amount = +data[i][years[j]]; } //Add a new object to the emissions data array //for this country dataset[i].core.push({ x: years[j], y: amount }); } } //Stack the data! stack(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); //Now that the data is ready, we can check its //min and max values to set our scales' domains! xScale.domain([ d3.min(years, function(d) { return dateFormat.parse(d); }), d3.max(years, function(d) { return dateFormat.parse(d); }) ]); //Need to recalcluate the max value for yScale //differently, now that everything is stacked. //Loop once for each year, and get the total value //of CO2 for that year. var totals = []; for (i = 0; i < years.length; i++) { totals[i] = 0; for (j = 0; j < dataset.length; j++) { totals[i] += dataset[j].core[i].y; } } yScale.domain([ d3.max(totals), 0 ]); //Areas // //Now that we are creating multiple paths, we can use the //selectAll/data/enter/append pattern to generate as many //as needed. //Make a path for each country var paths = svg.selectAll("path") .data(dataset) .enter() .append("path") .attr("class", "area") .attr("d", function(d) { //Calculate path based on only d.emissions array, //not all of d (which would include the country name) return area(d.core); }) .attr("stroke", "none") .attr("fill", function(d, i) { return color(i); }); //Append a title with the country name (so we get easy tooltips) paths.append("title") .text(function(d) { return d.Place; }); //Create 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); }); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js