t-t-t-t-t · March 19, 2020 23:36
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>NZ Sheep Density</title>
 	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 	<style type="text/css">

 		body {
 			background-color: steelblue;
 		}
 		
 		svg {
 			background-color: steelblue;
 		}
 		
 		#container {
 			width: 1200px;
 			margin: 0px auto 0px auto;
 			background-color: steelblue;
 			padding
 		}
 		
 		.totalContainer {
 			/* Place the map and barplot containers side-by-side */
 			display: inline-block;
 			width: 49%;
 		}	

 		path {
 			stroke: lightgray;
 		}
 		
 		.description {
 			fill:navy;
 			font-family: helvetica;
 		}
 		
 		.highlight {
 			fill: lightgray;
 		}

 		.yeartitle {
 			fill: white;
 			font-family: helvetica;
 			font-size: 28px;
 			font-weight: bold;
 		}
 		
 		.axis--x path,
 		
 		.axis--x line {
 			fill: none;
 			stroke: none;
 		}		
 		.axis--x text {
 			fill: white;
 			font-family: helvetica;
 			font-size: 11px;
 			font-weight:bold;
 		}		
 		
 		.axis--y path,
 		
 		.axis--y line {
 			fill: none;
 			stroke: lightgray;
 		}
 		
 		.axis--y text {
 			fill: white;
 			font-family: helvetica;
 			font-size: 11px;
 			font-weight:bold;
 		}
 		
 		.label {
 			fill:white;
 			font-family: helvetica;
 		}
 		
 		.chartTitle {
 			fill:white;
 			font-family: helvetica;
 			font-weight: bold;
 			font-size: 18px;
 		}
 				
 	</style>
 </head>
 <body>

 	<div id=container>
 		<div class="totalContainer" id="mapContainer"></div>
 		<div class="totalContainer" id="bargraphContainer"></div>
 	</div>

 	<script type="text/javascript">

 	//Width and height of containers
 	var w = d3.select(".totalContainer").node().clientWidth; 
 	var h = 800;

 	//height of bargraph and padding
 	var h_bar = h/2;
 	var padding = 60;
 	var bottompadding =150;

 	//Color Scale
 	var color = d3.scale.quantize()
 					.domain([ 1, 310]) 					
 					.range(['#edf8e9','#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#005a32']);  //ColorBrewer: Green/Sequential/n=7


 	//Define Projection
 	var projection = d3.geo.mercator()
 						   .center([ 172.5, -41 ])
 						   .translate([ w/2, h/2 ])
 						   .scale([ h*3 ]);

 	//Define path generator
 	var path = d3.geo.path()
 					 .projection(projection);

 	//---------------------------------------------------------------------------------------------------------//
 	// Load Data
 	//---------------------------------------------------------------------------------------------------------//
 			 
 			 
 	//Load in sheep data (by region)
 	d3.csv("sheepdat.csv", function(data) {
 	
 	//Load in sheep data (total)	
 	d3.csv("sheepdattotal.csv", function(totaldata) {

 		//Load in GeoJSON data
 		d3.json("NZL_adm1.json", function(json) {
 								
 			//---------------------------------------------------------------------------------------------------------//
 			// Make Map
 			//---------------------------------------------------------------------------------------------------------//

 			//Merge the regional sheep data and GeoJSON into a single array
 			//
 			//Loop through once for each sheep data entry
 			for (var i = 0; i < data.length; i++) {
 		
 				//Grab region name
 				var dataRegionCode = data[i].region;
 				
 				//Grab year
 				var currentyear = +data[i].year;
 				
 				//Grab density value
 				var dataValue = +data[i].density;
 		
 				//Restrict to 2015 (default year for map)
 				if (currentyear == 2015){
 				
 					//Find the corresponding region inside the GeoJSON
 					for (var j = 0; j < json.features.length; j++) {
 					
 						//We'll check if the json region name matches csv region name
 						var jsonRegionCode = json.features[j].properties.NAME_1;
 						
 						if (dataRegionCode == jsonRegionCode) {
 					
 							//Copy the density value into the GeoJSON
 							json.features[j].properties.sheepdensity = dataValue; 
 							
 							//Stop looking through the JSON
 							break;
 							
 						}
 					}
 				}			
 			}	
 									 
 			//Create SVG element for map
 			var svg = d3.select("#mapContainer")
 						.append("svg")
 						.attr("id", "map")
 						.attr("width", w)
 						.attr("height", h);
 				
 			//Create groups
 			var groups = svg.selectAll("g")
 							.attr("id","graphsgroup");

 			//Bind data and create one path per GeoJSON feature
 			var regions = groups.data(json.features)
 								.enter()
 								.append("path")
 								.attr("d", path)
 								.attr("fill", function(d) {
 										return color(d.properties.sheepdensity);
 								})
 								.attr("opacity",0) //Start hidden for initial transition in
 								
 								//Make mouseover (affecting both charts)
 								.on("mouseover",function(d){
 									
 									//highlight the region on the map
 									d3.select(this)
 									.classed("highlight",true);
 									
 									//define variable for selected region name 									
 									var thisName = d.properties.NAME_1 ;
 									
 									//Dim the bars for national average 
 									totalbars.transition()
 											.duration(500)
 											.attr("opacity",.2);
 									
 									//hide title with (National Average) 
 									figuretitle.transition()
 												.attr("opacity",0);
 												
 									//show title with correct region name
 									regiontext.filter(function(d){
 														if (thisName == d.properties.NAME_1) {
 															return true;  
 														}										
 												})
 												.transition()
 												.attr("opacity",1);

 									//Show barplot for specified region		
 									barplots.filter(function(d) {
 												if (thisName == d.region) {
 													return true;  //…then it's a match
 												}
 											})
 											.transition()
 											.duration(500)
 											.delay(function(d,i){return i*20;})
 											.attr("opacity",.8); //don't give full opacity so can still see national average
 								})
 								
 								//Put everything back to default on mouseout
 								.on("mouseout", function(d) {
 								
 									//remove highlighted region
 									d3.select(this)
 										.classed("highlight",false);
 									
 									//bring back national average bars
 									totalbars.transition()
 											.duration(500)
 											.attr("opacity",1);	
 									
 									//bring back original figure title
 									figuretitle.transition()
 												.attr("opacity",1);
 									
 									//hide region specific title
 									regiontext.transition()
 												.attr("opacity",0);
 									
 									//hide region specific bars
 									barplots.transition()
 											.attr("opacity",0);		
 								});
 								
 			//Add year next to map
 			yeartext = groups.data(totaldata)
 							.enter()
 							.append("text")
 							.attr("class","yeartitle")
 							.attr("text-anchor","left")
 							.attr("x",2*padding)
 							.attr("y",h-h_bar-padding)
 							.text(function(d){
 								return d.year;
 							})
 							.attr("opacity",0); //hide at first so will transition in

 			//Create Legend for colors
 			
 				//define range of values for each color
 				var legenddat =	color.range().map(function(d) {
 						  d = color.invertExtent(d);
 						  if (d[0] == null) d[0] = x.domain()[0];
 						  if (d[1] == null) d[1] = x.domain()[1];
 						  return d;
 						});
 							
 				var squarewidth = 30
 				
 				//create group
 				var key = svg.selectAll("g")
 							.data(legenddat)
 							.enter()
 							.append("g")
 							
 				//make rectangles
 				var keysquares = key.append("rect")
 									.attr("x",function(d,i){
 										return w/2 +squarewidth*i;
 									})
 									.attr("y", h - bottompadding)
 									.attr("width",squarewidth)
 									.attr("height",squarewidth)
 									.attr("fill",function(d,i){
 										return ['#edf8e9','#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#005a32'][i];
 									})
 									.attr("opacity",0);
 									
 				//add labels
 				var keytext = key.append("text")
 									.attr("x",function(d,i){
 										return w/2 +squarewidth*i;
 									})
 									.attr("y", h - bottompadding - 3)
 									.text(function(d,i){
 										return "< " + d3.format(".0f")(+d[1]);  
 									})
 									.attr("font-size",10)
 									.attr("font-family","helvetica")
 									.attr("fill","white")
 									.attr("opacity",0);								
 							
 		//---------------------------------------------------------------------------------------------------------//
 		//Create Bar graphs
 		//---------------------------------------------------------------------------------------------------------//
 					
 				//Create SVG for bar graph
 				var svg = d3.select("#bargraphContainer")
 							.append("svg")
 							.attr("id", "map")
 							.attr("width", w)
 							.attr("height", h);			
 						
 				//create groups		
 				var groups = svg.selectAll("g")
 								.attr("id","graphsgroup");

 								
 				//Define x scale
 				
 					//get list of years
 					var xdomain = []
 					for (var i = d3.min(data,function(d){
 												return d.year;
 											});
 							i <= d3.max(data,function(d){
 												return d.year;}
 											); 
 							i++) {
 									xdomain.push(i.toString());
 					}		
 					
 					//define scale
 					var xScale = d3.scale.ordinal()
 										.domain( xdomain)
 										.rangeRoundBands([ padding, w - padding ], 0.08);
 				
 				//define y scale
 				var yScale = d3.scale.linear()
 									.domain([ 0, 320 ]) 
 									.rangeRound([ h - bottompadding, h - bottompadding - h_bar ]);		

 				
 				//Add Bars for Region (hidden until mouseover region on map)
 				var barplots = groups.data(data)	//use "data" because region specific csv
 									.enter()
 									.append("rect")
 									.attr("x", function(d) {
 											return xScale(d.year); 
 									})
 									.attr("y", function(d) {
 											return yScale(d.density);
 									})
 									.attr("width", xScale.rangeBand())
 									.attr("height", function(d){
 											return h - bottompadding - yScale(d.density);
 									})
 									.attr("fill","white")
 									.attr("opacity",0); 
 				
 				//Add Bars for National Average (show by default)			
 					var totalbars = groups.data(totaldata) //use "totaldata" because national average csv
 										.enter()
 										.append("rect")
 										.attr("x", function(d) {
 												return xScale(d.year); 
 										})
 										
 										.attr("y", function(d) {
 												return h-bottompadding;
 										})
 										.attr("width", xScale.rangeBand())
 										.attr("height", function(d){
 												return 0;
 										})
 										.attr("fill", function(d){
 												return color(d.density);
 										})
 										.attr("opacity",0) //hide at first so can transition in
 										
 										//Create mouseover to highlight bars and change year being displayed on map
 										.on("mouseover",function(d){
 									
 											//highlight selected bar
 											d3.select(this)
 												.classed("highlight",true);

 											//define year selected
 											var thisyear = d.year;	
 												
 											//Change year shown next to map
 											yeartext.transition()
 													.attr("opacity",function(d){
 														if(d.year==thisyear){
 															return 1;
 														}else{
 															return 0;
 														}
 													});
 												
 											//Change Map colors based on year (use similar loop as before but change 2015 to selected year)
 											
 												//Loop through once for each data entry
 												for (var i = 0; i < data.length; i++) {
 											
 													//Grab region name
 													var dataRegionCode = data[i].region;
 													
 													//Grab year 
 													var currentyear = +data[i].year;
 													
 													//Grab density value
 													var dataValue = +data[i].density;
 											
 													//Restrict to year highlighted on barplot ---This is what differs in the loop from the original selection!
 													if (currentyear == d.year){
 													
 														//Find the corresponding region inside the GeoJSON
 														for (var j = 0; j < json.features.length; j++) {
 														
 															//Check if region from json matches region from csv
 															var jsonRegionCode = json.features[j].properties.NAME_1;
 															
 															if (dataRegionCode == jsonRegionCode) {
 														
 																//Copy the data value into the GeoJSON
 																json.features[j].properties.sheepdensity = dataValue;  
 																
 																//Stop looking through the JSON
 																break;
 																
 															}
 														}
 													}			
 												}
 												//Change region colors with updated values												
 												regions.transition()
 													.attr("fill", function(d) {
 															return color(d.properties.sheepdensity);
 													});
 										})
 										
 										//Return to default (2015) on mouseout
 										.on("mouseout",function(d){
 											
 											//remove highlight
 											d3.select(this)
 												.classed("highlight",false);
 								
 											//change year back
 											yeartext.transition()
 													.attr("opacity",function(d){
 														if(d.year==2015){
 															return 1;
 														} else {
 															return 0;
 														}
 															});
 															
 											//Change Map colors back to 2015
 											
 												//same as original loop
 												for (var i = 0; i < data.length; i++) {
 													var dataRegionCode = data[i].region;
 													var currentyear = +data[i].year;
 													var dataValue = +data[i].density;
 													if (currentyear == 2015){
 														for (var j = 0; j < json.features.length; j++) {
 															var jsonRegionCode = json.features[j].properties.NAME_1;															
 															if (dataRegionCode == jsonRegionCode) {
 																json.features[j].properties.sheepdensity = dataValue;  
 																break;
 															}
 														}
 													}			
 												}
 												//update colors again
 												regions.transition()
 													.attr("fill", function(d) {
 															return color(d.properties.sheepdensity);
 													})										
 										});

 				//Add x axis
 				var xAxis = d3.svg.axis()
 								.scale(xScale)
 								.orient("bottom")
 								.ticks(14);																			
 				
 				var xAx = svg.append("g")
 							.attr("class", "axis--x")
 							.attr("transform", "translate(0," + (h - bottompadding) + ")")
 							.attr("opacity",0)  //hide before initial transition in
 							.call(xAxis);
 		
 				//Create y axis 
 				var yAxis = d3.svg.axis()
 								.scale(yScale)
 								.orient("left")
 								.ticks(5);

 				var yAx = svg.append("g")
 								.attr("class", "axis--y") 
 								.attr("transform", "translate(" + padding + ",0)")
 								.attr("opacity",0) //hide before initial transition in
 								.call(yAxis);
 					
 					
 				//Create y axis label
 				var ylabel = svg.append("text")
 								.attr("class","label")
 								.attr("text-anchor","middle")
 								.text("sheep per square km ")	
 								.attr("transform","translate(" + padding/3 +","+ h*.6 +") rotate(-90)" )
 								.attr("opacity",0);	//hide before initial transition in	

 				//Create Figure Title
 				var figuretitle = svg.append("text")
 									.attr("class","chartTitle")
 									.attr("x",2*padding)
 									.attr("y",h-h_bar-bottompadding)
 									.attr("text-anchor","left")
 									.text("Sheep Density (National Average)")
 									.attr("opacity",0); //hide before initial transition in


 				//Create Text for Region (hidden until mouseover on map)
 				var regiontext = groups.data(json.features)
 										.enter()
 										.append("text")
 										.attr("class","chartTitle")
 										.attr("text-anchor","left")
 										.attr("x",2*padding)
 										.attr("y",h-h_bar-bottompadding)
 										.text(function(d){
 												return "Sheep Density ("+d.properties.NAME_1+" Region)";
 										})
 										.attr("opacity",0);
 				
 				//Add text descriptions
 				
 				svg.append("text")
 					.attr("class","description")
 					.attr("x",padding)
 					.attr("y",bottompadding/3)
 					.text("Interactivity:")
 					.attr("opacity",0)
 					.attr("font-weight","bold")
 					.transition()
 					.delay(1000)
 					.duration(1500)
 					.attr("opacity",1);
 				svg.append("text")
 					.attr("class","description")
 					.attr("x",padding)
 					.attr("y",bottompadding/3+20)
 					.text("Hovering over a region on the map will show region-specific changes ")
 					.attr("opacity",0)
 					.transition()
 					.delay(1000)
 					.duration(1500)
 					.attr("opacity",1);					
 				svg.append("text")
 					.attr("class","description")
 					.attr("x",padding)
 					.attr("y",bottompadding/3+40)
 					.text("in sheep density over time in the barplot. Hovering over the barplot will ")
 					.attr("opacity",0)
 					.transition()
 					.delay(1000)
 					.duration(1500)
 					.attr("opacity",1);
 					
 				svg.append("text")
 					.attr("class","description")
 					.attr("x",padding)
 					.attr("y",bottompadding/3+60)
 					.text("update the map to show the year highlighted.")
 					.attr("opacity",0)
 					.transition()
 					.delay(1000)
 					.duration(1500)
 					.attr("opacity",1);

 		//---------------------------------------------------------------------------------------------------------//
 		// Add initial fade in for each element - start all blue, then show map, then rest of details
 		//---------------------------------------------------------------------------------------------------------//
 			
 			//map
 			regions.transition()
 					.duration(1500)
 					.attr("opacity",1)
 					.attr("stroke","gray");	
 	
 			//year on side of map
 			yeartext.transition()
 					.duration(1500)
 					.delay(1000)
 					.attr("opacity",function(d){
 										if(d.year==2015){
 											return 1;
 										} else {
 											return 0;
 										}
 					});
 			
 			//Map Key
 			keysquares.transition()
 				.duration(1500)
 				.delay(1000)
 				.attr("opacity",1);
 				
 			keytext.transition()
 				.duration(1500)
 				.delay(1000)
 				.attr("opacity",1);			
 			
 			//bar plot
 			totalbars.transition()
 					.duration(1500)
 					.delay(function(d,i){
 						return 1000 +30*i;
 					})
 					.attr("y", function(d) {
 									return yScale(d.density);
 					})
 					.attr("height", function(d){
 						return h - bottompadding - yScale(d.density);
 					})
 					.attr("opacity",1);
 			
 			//barplot title
 			figuretitle.transition()
 					.duration(1500)
 					.delay(1000)
 					.attr("opacity",1);
 			
 			//y axis label
 			ylabel.transition()
 					.duration(1500)
 					.delay(1000)
 					.attr("opacity",1);
 			
 			//y axis
 			yAx.transition()
 					.duration(1500)
 					.delay(1000)
 					.attr("opacity",1);
 			
 			//x axis
 			xAx.transition()
 					.duration(1500)
 					.delay(1000)
 					.attr("opacity",1);

 		}); // end json		
 	});		//end csv
 	});		// end csv

 	</script>
 </body>
 </html>
