Chocolate imports — line graph

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>US Imports of Chocolate</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">
			
			body {
            background-color: #FFFFFD;
            font-family: helvetica, sans-serif;
            max-width: 800px;
        	}
        	
        	svg {
        	position: absolute;
        	left: 0px;
        	top: 120px;
            margin: 12px 0 6px 12px;
        	}
        	
        	.graphBlock {
            border-radius: 15px;
       	 	}
        
     		#textBlock {
          	padding: 1px 10px 8px; 10px;  
			margin: 1px 6px 0px 6px;  
			position: absolute;
			left: 118px;
			top: 150px;
			width: 270px;
			border: 1px solid burlywood; 
			background-color: oldlace;
			z-index: 30;
			/*visibility: hidden;*/
		    }
		      
			#innerTextBlock{
			margin-left: 0px;
			margin-top: 24px;
			width: 592px;
			padding: 0px 15px 9px 15px;
			border: 1px dotted darkkhaki; 
			background-color: oldlace;
			}	
			
			.title {
            position: absolute;
			left: 5px;
			top: 65px;
			height: 20px;
			line-height: 125%;
            font-size:17px;
            font-weight: bold;
            color: sienna;
            margin: 34px 0 10px 98px;
            width: 855px;
        	}	
        	
        	.subtitle {
        	font-size: 14px;
        	width: 855px;
        	}

h1 {
        	margin: 24px 6px 4px 6px;
        	font-weight: bold;
        	padding-left: 8px;
        	padding-bottom: 2px;
        	font-size: 21px;
        	border-bottom: 3px solid sienna;
        	color: sienna;
        	width: 855px;
        	}
        
        	h2 {
        	margin: 24px 0 0 0;
        	font-weight: bold;
        	font-size: 20px;
        	color: sienna;
        	width: 855px;
        }

h3 {
            color:sienna;
            font-size: 13px;
            line-height: 120%;
            margin: 8px 0 0px 0;
            padding-top:3px;
        }
        
        .intro {
            font-size: 15px;
            font-weight: bold;
            color: black;
            width: 855px;
            margin-top: 2px;
            margin-left: 6px;
            padding-left: 8px;
        }
        
        .sidenote {
            line-height: 125%;
            font-size:12px;
            margin: 3px 0 0px 0px;
        }
        
         .source {
            position: absolute;
            top: 935px;
            left: 616px;
            padding: 0 40px 0 0;
            font-size: 11px;
            color: black;
            font-style: italic;
            text-align: right;
            margin-top: -5px;
            line-height: 130%;
        }
    
        a {
            text-decoration: none;
            color: sienna;
        }

.axis path,
			.axis line {
				fill: none;
				stroke: darkkhaki;
				stroke-dasharray:1, 2;
				shape-rendering: crispEdges;
			}
			
		.axis text {
				font-family: sans-serif;
				font-size: 10px;
			}

.label {
			fill: sienna;
			font-size: 13px;
		}
		
		.noBold {
			font-weight: normal;
		}
	
			
		g path {
			opacity: 0.6;
		}
			
		g.canada path {
			stroke: sienna;
			stroke-width: 2;
			opacity: 1;
		}
			
		g.mexico path {
			stroke: darkolivegreen;
			stroke-width: 2;
			opacity: 1;
			}
			
		g.netherlands path {
			stroke: darkslateblue;
			stroke-width: 2;
			opacity: 1;
		}
			
		g.brazil path {
			stroke: crimson;
			stroke-width: 2;
			opacity: 1;
		}
			
		g.malaysia path {
			stroke: goldenrod;
			stroke-width: 2;
			opacity: 1;
		}
			
		g.indonesia path {
			stroke: steelblue;
			stroke-width: 2;
			opacity: 1;
		}
			
		g path:hover {
			stroke: black;
			stroke-width: 3;
		}

</style>
	</head>
	<body>
		<header>
        <h1>Canada continues to be the major exporter of chocolate to the United States.</h1>
        <p class="intro">Mexico is a distant second; once-mighty Brazil, Netherlands, and other countries are no longer big players.<p>
    	</header>
    	
    	<p class="title">Import values of chocolate entering US ports from selected countries, 1989&ndash;2014<br /><span class="noBold subtitle">Hover over the greyed-out lines to see what some of the other chocolate-exporting countries are.</span></p>
    	
    	<div id="textBlock">
			<h3>This chart represents mostly wholesale chocolate for the  food-service and food-manufacturing industries.</h3>
			<p class="sidenote">Here &ldquo;chocolate&rdquo; comprises chocolate bars and slabs weighing more than two kilograms each, cocoa paste, cocoa butter, and cocoa powder. Popular sweets such as Mars Bars, Kit Kats, and Hershey's Kisses are <em>not</em> included in the data.  </p>
        	<h3>The power of NAFTA</h3>
        	<p class="sidenote">The USDA says that &ldquo;North American Free Trade Agreement partners Canada and Mexico are not only the main destinations for US exports but also the main suppliers of chocolate candy to the US market.&rdquo;  </p>
			<p class="sidenote">But does that doesn't necessarily mean that Canada's and Mexico's stronger presence is <em>because</em> of NAFTA&mdash;does it? (NAFTA was passed in December 1993.) </p> 
    	</div>
    	
    	<svg class="graphBlock">	
    
    	<p class="source">Values adjusted for inflation. <br />
   			 Source: USDA, <a href ="https://www.fas.usda.gov/gats"">www.fas.usda.gov/gats</a>

