xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>CO2 emitters in Italy</title> <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> <style type="text/css"> body { margin: 0; background-color: lightGray; font-family: Helvetica, Arial, sans-serif; } #container { width: 700px; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 20px; background-color: white; box-shadow: 5px 5px 8px 9px #ccc; } h1 { font-size: 30px; margin: 10; } p { font-size: 14px; margin: 14px 0 0 0; } a:link { text-decoration: none; color: gray; } a:hover { text-decoration: underline; } a:visited { color: gray; } a:active { color: steelBlue; } svg { background-color: white; } path:hover { fill: yellow; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <div id="container"> <h1>CO2 Emissions in Italy</h1> <h2>by Province</h2> <p>Total carbon dioxide emissions (Mtons), 1990-2010. Italy in 2010 totals 421.9 million tonnes of CO2 equivalent emissions. Source: <a href="https://www.sinanet.isprambiente.it/it/sia-ispra/inventaria/disaggregazione-dellinventario-nazionale-2010">ISPRA</a></p> </div> <script type="text/javascript"> //Set up stack method var stack = d3.layout.stack() .values(function(d) { return d.emissions; }) .order("reverse"); //Width, height, padding var w = 700; var h = 1000; var padding = [ 20, 10, 50, 50 ]; //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(5) .tickFormat(function(d) { return dateFormat(d); }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(10); //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 20-step ordinal scale var color = d3.scale.category20c(); //Now SVG goes into #container instead of body var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h); //Load data d3.csv("all_emitters_it_or.csv", function(data) { //New array with all the years, for referencing later var years = ["1990", "1995", "2000", "2005", "2010"]; //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 PROVINCIA's name and empty array dataset[i] = { PROVINCIA: data[i].PROVINCIAName, emissions: [] }; //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 PROVINCIA dataset[i].emissions.push({ x: years[j], y: amount }); } } //Stack the data! stack(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].emissions[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 PROVINCIA 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 PROVINCIA name) return area(d.emissions); }) .attr("stroke", "none") .attr("fill", function(d, i) { return color(i); }); //Append a title with the PROVINCIA name (so we get easy tooltips) paths.append("title") .text(function(d) { return d.PROVINCIA; }); //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://d3js.org/d3.v3.min.js