diff --git a/NZL_adm1.json b/NZL_adm1.json
diff --git a/sheepdat.csv b/sheepdat.csv
diff --git a/sheepdattotal.csv b/sheepdattotal.csv
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>NZ Sheep Density</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: steelblue;
	}

	svg {
	background-color: steelblue;
	}

	#container {
	width: 1200px;
	margin: 0px auto 0px auto;
	background-color: steelblue;
	padding
	}

	.totalContainer {
	/* Place the map and barplot containers side-by-side */
	display: inline-block;
	width: 49%;
	}

	path {
	stroke: lightgray;
	}

	.description {
	fill:navy;
	font-family: helvetica;
	}

	.highlight {
	fill: lightgray;
	}

	.yeartitle {
	fill: white;
	font-family: helvetica;
	font-size: 28px;
	font-weight: bold;
	}

	.axis--x path,

	.axis--x line {
	fill: none;
	stroke: none;
	}
	.axis--x text {
	fill: white;
	font-family: helvetica;
	font-size: 11px;
	font-weight:bold;
	}

	.axis--y path,

	.axis--y line {
	fill: none;
	stroke: lightgray;
	}

	.axis--y text {
	fill: white;
	font-family: helvetica;
	font-size: 11px;
	font-weight:bold;
	}

	.label {
	fill:white;
	font-family: helvetica;
	}

	.chartTitle {
	fill:white;
	font-family: helvetica;
	font-weight: bold;
	font-size: 18px;
	}

	</style>
	</head>
	<body>

	<div id=container>
	<div class="totalContainer" id="mapContainer"></div>
	<div class="totalContainer" id="bargraphContainer"></div>
	</div>

	<script type="text/javascript">

	//Width and height of containers
	var w = d3.select(".totalContainer").node().clientWidth;
	var h = 800;

	//height of bargraph and padding
	var h_bar = h/2;
	var padding = 60;
	var bottompadding =150;

	//Color Scale
	var color = d3.scale.quantize()
	.domain([ 1, 310])
	.range(['#edf8e9','#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#005a32']); //ColorBrewer: Green/Sequential/n=7


	//Define Projection
	var projection = d3.geo.mercator()
	.center([ 172.5, -41 ])
	.translate([ w/2, h/2 ])
	.scale([ h*3 ]);

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	//---------------------------------------------------------------------------------------------------------//
	// Load Data
	//---------------------------------------------------------------------------------------------------------//


	//Load in sheep data (by region)
	d3.csv("sheepdat.csv", function(data) {

	//Load in sheep data (total)
	d3.csv("sheepdattotal.csv", function(totaldata) {

	//Load in GeoJSON data
	d3.json("NZL_adm1.json", function(json) {

	//---------------------------------------------------------------------------------------------------------//
	// Make Map
	//---------------------------------------------------------------------------------------------------------//

	//Merge the regional sheep data and GeoJSON into a single array
	//
	//Loop through once for each sheep data entry
	for (var i = 0; i < data.length; i++) {

	//Grab region name
	var dataRegionCode = data[i].region;

	//Grab year
	var currentyear = +data[i].year;

	//Grab density value
	var dataValue = +data[i].density;

	//Restrict to 2015 (default year for map)
	if (currentyear == 2015){

	//Find the corresponding region inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {

	//We'll check if the json region name matches csv region name
	var jsonRegionCode = json.features[j].properties.NAME_1;

	if (dataRegionCode == jsonRegionCode) {

	//Copy the density value into the GeoJSON
	json.features[j].properties.sheepdensity = dataValue;

	//Stop looking through the JSON
	break;

	}
	}
	}
	}

	//Create SVG element for map
	var svg = d3.select("#mapContainer")
	.append("svg")
	.attr("id", "map")
	.attr("width", w)
	.attr("height", h);

	//Create groups
	var groups = svg.selectAll("g")
	.attr("id","graphsgroup");

	//Bind data and create one path per GeoJSON feature
	var regions = groups.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("fill", function(d) {
	return color(d.properties.sheepdensity);
	})
	.attr("opacity",0) //Start hidden for initial transition in

	//Make mouseover (affecting both charts)
	.on("mouseover",function(d){

	//highlight the region on the map
	d3.select(this)
	.classed("highlight",true);

	//define variable for selected region name
	var thisName = d.properties.NAME_1 ;

	//Dim the bars for national average
	totalbars.transition()
	.duration(500)
	.attr("opacity",.2);

	//hide title with (National Average)
	figuretitle.transition()
	.attr("opacity",0);

	//show title with correct region name
	regiontext.filter(function(d){
	if (thisName == d.properties.NAME_1) {
	return true;
	}
	})
	.transition()
	.attr("opacity",1);

	//Show barplot for specified region
	barplots.filter(function(d) {
	if (thisName == d.region) {
	return true; //…then it's a match
	}
	})
	.transition()
	.duration(500)
	.delay(function(d,i){return i*20;})
	.attr("opacity",.8); //don't give full opacity so can still see national average
	})

	//Put everything back to default on mouseout
	.on("mouseout", function(d) {

	//remove highlighted region
	d3.select(this)
	.classed("highlight",false);

	//bring back national average bars
	totalbars.transition()
	.duration(500)
	.attr("opacity",1);

	//bring back original figure title
	figuretitle.transition()
	.attr("opacity",1);

	//hide region specific title
	regiontext.transition()
	.attr("opacity",0);

	//hide region specific bars
	barplots.transition()
	.attr("opacity",0);
	});

	//Add year next to map
	yeartext = groups.data(totaldata)
	.enter()
	.append("text")
	.attr("class","yeartitle")
	.attr("text-anchor","left")
	.attr("x",2*padding)
	.attr("y",h-h_bar-padding)
	.text(function(d){
	return d.year;
	})
	.attr("opacity",0); //hide at first so will transition in

	//Create Legend for colors

	//define range of values for each color
	var legenddat = color.range().map(function(d) {
	d = color.invertExtent(d);
	if (d[0] == null) d[0] = x.domain()[0];
	if (d[1] == null) d[1] = x.domain()[1];
	return d;
	});

	var squarewidth = 30

	//create group
	var key = svg.selectAll("g")
	.data(legenddat)
	.enter()
	.append("g")

	//make rectangles
	var keysquares = key.append("rect")
	.attr("x",function(d,i){
	return w/2 +squarewidth*i;
	})
	.attr("y", h - bottompadding)
	.attr("width",squarewidth)
	.attr("height",squarewidth)
	.attr("fill",function(d,i){
	return ['#edf8e9','#c7e9c0','#a1d99b','#74c476','#41ab5d','#238b45','#005a32'][i];
	})
	.attr("opacity",0);

	//add labels
	var keytext = key.append("text")
	.attr("x",function(d,i){
	return w/2 +squarewidth*i;
	})
	.attr("y", h - bottompadding - 3)
	.text(function(d,i){
	return "< " + d3.format(".0f")(+d[1]);
	})
	.attr("font-size",10)
	.attr("font-family","helvetica")
	.attr("fill","white")
	.attr("opacity",0);

	//---------------------------------------------------------------------------------------------------------//
	//Create Bar graphs
	//---------------------------------------------------------------------------------------------------------//

	//Create SVG for bar graph
	var svg = d3.select("#bargraphContainer")
	.append("svg")
	.attr("id", "map")
	.attr("width", w)
	.attr("height", h);

	//create groups
	var groups = svg.selectAll("g")
	.attr("id","graphsgroup");


	//Define x scale

	//get list of years
	var xdomain = []
	for (var i = d3.min(data,function(d){
	return d.year;
	});
	i <= d3.max(data,function(d){
	return d.year;}
	);
	i++) {
	xdomain.push(i.toString());
	}

	//define scale
	var xScale = d3.scale.ordinal()
	.domain( xdomain)
	.rangeRoundBands([ padding, w - padding ], 0.08);

	//define y scale
	var yScale = d3.scale.linear()
	.domain([ 0, 320 ])
	.rangeRound([ h - bottompadding, h - bottompadding - h_bar ]);


	//Add Bars for Region (hidden until mouseover region on map)
	var barplots = groups.data(data) //use "data" because region specific csv
	.enter()
	.append("rect")
	.attr("x", function(d) {
	return xScale(d.year);
	})
	.attr("y", function(d) {
	return yScale(d.density);
	})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d){
	return h - bottompadding - yScale(d.density);
	})
	.attr("fill","white")
	.attr("opacity",0);

	//Add Bars for National Average (show by default)
	var totalbars = groups.data(totaldata) //use "totaldata" because national average csv
	.enter()
	.append("rect")
	.attr("x", function(d) {
	return xScale(d.year);
	})

	.attr("y", function(d) {
	return h-bottompadding;
	})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d){
	return 0;
	})
	.attr("fill", function(d){
	return color(d.density);
	})
	.attr("opacity",0) //hide at first so can transition in

	//Create mouseover to highlight bars and change year being displayed on map
	.on("mouseover",function(d){

	//highlight selected bar
	d3.select(this)
	.classed("highlight",true);

	//define year selected
	var thisyear = d.year;

	//Change year shown next to map
	yeartext.transition()
	.attr("opacity",function(d){
	if(d.year==thisyear){
	return 1;
	}else{
	return 0;
	}
	});

	//Change Map colors based on year (use similar loop as before but change 2015 to selected year)

	//Loop through once for each data entry
	for (var i = 0; i < data.length; i++) {

	//Grab region name
	var dataRegionCode = data[i].region;

	//Grab year
	var currentyear = +data[i].year;

	//Grab density value
	var dataValue = +data[i].density;

	//Restrict to year highlighted on barplot ---This is what differs in the loop from the original selection!
	if (currentyear == d.year){

	//Find the corresponding region inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {

	//Check if region from json matches region from csv
	var jsonRegionCode = json.features[j].properties.NAME_1;

	if (dataRegionCode == jsonRegionCode) {

	//Copy the data value into the GeoJSON
	json.features[j].properties.sheepdensity = dataValue;

	//Stop looking through the JSON
	break;

	}
	}
	}
	}
	//Change region colors with updated values
	regions.transition()
	.attr("fill", function(d) {
	return color(d.properties.sheepdensity);
	});
	})

	//Return to default (2015) on mouseout
	.on("mouseout",function(d){

	//remove highlight
	d3.select(this)
	.classed("highlight",false);

	//change year back
	yeartext.transition()
	.attr("opacity",function(d){
	if(d.year==2015){
	return 1;
	} else {
	return 0;
	}
	});

	//Change Map colors back to 2015

	//same as original loop
	for (var i = 0; i < data.length; i++) {
	var dataRegionCode = data[i].region;
	var currentyear = +data[i].year;
	var dataValue = +data[i].density;
	if (currentyear == 2015){
	for (var j = 0; j < json.features.length; j++) {
	var jsonRegionCode = json.features[j].properties.NAME_1;
	if (dataRegionCode == jsonRegionCode) {
	json.features[j].properties.sheepdensity = dataValue;
	break;
	}
	}
	}
	}
	//update colors again
	regions.transition()
	.attr("fill", function(d) {
	return color(d.properties.sheepdensity);
	})
	});

	//Add x axis
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(14);

	var xAx = svg.append("g")
	.attr("class", "axis--x")
	.attr("transform", "translate(0," + (h - bottompadding) + ")")
	.attr("opacity",0) //hide before initial transition in
	.call(xAxis);

	//Create y axis
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	var yAx = svg.append("g")
	.attr("class", "axis--y")
	.attr("transform", "translate(" + padding + ",0)")
	.attr("opacity",0) //hide before initial transition in
	.call(yAxis);


	//Create y axis label
	var ylabel = svg.append("text")
	.attr("class","label")
	.attr("text-anchor","middle")
	.text("sheep per square km ")
	.attr("transform","translate(" + padding/3 +","+ h*.6 +") rotate(-90)" )
	.attr("opacity",0); //hide before initial transition in

	//Create Figure Title
	var figuretitle = svg.append("text")
	.attr("class","chartTitle")
	.attr("x",2*padding)
	.attr("y",h-h_bar-bottompadding)
	.attr("text-anchor","left")
	.text("Sheep Density (National Average)")
	.attr("opacity",0); //hide before initial transition in


	//Create Text for Region (hidden until mouseover on map)
	var regiontext = groups.data(json.features)
	.enter()
	.append("text")
	.attr("class","chartTitle")
	.attr("text-anchor","left")
	.attr("x",2*padding)
	.attr("y",h-h_bar-bottompadding)
	.text(function(d){
	return "Sheep Density ("+d.properties.NAME_1+" Region)";
	})
	.attr("opacity",0);

	//Add text descriptions

	svg.append("text")
	.attr("class","description")
	.attr("x",padding)
	.attr("y",bottompadding/3)
	.text("Interactivity:")
	.attr("opacity",0)
	.attr("font-weight","bold")
	.transition()
	.delay(1000)
	.duration(1500)
	.attr("opacity",1);
	svg.append("text")
	.attr("class","description")
	.attr("x",padding)
	.attr("y",bottompadding/3+20)
	.text("Hovering over a region on the map will show region-specific changes ")
	.attr("opacity",0)
	.transition()
	.delay(1000)
	.duration(1500)
	.attr("opacity",1);
	svg.append("text")
	.attr("class","description")
	.attr("x",padding)
	.attr("y",bottompadding/3+40)
	.text("in sheep density over time in the barplot. Hovering over the barplot will ")
	.attr("opacity",0)
	.transition()
	.delay(1000)
	.duration(1500)
	.attr("opacity",1);

	svg.append("text")
	.attr("class","description")
	.attr("x",padding)
	.attr("y",bottompadding/3+60)
	.text("update the map to show the year highlighted.")
	.attr("opacity",0)
	.transition()
	.delay(1000)
	.duration(1500)
	.attr("opacity",1);

	//---------------------------------------------------------------------------------------------------------//
	// Add initial fade in for each element - start all blue, then show map, then rest of details
	//---------------------------------------------------------------------------------------------------------//

	//map
	regions.transition()
	.duration(1500)
	.attr("opacity",1)
	.attr("stroke","gray");

	//year on side of map
	yeartext.transition()
	.duration(1500)
	.delay(1000)
	.attr("opacity",function(d){
	if(d.year==2015){
	return 1;
	} else {
	return 0;
	}
	});

	//Map Key
	keysquares.transition()
	.duration(1500)
	.delay(1000)
	.attr("opacity",1);

	keytext.transition()
	.duration(1500)
	.delay(1000)
	.attr("opacity",1);

	//bar plot
	totalbars.transition()
	.duration(1500)
	.delay(function(d,i){
	return 1000 +30*i;
	})
	.attr("y", function(d) {
	return yScale(d.density);
	})
	.attr("height", function(d){
	return h - bottompadding - yScale(d.density);
	})
	.attr("opacity",1);

	//barplot title
	figuretitle.transition()
	.duration(1500)
	.delay(1000)
	.attr("opacity",1);

	//y axis label
	ylabel.transition()
	.duration(1500)
	.delay(1000)
	.attr("opacity",1);

	//y axis
	yAx.transition()
	.duration(1500)
	.delay(1000)
	.attr("opacity",1);

	//x axis
	xAx.transition()
	.duration(1500)
	.delay(1000)
	.attr("opacity",1);

	}); // end json
	}); //end csv
	}); // end csv

	</script>
	</body>
	</html>