//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");

//Set up scales
			var xScale = d3.time.scale()
						.range([ 0, 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")
							.tickSize(-(h-padding[0]-padding[2]))
							.outerTickSize(0)
							.tickPadding(6)
							.ticks(16)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.tickSize(-(w-padding[3]-padding[1]))
							.outerTickSize(0)
							.tickPadding(6);

var svg = d3.select("svg")
					.attr("width", w)
					.attr("height", h);
			
			// Add highlighted grid lines and areas now 
			// so they'll be on bottom layers
			var naftaLine = svg.append("line")
                        .attr("x1", 134.98466761581426 + padding[3])
                        .attr("y1", 700 + padding[2])
                        .attr("x2", 134.98466761581426 + padding[3])
                        .attr("y2", padding[0])
                        .attr("stroke-width", 1)
                        .attr("stroke", "peru")
                        .style("opacity", "0.8");	
                        
                        
			var recessionArea = svg.append("rect")
 						.attr("x", 527 + padding[3])
						.attr("y", padding[0])
						.attr("width", 44)
						.attr("height", 730)
						.attr("fill", "wheat")
						.style("opacity", "0.4");

//Configure line generator
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year)) + padding[3];
				})
				.y(function(d) {
					return yScale(+d.amount);
				})
				.interpolate("monotone");

