Weapons exports worldwide, step 6

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Data on weapons exports in the world</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				font-family: Helvetica, Arial, sans-serif;
				font-weight: normal;
			}
			
			h1,h2,h3,p {
				line-height:0.3em;
				font-weight: normal;
			}
			
			h2,h3,p {
				color: grey;
			}
			
			h1 {
				text-transform:uppercase;
				font-size:18px;
			}
			
			h2 {
				font-size:14px;
			}
			
			h3 {
				font-size:11px;
			}
			
			p {
				font-size:8px;
			}			
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			g.highlight path {
				fill: violet;
				opacity: 0.4;
			}
			
			g.highlight2 path {
				fill: red;
				opacity: 0.2;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
				color: 
			}

.y.axis path,
			.x.axis path {
				opacity: 0;
			}
		
		</style>
	
	
	</head>
	<body>
		<h1>Who is exporting weapons worldwide?</h1>
		<h2>Weapons exports by country, <a href="https://www.sipri.org/databases/yy_armstransfers/background/explanations2_default">TIV</a>, 1995-2014</h2>
		<h3>Source, <a href="https://armstrade.sipri.org/armstrade/page/values.php">SIPRI</a>, 1995-2014</h3>
		
		
		<script type="text/javascript">
		
			//Defines a bunch of variables to be used later in the chart, makes life easier when wanting to change some stuff
			
				//1 width and height of the svg element
			var w = 600;
			var h = 500;
			
				//2 padding variables, defines various white spaces in the chart
			var padding = [ 20, 10, 30, 80 ];  //Top, right, bottom, left
			
				//3 Set up date formatting and years
			var dateFormat = d3.time.format("%Y");
			
				//4 creates the scale for axis, the scale needs to be created before the axis itself
					//linear scale, basically a scale for continuous numbers,range defines the length of the scale
			var xScale = d3.time.scale()
								.range([ padding[3], w-padding[3]-padding[1]]);
			
			var yScale = d3.scale.linear()
								.range([padding[0], h- padding[2]]);
			
			
				//5 creates both axis
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(8)
							.tickFormat(function(d){
								return dateFormat(d);
							});

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");
					
				//6 Initialize area generator
			var area = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y0(h - padding[2])
				.y1(function(d) {
					return yScale(+d.tiv);
				});
					
				
			//creates empty svg element
			var svg = d3.select("body").append("svg").attr("width",w).attr("height",h);
			//load the data
			d3.csv("WeaponsExport19952014.csv", function(data) {	
				//Before doing anything, data need to be transformed to be easily manipulated in D3
				//Our example is actually very similar to the one used by Scott
				//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 'tiv' 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",
							wexports: [
										{ year: 1961, tiv: 90589.568 },
										{ year: 1962, tiv: 94912.961 },
										{ year: 1963, tiv: 101029.517 },
										�
									   ]
						},
						{
							country: "Bermuda",
							wexports: [
										{ year: 1961, tiv: 176.016 },
										{ year: 1962, tiv: 157.681 },
										{ year: 1963, tiv: 150.347 },
										�
									   ]
						},
						�
					 ]

*/
				//Note that this is an array of objects. Each object
				//contains two values, 'country' and 'wexports'.
				//The 'wexports' value is itself an array, containing
				//more objects, each one holding 'year' and 'tiv' values.
				
				//New array with all the years, for referencing later
				var years = ["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 = [];
				
				//The loop below generates the new data set, it creates an array as described above
				//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] = {
						country: data[i].Country,
						wexports: []
					};

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

// If value is not empty
						if (data[i][years[j]]) {
							//Add a new object to the emissions data array
							//for this country
							dataset[i].wexports.push({
								year: years[j],
								tiv: data[i][years[j]]
							});
						}

}

}
				
				//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.wexports, function(d) {
							return +d.tiv;
						});
					}),
					0
				]);
				
				//console.log(xScale.domain());
				//console.log(yScale.domain());
				
				//Make a group for each country
				var groups = svg.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.classed("highlight", function(d) {
						if (d.country == "United States") {
							return true;
						} else {
							return false;
						}
						})
					.classed("highlight2", function(d) {
						if (d.country == "Russia") {
							return true;
						} else {
							return false;
						}
					});

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

//Within each group, create a new line/path,
				//binding just the TIV data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.wexports ];
					})
					.enter()
					.append("path")
					.attr("class", "area")
					.attr("d", area)
					.attr("fill", "steelblue")
					.attr("stroke", "none")
					.attr("opacity", 0.1);

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

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

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