Module 2: Production of pumpkins and squash

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='utf-8'>
		<title>My first stacked area chart</title>
		<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
		<style type='text/css'>

body {
                margin:0;
				background-color: #fff1e0;
		     	font-family: Helvetica, Arial, sans-serif;
		     	color: #74736C;
			}
			.container {
				width: 700px;
                box-sizing: border-box;
				margin-left: auto;
				margin-right: auto;
				padding: 10px 30px 30px;
				background-color: #fff9f0;
				box-shadow: 1px 1px 2px 2px #ccc;
			}
            
			h1 {
				font-size: 2.0em;
				font-weight: 200;			
			}

h3 {
				margin: 0;
				font-size: 1.00em;
				font-weight: 400;			
			}

p {
			    font-size: 14px;
			    line-height: 1.4em;
				margin: auto;
				margin-bottom: 10px;		
			}

svg {
				background-color: #fff9f0;
    
			}

path:hover {
				fill: orange;
			}

.axis path,
			.x.axis line {
				fill: none;
				stroke: #74736C;
				shape-rendering: crispEdges;
			}
            
            .y.axis{
               stroke-dasharray:3,1; 
               shape-rendering: crispEdges;
            }
			
			.axis text {
				font-family: sans-serif;
				font-size: 12px;
				font-weight: 400;
				fill: #74736c;
			}

a {
	          text-decoration: none;
	          color: orange;
	          transition: color 0.3s;
	        }
			      a:hover {
			        color: #74736C;
			        transition: color 0s;
			 }

</style>
	</head>
	<body>
		<div class='container'>
            <h1>Production of pumpkins and squash</h1>
				<p>In the United States, pumpkins go hand in hand with the fall holidays of Halloween and Thanksgiving. An orange fruit harvested in October, this nutritious and versatile plant features flowers, seeds and flesh that are edible and rich in vitamins. Pumpkin is used to make soups, desserts and breads, and many Americans include pumpkin pie in their Thanksgiving meals. Carving pumpkins into jack-o’-lanterns is a popular Halloween tradition that originated hundreds of years ago in Ireland. Back then, however, jack-o’-lanterns were made out of turnips or potatoes; it wasn’t until Irish immigrants arrived in America and discovered the pumpkin that a new Halloween ritual was born.</p>
				<br><h3>Tonnes<strong> (m)</strong></h3></br>
                <div class='svg_holder'></div>
                     <p>Source:<a href='https://faostat.fao.org/site/567/DesktopDefault.aspx?PageID=567#ancor'> FAO.org</a></p>
               </div>
		<script type='text/javascript'>

//Set up stack method
			var stack = d3.layout.stack()
							.values(function(d) {
								return d.pumpkins;
							})
							.order('descending');

//Width, height, margin not padding 
            var margin = { top: 5, right: 0, bottom: 25, left: 30 }; //Top, right, bottom, left
                width = 670 - margin.left - margin.right,
                height = 400 - margin.top - margin.bottom;

var dateFormat = d3.time.format('%Y');
            
            var svg = d3.select('.svg_holder')
                            .append('svg')
                            .attr('width', width + margin.left + margin.right)
                            .attr('height', height + margin.top + margin.bottom);

var xScale = d3.time.scale()
								 .range([25, width - margin.left - margin.right]);
			
			var yScale = d3.scale.linear()
								.range([0, height - margin.top - margin.bottom]);

var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient('bottom')
							.ticks(12)
							.tickFormat(function(d) {
								return dateFormat(d);
							})

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient('left')
							.ticks(6);

//Load data
			d3.csv('productionOfPumpkins.csv', function(data) {
			
				var years = ['1961', '1962', '1963', '1964', '1965', '1966', '1967', '1968', '1969', '1970', '1971', '1972', '1973', '1974', '1975', '1976', '1977', '1978', '1979', '1980', '1981', '1982', '1983', '1984', '1985', '1986', '1987', '1988', '1989', '1990', '1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010','2011','2012', '2013'];

var dataset = [];

for (var i = 0; i < data.length; i++) {

dataset[i] = {
						country: data[i].countryName,
						pumpkins: []
					};

for (var j = 0; j < years.length; j++) {

var amount = null;

if (data[i][years[j]]) {
							amount = +data[i][years[j]];
						}

dataset[i].pumpkins.push({
							x: years[j],
							y: amount
						});
					}
				}

stack(dataset);

xScale.domain([ 
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);
		
				var totals = [];

for (i = 0; i < years.length; i++) {
					totals[i] = 0;
					for (j = 0; j < dataset.length; j++) {
						totals[i] += dataset[j].pumpkins[i].y;
					}
				}

yScale.domain([ d3.max(totals), 0 ]);
			
				var paths = svg.selectAll('path')
					.data(dataset)
					.enter()
					.append('path')
					.attr('class', 'area')
					.attr('d', function(d) {
						return area(d.pumpkins);
					})
					.attr('stroke', 'none')
					.attr('fill', function(d, i) {
						return color(i);
					});

paths.append('title')
					.text(function(d) {
						return d.country;
					});

//Create axes
				svg.append('g')
                   .attr('class', 'x axis')
                   .attr('transform', 'translate(0,' + (height - margin.left) + ')')
                   .call(xAxis)

svg.append('g')
                    .attr('class', 'y axis')
                    .attr('transform', 'translate(' + margin.bottom + ')')
                    .call(yAxis)               
			});
		</script>
	</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js