Yearly animated cycle map

<!doctype html>
<html lang='en-GB'>
<head></head>
<style>
	p {
		font-family: sans-serif;
		font-size: 14px;
	}
	h3 {
		font-family: sans-serif;
		font-size: 18px;
	}
	/*template styles*/
	.gia-chart-wrapper {
		max-width: 620px;
		margin: 0 auto;
	}
	.key {
		width: 100%;
	}
	.keyblock {
		width: 16.66%;
		height: 20px;
		float: left;
	}
	.keyblock p {
		margin: 0;
		font-size: 13px;
		text-align: center;
	}
	.keyblock.text {
		margin-bottom: 20px;
	}
	.zero {
		background-color: #f6f6f6;
	}
	.one {
		background-color: #e0f4f9;
	}
	.twenty {
		background-color: #c2e9f2;
	}
	.hundred {
		background-color: #a0ddec;
	}
	.thousand {
		background-color: #7bd2e5;
	}
	.last {
		background-color: #4bc6df;
	}
	/*map styles */
	.states {
	 	fill: #e2e2e2;
	  	stroke: #ffffff;
	  	stroke-linejoin: round;
	}
</style>

//Tells the map what projection to use
		var projection = d3.geo.albersUsa()
		  	.scale(width *1.25)
		  	.translate([width / 2, height / 2]);

//Tells the map how to draw the paths from the projection
		var path = d3.geo.path()
		  	.projection(projection);

//Sets the color scale
		var color_domain = [1, 20, 100, 1000, 15000, 20000];
		var ext_color_domain = [0, 1, 20, 100, 1000, 15000, 20000]; 
		var color = d3.scale.threshold()

.domain(color_domain)
		.range(['#f6f6f6','#e0f4f9','#c2e9f2','#a0ddec','#7bd2e5','#4bc6df']);

//Appened svg to page
		var map = d3.select(".gia-chart").append("svg")
		  	.style('height', height + 'px')
		  	.style('width', width + 'px');

//Load the files
		queue()
		  	.defer(d3.json, "usmap.json")
		  	.defer(d3.csv, "states.csv")
		  	.await(ready);

function ready(error, us, maptemplate) {
		  	if (error) throw error;  
		 
			//Pair data with state id
			var dataByFIPS = {};
			maptemplate.forEach(function(d) { dataByFIPS[d.FIPS] = d.mw1999; });

//Pair state name with state id
			var stateByFIPS = {};
			maptemplate.forEach(function(d) { stateByFIPS[d.FIPS] = d.state; });

//Append states
			map.append("g")
			   .attr("class", "states")
			   .selectAll("path")
			   .data(topojson.feature(us, us.objects.states).features)
			   .enter().append("path")
			   .attr("d", path)
			   .style("fill", function(d) { return color (dataByFIPS[d.id]); });

//RESPONSIVENESS
			d3.select(window).on('resize', resize);

function resize() {

var w = d3.select(".gia-chart").node().clientWidth;

//Adjust things when the window size changes
			    width = w - margin.left - margin.right;
			    height = width * mapRatio;
			    
			    //Update projection
			    var newProjection = d3.geo.albersUsa()
			    	.scale(width*1.25)
			      	.translate([width / 2, height / 2]);

//Update path
			    path = d3.geo.path()
			      	.projection(newProjection);

//Resize the map container
			    map
			      	.style('width', width + 'px')
			      	.style('height', height + 'px');

//Resize the map
			    map.selectAll("path").attr('d', path); 
			}

//JS to create an interval (function, milliseconds)
			setInterval(updateMap, 1000);

//Sets current year to the one before the one needed
			var currVal = 1998;

//Increments the years by 1
			function updateMap () {
				currVal += 1;
			    
			    //If the current value is last value, start over
			    if ( currVal > 2016 ) {
			    	currVal = 1999
			    }

//Update data to current year
			    maptemplate.forEach(function(d) { dataByFIPS[d.FIPS] = d['mw'+currVal]; });

//Change fill color
			    map
			    	.selectAll("path")
			      	.style("fill", function(d) { return color (dataByFIPS[d.id]); });

d3.select('h3')
			      	.text(currVal);

return;
			}
		}
	</script>
</body>
</html>

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

https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js