//Load data
			d3.csv("chocolate_imports_1989-2014-2.csv", function(data) {

//Data is loaded in, but we need to restructure it.
				//Remember, each line requires an array of x/y pairs;
				//that is, an array of arrays, like so:
				//
				//	[ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
				//
				//We, however, are using 'year' as x and 'amount' as y.
				//We also need to know which country belongs to each
				//line, so we will build an array of objects that is
				//structured like this:
				/*

[
						{
							country: "Australia",
							emissions: [
										{ year: 1961, amount: 90589.568 },
										{ year: 1962, amount: 94912.961 },
										{ year: 1963, amount: 101029.517 },
										…
									   ]
						},
						{
							country: "Bermuda",
							emissions: [
										{ year: 1961, amount: 176.016 },
										{ year: 1962, amount: 157.681 },
										{ year: 1963, amount: 150.347 },
										…
									   ]
						},
						…
					 ]

*/
				//Note that this is an array of objects. Each object
				//contains two values, 'country' and 'emissions'.
				//The 'emissions' value is itself an array, containing
				//more objects, each one holding 'year' and 'amount' values.

//New array with all the years, for referencing later
				var years = ["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", "2014"];

//Create a new, empty array to hold our restructured dataset
				var dataset = [];

// Loop once for each row in data
				// I'm not using data.length because
				// I only want to use the first eleven rows of the dataset 
				for (var i = 0; i < 11; i++) {

//Create new object with this country's name and empty array
					dataset[i] = {
						sourceName: data[i].Source,
						exports: []
					};

//Loop through all the years
					for (var j = 0; j < years.length; j++) {

// If value is not empty
						if (data[i][years[j]]) {
							// Adjust for inflation via the rates below
							// Rates are easily obtained through most inflation calculators
							
							var origValue = data[i][years[j]];
							var adjustRate = 1;
							var adjustedValue = origValue * adjustRate;
							
							if (years[j] == "1989") {
							    adjustRate = 1.909;
							}
							
							if (years[j] == "1990") {
							    adjustRate = 1.811;
							}
							
							if (years[j] == "1991") {
							    adjustRate = 1.738;
							}
							
							if (years[j] == "1992") {
							    adjustRate = 1.687;
							}
							
							if (years[j] == "1993") {
							    adjustRate = 1.638;
							}
							
							if (years[j] == "1994") {
							    adjustRate = 1.597;
							}
							
							if (years[j] == "1995") {
							    adjustRate = 1.553;
							}
							
							if (years[j] == "1996") {
							    adjustRate = 1.509;
							}
							
							if (years[j] == "1997") {
							    adjustRate = 1.475;
							}
							
							if (years[j] == "1998") {
							    adjustRate = 1.452;
							}
							
							if (years[j] == "1999") {
							    adjustRate = 1.421;
							}
							
							if (years[j] == "2000") {
							    adjustRate = 1.375;
							}
							
							if (years[j] == "2001") {
							    adjustRate = 1.337;
							}
							
							if (years[j] == "2002") {
							    adjustRate = 1.316;
							}
							
							if (years[j] == "2003") {
							    adjustRate = 1.287;
							}
							
							if (years[j] == "2004") {
							    adjustRate = 1.253;
							}
							
							if (years[j] == "2005") {
							    adjustRate = 1.212;
							}
							
							if (years[j] == "2006") {
							    adjustRate = 1.174;
							}
							
							if (years[j] == "2007") {
							    adjustRate = 1.142;
							}
							
							if (years[j] == "2008") {
							    adjustRate = 1.100;
							}
							
							if (years[j] == "2009") {
							    adjustRate = 1.103;
							}
							
							if (years[j] == "2010") {
							    adjustRate = 1.086;
							}
							
							if (years[j] == "2011") {
							    adjustRate = 1.052;
							}
							
							if (years[j] == "2012") {
							    adjustRate = 1.031;
							}
							
							if (years[j] == "2013") {
							    adjustRate = 1.016;
							}
							
							adjustedValue = origValue * adjustRate;
							
							//Add a new object to the emissions data array
							//for this country
							
							dataset[i].exports.push({
								year: years[j],
								amount: adjustedValue
							});
						}

}

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

//Set scale domains
				xScale.domain([ 
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

yScale.domain([ 
					d3.max(dataset, function(d) {
						return d3.max(d.exports, function(d) {
							return +d.amount * 1.01;
						});
					}),
					0
				]);

// Make a group for each country
				// Add classes to the countries to highlight
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.attr("class", function(d){
					    if (d.sourceName == "Canada") {
					        return "canada";
					        }
					        
					    if (d.sourceName == "Mexico") {
					        return "mexico";
					        }
					        
					    if (d.sourceName == "Netherlands") {
					        return "netherlands";
					        }
					        
					    if (d.sourceName == "Brazil") {
					        return "brazil";
					        }
					        
					    if (d.sourceName == "Malaysia") {
					        return "malaysia";
					        }
					        
					    if (d.sourceName == "Indonesia") {
					        return "indonesia";
					        }
					    })
					    ;

//Append a title with the country name (so we get easy tooltips)
				groups.append("title")
					.text(function(d) {
						return d.sourceName;
					});

//Within each group, create a new line/path,
				//binding just the exports data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.exports ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "lightgray")
					.attr("stroke-width", 2);
			
		
				//Axes
				
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate("+ padding[3]  + "," +(h - padding[2]) + ")")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);
	    				
				svg.append("text")
				 	.attr("class", "label")
        			.attr("y", (h - padding[2]/2))
        			.attr("x", w/2)
        			.attr("dy", "1em")
        			.style("text-anchor", "middle")
        			.text("Year");
	
			 	svg.append("text")
				 	.attr("class", "label")
        			.attr("transform", "rotate(-90)")
        			.attr("y", padding[3]-60)
        			.attr("x",0 - (h/2))
        			.attr("dy", "1em")
        			.style("text-anchor", "middle")
        			.text("Value of imported chocolate, in millions of US dollars");
        			
        		// add reference label for NAFTA line	
        		var referenceLabelNafta = svg.append("foreignObject")
					.attr("x", 220)
					.attr("y", 375)	
    				.attr("width", 120)
    				.attr("height", 50)
  					.append("xhtml:body")
    				.style("font", "12px Helvetica, sans-serif")
    				.style("color", "darkred")
    				.html("<p>&larr; NAFTA passed</p>");		
				
				// add reference label for Great Recession shaded area
				var referenceLabelRecession = svg.append("foreignObject")
					.attr("x", 460)
					.attr("y", 375)	
    				.attr("width", 160)
    				.attr("height", 100)
  					.append("xhtml:body")
    				.style("font", "12px Helvetica, sans-serif")
    				.style("color", "darkred")
    				.style("text-align", "right")
    				.html("<p>The Great Recession &rarr; </p>");
        			
        	
        		// Borrowing Ruben V's code for data labels. Thanks, Ruben!!!
        		var datalabel = svg.selectAll(".lineLabel")
					.data(dataset.filter(function(d) {
						console.log(d.sourceName);
						return (d.sourceName == "Canada" ||
								d.sourceName == "Mexico" ||
								d.sourceName == "Netherlands" ||
								d.sourceName == "Brazil" ||
								d.sourceName == "Malaysia" ||
								d.sourceName == "Indonesia");
					}))
					.enter()
					.append("text")
					.attr("class", "lineLabel");
					
					datalabel.attr("x", [w - padding[1] - padding[3] + 95])
							.attr("y",(function(d) {
								return yScale( d.exports[25].amount ) + 2; // year [25] -> 2014
							}))
							.attr("fill", "black")
							.attr("font-size", "11px")
							.attr("font-family", "Helvetica, sans-serif")
							.text(function(d) {
								return d.sourceName;
							});

});
			//End USA data load function

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js