region	totalsheep	density	year
Northland	522189	42	2002
Northland	530059	42	2003
Northland	494357	40	2004
Northland	556734	45	2005
Northland	525830	42	2006
Northland	534452	43	2007
Northland	504286	40	2008
Northland	429401	34	2009
Northland	430740	34	2010
Northland	400480	32	2011
Northland	440955	35	2012
Northland	427281	34	2013
Northland	331251	27	2014
Northland	381256	31	2015
Auckland	368217	75	2002
Auckland	361345	73	2003
Auckland	325188	66	2004
Auckland	318201	64	2005
Auckland	293760	59	2006
Auckland	287589	58	2007
Auckland	264979	54	2008
Auckland	257248	52	2009
Auckland	235414	48	2010
Auckland	219952	45	2011
Auckland	205270	42	2012
Auckland	212437	43	2013
Auckland	215932	44	2014
Auckland	240830	49	2015
Waikato	2592399	108	2002
Waikato	2409128	101	2003
Waikato	2457368	103	2004
Waikato	2555163	107	2005
Waikato	2706984	113	2006
Waikato	2660145	111	2007
Waikato	2168673	91	2008
Waikato	2101906	88	2009
Waikato	1982414	83	2010
Waikato	1838297	77	2011
Waikato	1776544	74	2012
Waikato	1926059	81	2013
Waikato	1699244	71	2014
Waikato	1646010	69	2015
Bay of Plenty	415379	34	2002
Bay of Plenty	355785	29	2003
Bay of Plenty	409095	34	2004
Bay of Plenty	356859	30	2005
Bay of Plenty	382419	32	2006
Bay of Plenty	385373	32	2007
Bay of Plenty	346445	29	2008
Bay of Plenty	331049	27	2009
Bay of Plenty	347973	29	2010
Bay of Plenty	284954	24	2011
Bay of Plenty	322882	27	2012
Bay of Plenty	312593	26	2013
Bay of Plenty	250299	21	2014
Bay of Plenty	302986	25	2015
Gisborne	1679377	200	2002
Gisborne	1869777	223	2003
Gisborne	1847723	220	2004
Gisborne	1717266	205	2005
Gisborne	1833833	219	2006
Gisborne	1825496	218	2007
Gisborne	1679670	200	2008
Gisborne	1548344	185	2009
Gisborne	1589785	190	2010
Gisborne	1517015	181	2011
Gisborne	1547294	185	2012
Gisborne	1503378	179	2013
Gisborne	1602270	191	2014
Gisborne	1472423	176	2015
Hawke's Bay	3788684	268	2002
Hawke's Bay	3922729	277	2003
Hawke's Bay	4305819	305	2004
Hawke's Bay	4070230	288	2005
Hawke's Bay	4226620	299	2006
Hawke's Bay	3624018	256	2007
Hawke's Bay	3690843	261	2008
Hawke's Bay	3445616	244	2009
Hawke's Bay	3429382	243	2010
Hawke's Bay	3266872	231	2011
Hawke's Bay	3262468	231	2012
Hawke's Bay	2996560	212	2013
Hawke's Bay	2872852	203	2014
Hawke's Bay	3028852	214	2015
Taranaki	697637	96	2002
Taranaki	664627	92	2003
Taranaki	687435	95	2004
Taranaki	678700	94	2005
Taranaki	688273	95	2006
Taranaki	656144	90	2007
Taranaki	637400	88	2008
Taranaki	537850	74	2009
Taranaki	583467	80	2010
Taranaki	556982	77	2011
Taranaki	434402	60	2012
Taranaki	537355	74	2013
Taranaki	502255	69	2014
Taranaki	499840	69	2015
Manawatu-Wanganui	6563838	295	2002
Manawatu-Wanganui	6516684	293	2003
Manawatu-Wanganui	6263729	282	2004
Manawatu-Wanganui	6738633	303	2005
Manawatu-Wanganui	6870265	309	2006
Manawatu-Wanganui	6746989	304	2007
Manawatu-Wanganui	5916784	266	2008
Manawatu-Wanganui	5767131	260	2009
Manawatu-Wanganui	5796023	261	2010
Manawatu-Wanganui	5730947	258	2011
Manawatu-Wanganui	5612743	253	2012
Manawatu-Wanganui	5469819	246	2013
Manawatu-Wanganui	5328843	240	2014
Manawatu-Wanganui	5518950	248	2015
Wellington	1812531	225	2002
Wellington	1779872	221	2003
Wellington	1943427	241	2004
Wellington	2038979	253	2005
Wellington	2012471	250	2006
Wellington	1822057	226	2007
Wellington	1779247	221	2008
Wellington	1659327	206	2009
Wellington	1633879	203	2010
Wellington	1645127	204	2011
Wellington	1664892	207	2012
Wellington	1572985	195	2013
Wellington	1559548	194	2014
Wellington	1420470	176	2015
West Coast	92508	4	2002
West Coast	83978	4	2003
West Coast	81941	4	2004
West Coast	74988	3	2005
West Coast	78067	3	2006
West Coast	54094	2	2007
West Coast	43156	2	2008
West Coast	42889	2	2009
West Coast	41523	2	2010
West Coast	34778	1	2011
West Coast	58085	2	2012
West Coast	32876	1	2013
West Coast	58642	3	2014
West Coast	24679	1	2015
Canterbury	7758336	174	2002
Canterbury	7969929	179	2003
Canterbury	7499728	169	2004
Canterbury	7602271	171	2005
Canterbury	7463075	168	2006
Canterbury	7166822	161	2007
Canterbury	6063300	136	2008
Canterbury	5504718	124	2009
Canterbury	5652101	127	2010
Canterbury	5569215	125	2011
Canterbury	5348010	120	2012
Canterbury	5222094	117	2013
Canterbury	4966905	112	2014
Canterbury	4501137	101	2015
Otago	6120918	196	2002
Otago	5945247	190	2003
Otago	5901789	189	2004
Otago	6185038	198	2005
Otago	5998440	192	2006
Otago	6031166	193	2007
Otago	5343380	171	2008
Otago	5281730	169	2009
Otago	5323860	171	2010
Otago	5203236	167	2011
Otago	5342846	171	2012
Otago	5325322	171	2013
Otago	5257716	168	2014
Otago	5120190	164	2015
Southland	5950657	191	2002
Southland	5855296	188	2003
Southland	5966919	191	2004
Southland	5950627	191	2005
Southland	5928761	190	2006
Southland	5662387	182	2007
Southland	4739003	152	2008
Southland	4556206	146	2009
Southland	4597335	147	2010
Southland	4112930	132	2011
Southland	4356427	140	2012
Southland	4390785	141	2013
Southland	4299214	138	2014
Southland	4072964	131	2015
Marlborough	785115	75	2002
Marlborough	741038	71	2003
Marlborough	675284	65	2004
Marlborough	638031	61	2005
Marlborough	648601	62	2006
Marlborough	578805	55	2007
Marlborough	517526	49	2008
Marlborough	516391	49	2009
Marlborough	522176	50	2010
Marlborough	425299	41	2011
Marlborough	547180	52	2012
Marlborough	518372	50	2013
Marlborough	544578	52	2014
Marlborough	453191	43	2015
Tasman-Nelson	367329	37	2002
Tasman-Nelson	417231	42	2003
Tasman-Nelson	356551	36	2004
Tasman-Nelson	343012	34	2005
Tasman-Nelson	335931	33	2006
Tasman-Nelson	356124	35	2007
Tasman-Nelson	346799	35	2008
Tasman-Nelson	332443	33	2009
Tasman-Nelson	329273	33	2010
Tasman-Nelson	263383	26	2011
Tasman-Nelson	283343	28	2012
Tasman-Nelson	271890	27	2013
Tasman-Nelson	251619	25	2014
Tasman-Nelson	363288	36	2015