Clevejones/index.html

## index.html
<!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='http://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);

			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
				});

			var color = d3.scale.ordinal()
                        .range(['#fedeca', '#ffd4bb ', '#ffb99b ', '#fb925f ', '#ff4301']);

			//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>

## productionOfPumpkins.csv

          
            countryName
            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

            
              Asia
              2.55
              2.66
              2.86
              2.92
              2.94
              2.96
              3.11
              3.15
              3.2
              3.34
              3.46
              3.54
              3.58
              3.8
              3.81
              3.94
              4.07
              4.3
              4.43
              4.69
              4.96
              5.09
              5.45
              5.76
              6.06
              6.31
              6.63
              6.26
              6.31
              6.67
              6.83
              6.96
              7.75
              8.23
              8.28
              8.97
              9.21
              9.58
              9.88
              10.04
              10.27
              11.25
              12
              12.08
              12.49
              13.12
              13.8
              14.25
              14.43
              15.22
              15.96
              16.13
              16.18

            
              Europe
              2.7
              1.59
              1.71
              1.56
              1.15
              1.54
              1.27
              1.2
              1.18
              0.94
              1.06
              1.04
              0.95
              1.03
              1.16
              1.11
              1.07
              0.97
              1.1
              1.1
              1.13
              1.21
              1.19
              1.31
              1.2
              1.17
              1.22
              1.27
              1.52
              1.38
              1.14
              2.06
              2.72
              2.54
              2.94
              2.89
              3.17
              3.17
              3.1
              3.21
              3.27
              3.21
              3.55
              3.75
              2.97
              3.2
              3.07
              2.91
              3.11
              3.01
              3.4
              3.33
              3.37

            
              Americas
              0.84
              0.86
              0.81
              0.78
              0.85
              0.8
              0.87
              0.79
              0.8
              0.87
              0.88
              0.79
              0.84
              0.83
              0.98
              0.87
              0.73
              0.78
              0.91
              1.09
              0.97
              1.12
              1.11
              1.21
              1.07
              1.16
              1.18
              1.23
              1.27
              1.19
              1.25
              1.16
              1.23
              1.3
              1.38
              1.48
              1.4
              1.43
              1.53
              2.43
              2.6
              2.51
              2.65
              2.72
              2.79
              2.68
              2.61
              2.57
              2.74
              2.67
              2.74
              2.95
              2.87

            
              Africa
              0.5
              0.51
              0.53
              0.53
              0.57
              0.64
              0.64
              0.71
              0.71
              0.75
              0.78
              0.75
              0.77
              0.8
              0.84
              0.89
              0.93
              0.96
              1
              0.99
              1.01
              1.03
              1.05
              1.07
              1.1
              1.17
              1.16
              1.12
              1.08
              1.15
              1.19
              1.17
              1.18
              1.2
              1.27
              1.37
              1.49
              1.6
              1.66
              1.81
              1.79
              1.75
              2.05
              1.94
              1.88
              1.74
              1.77
              1.82
              1.87
              1.98
              1.98
              2
              1.99

            
              Oceania
              0.06
              0.06
              0.07
              0.06
              0.07
              0.08
              0.08
              0.08
              0.08
              0.08
              0.1
              0.1
              0.08
              0.09
              0.08
              0.09
              0.08
              0.09
              0.08
              0.1
              0.09
              0.12
              0.12
              0.13
              0.13
              0.13
              0.14
              0.14
              0.15
              0.17
              0.19
              0.2
              0.26
              0.3
              0.28
              0.3
              0.27
              0.26
              0.28
              0.3
              0.27
              0.27
              0.24
              0.22
              0.23
              0.29
              0.31
              0.32
              0.29
              0.28
              0.27
              0.28
              0.27
	<!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='http://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);

	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
	});

	var color = d3.scale.ordinal()
	.range(['#fedeca', '#ffd4bb ', '#ffb99b ', '#fb925f ', '#ff4301']);

	//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>
countryName	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
Asia	2.55	2.66	2.86	2.92	2.94	2.96	3.11	3.15	3.2	3.34	3.46	3.54	3.58	3.8	3.81	3.94	4.07	4.3	4.43	4.69	4.96	5.09	5.45	5.76	6.06	6.31	6.63	6.26	6.31	6.67	6.83	6.96	7.75	8.23	8.28	8.97	9.21	9.58	9.88	10.04	10.27	11.25	12	12.08	12.49	13.12	13.8	14.25	14.43	15.22	15.96	16.13	16.18
Europe	2.7	1.59	1.71	1.56	1.15	1.54	1.27	1.2	1.18	0.94	1.06	1.04	0.95	1.03	1.16	1.11	1.07	0.97	1.1	1.1	1.13	1.21	1.19	1.31	1.2	1.17	1.22	1.27	1.52	1.38	1.14	2.06	2.72	2.54	2.94	2.89	3.17	3.17	3.1	3.21	3.27	3.21	3.55	3.75	2.97	3.2	3.07	2.91	3.11	3.01	3.4	3.33	3.37
Americas	0.84	0.86	0.81	0.78	0.85	0.8	0.87	0.79	0.8	0.87	0.88	0.79	0.84	0.83	0.98	0.87	0.73	0.78	0.91	1.09	0.97	1.12	1.11	1.21	1.07	1.16	1.18	1.23	1.27	1.19	1.25	1.16	1.23	1.3	1.38	1.48	1.4	1.43	1.53	2.43	2.6	2.51	2.65	2.72	2.79	2.68	2.61	2.57	2.74	2.67	2.74	2.95	2.87
Africa	0.5	0.51	0.53	0.53	0.57	0.64	0.64	0.71	0.71	0.75	0.78	0.75	0.77	0.8	0.84	0.89	0.93	0.96	1	0.99	1.01	1.03	1.05	1.07	1.1	1.17	1.16	1.12	1.08	1.15	1.19	1.17	1.18	1.2	1.27	1.37	1.49	1.6	1.66	1.81	1.79	1.75	2.05	1.94	1.88	1.74	1.77	1.82	1.87	1.98	1.98	2	1.99
Oceania	0.06	0.06	0.07	0.06	0.07	0.08	0.08	0.08	0.08	0.08	0.1	0.1	0.08	0.09	0.08	0.09	0.08	0.09	0.08	0.1	0.09	0.12	0.12	0.13	0.13	0.13	0.14	0.14	0.15	0.17	0.19	0.2	0.26	0.3	0.28	0.3	0.27	0.26	0.28	0.3	0.27	0.27	0.24	0.22	0.23	0.29	0.31	0.32	0.29	0.28	0.27	0.28	0.27