jadiehm · April 12, 2017 15:11
diff --git a/index.html b/index.html
 <!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>

 <body>
 	<main>
 		<div class='gia-chart-wrapper'>
 			<h3>1999</h3>
 			<div class='gia-chart'></div>

 			<div class='key'>
 				<div class='keyblock zero'></div>
 				<div class='keyblock one'></div>
 				<div class='keyblock twenty'></div>
 				<div class='keyblock hundred'></div>
 				<div class='keyblock thousand'></div>
 				<div class='keyblock last'></div>
 			</div>

 			<div class='key end'>
 				<div class='keyblock text'><p>0</p></div>
 				<div class='keyblock text'><p>1-20</p></div>
 				<div class='keyblock text'><p>20-100</p></div>
 				<div class='keyblock text'><p>100-1,000</p></div>
 				<div class='keyblock text'><p>1,000-15,000</p></div>
 				<div class='keyblock text'><p>> 15,000</p></div>
 			</div>
 		</div>
 	</main>

 	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
 	<script>
 		//Sets dimensions
 		var margin = {top: 0, left: 5, bottom: 0, right: 5},
 		  	width = d3.select(".gia-chart").node().clientWidth,
 		  	width = width - margin.left - margin.right,
 		  	mapRatio = .65,
 		  	height = width * mapRatio;

 		//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>
diff --git a/outline.json b/outline.json
diff --git a/states.csv b/states.csv
diff --git a/usmap.json b/usmap.json
	<!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>

	<body>
	<main>
	<div class='gia-chart-wrapper'>
	<h3>1999</h3>
	<div class='gia-chart'></div>

	<div class='key'>
	<div class='keyblock zero'></div>
	<div class='keyblock one'></div>
	<div class='keyblock twenty'></div>
	<div class='keyblock hundred'></div>
	<div class='keyblock thousand'></div>
	<div class='keyblock last'></div>
	</div>

	<div class='key end'>
	<div class='keyblock text'><p>0</p></div>
	<div class='keyblock text'><p>1-20</p></div>
	<div class='keyblock text'><p>20-100</p></div>
	<div class='keyblock text'><p>100-1,000</p></div>
	<div class='keyblock text'><p>1,000-15,000</p></div>
	<div class='keyblock text'><p>> 15,000</p></div>
	</div>
	</div>
	</main>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script>
	//Sets dimensions
	var margin = {top: 0, left: 5, bottom: 0, right: 5},
	width = d3.select(".gia-chart").node().clientWidth,
	width = width - margin.left - margin.right,
	mapRatio = .65,
	height = width * mapRatio;

	//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>
state	abbrev	FIPS	mw1999	mw2000	mw2001	mw2002	mw2003	mw2004	mw2005	mw2006	mw2007	mw2008	mw2009	mw2010	mw2011	mw2012	mw2013	mw2014	mw2015	mw2016
Alabama	AL	1	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
Alaska	AK	2	0.7	0.8	0.8	0.9	0.9	1.2	1.5	1.7	1.7	3.7	8.5	8.7	11.0	59.0	62.0	62.0	62.0	62.0
Arizona	AZ	4	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	63.0	128.1	139.0	238.0	238.0	238.0	268.0	268.0
Arkansas	AR	5	0.0	0.0	0.0	0.0	0.1	0.1	0.1	0.1	0.1	0.1	0.1	0.1	0.1	0.0	0.0	0.0	0.0	0.0
California	CA	6	1616.0	1616.0	1683.1	1823.1	2024.9	2095.0	2149.5	2376.1	2439.1	2536.7	2798.0	3252.6	3917.0	5542.0	5830.0	5917.0	6108.0	5662.0
Colorado	CO	8	21.6	21.6	61.2	61.2	223.2	230.7	230.8	290.8	1066.8	1067.7	1244.3	1298.6	1805.0	2301.0	2332.0	2593.0	2992.0	2965.0
Connecticut	CT	9	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	5.0	5.0
Delaware	DE	10	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	2.0	2.0	2.0	2.0	2.0	2.0	2.0
Florida	FL	12	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
Georgia	GA	13	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
Hawaii	HI	15	1.6	1.6	1.6	8.6	8.6	8.6	8.6	42.1	63.1	63.1	63.1	63.1	92.0	206.0	206.0	206.0	203.0	203.0
Idaho	ID	16	0.0	0.0	0.0	0.0	0.2	0.2	75.2	75.3	75.3	75.6	146.8	352.5	618.0	973.0	973.0	973.0	973.0	973.0
Illinois	IL	17	0.0	0.0	0.0	0.0	50.4	51.1	107.2	107.2	699.4	915.1	1547.5	2044.6	2742.0	3568.0	3568.0	3568.0	3842.0	3842.0
Indiana	IN	18	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	130.5	1036.0	1339.2	1340.0	1543.0	1544.0	1745.0	1895.0	1895.0
Iowa	IA	19	242.4	242.4	324.2	422.7	471.8	634.0	836.3	932.2	1272.9	2791.2	3603.9	3674.9	4322.0	5133.0	5178.0	5688.0	6212.0	6365.0
Kansas	KS	20	1.5	1.5	113.7	113.7	113.7	113.7	263.7	364.2	364.2	921.0	1021.0	1074.0	1274.0	2713.0	2967.0	2967.0	3766.0	3836.0
Kentucky	KY	21	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
Louisiana	LA	22	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
Maine	ME	23	0.1	0.1	0.1	0.1	0.1	0.1	0.1	9.1	42.1	46.6	174.7	266.2	397.0	431.0	431.0	440.0	613.0	656.0
Maryland	MD	24	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	70.0	120.0	120.0	120.0	160.0	190.0	190.0
Massachusetts	MA	25	0.3	0.3	1.0	1.0	1.0	1.0	1.1	3.5	5.0	5.7	15.0	17.7	47.0	103.0	106.0	107.0	107.0	115.0
Michigan	MI	26	0.6	0.6	2.4	2.4	2.4	2.4	2.6	2.6	2.6	144.4	138.5	164.4	377.0	988.0	1163.0	1531.0	1531.0	1531.0
Minnesota	MN	27	273.4	291.2	319.8	337.7	558.3	600.1	745.4	895.9	1299.8	1752.8	1810.0	2205.4	2718.0	2987.0	2987.0	3035.0	3235.0	3435.0
Mississippi	MS	28	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
Missouri	MO	29	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	61.7	162.5	308.5	457.0	459.0	458.0	459.0	459.0	459.0	459.0
Montana	MT	30	0.1	0.1	0.1	0.4	1.1	1.1	136.9	145.9	152.9	271.5	375.0	385.5	386.0	645.0	645.0	665.0	665.0	665.0
Nebraska	NE	31	2.8	2.8	2.8	14.0	14.0	14.0	73.4	73.4	71.9	116.9	152.9	212.9	337.0	459.0	534.0	812.0	890.0	926.0
Nevada	NV	32	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	152.0	152.0	152.0	152.0	152.0
New Hampshire	NH	33	0.1	0.1	0.1	0.1	0.1	0.1	0.1	1.1	1.1	25.1	25.2	25.5	26.0	171.0	171.0	171.0	185.0	185.0
New Jersey	NJ	34	0.0	0.0	0.0	0.0	0.0	0.0	7.5	7.5	7.5	7.5	7.6	7.6	8.0	9.0	9.0	9.0	9.0	9.0
New Mexico	NM	35	0.7	0.7	0.7	0.7	206.0	266.0	406.0	496.0	496.0	497.5	597.5	699.9	750.0	778.0	778.0	812.0	1080.0	1112.0
New York	NY	36	0.0	18.2	48.2	48.5	48.5	48.5	185.5	370.3	424.8	831.8	1274.3	1274.3	1403.0	1638.0	1722.0	1748.0	1749.0	1749.0
North Carolina	NC	37	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
North Dakota	ND	38	0.4	0.4	0.4	4.8	66.3	66.3	97.8	178.3	344.8	714.5	1202.6	1423.6	1445.0	1680.0	1681.0	1886.0	2143.0	2143.0
Ohio	OH	39	0.0	0.0	0.0	0.0	3.6	7.2	7.2	7.4	7.4	7.4	7.4	9.6	112.0	428.0	428.0	435.0	443.0	444.0
Oklahoma	OK	40	0.0	0.0	0.0	0.0	176.3	176.3	474.5	534.5	689.0	708.1	1031.2	1481.8	2007.0	3134.0	3134.0	3782.0	5184.0	5453.0
Oregon	OR	41	25.1	25.1	156.8	218.3	259.3	262.6	337.6	438.1	885.4	1067.2	1758.1	2103.6	2513.0	3153.0	3153.0	3153.0	3153.0	3163.0
Pennsylvania	PA	42	0.1	10.5	34.5	34.5	129.0	129.0	129.0	179.0	293.5	360.7	748.2	748.2	789.0	1340.0	1340.0	1340.0	1340.0	1340.0
Rhode Island	RI	44	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.7	0.7	0.7	2.4	2.4	2.0	9.0	9.0	9.0	9.0	21.0
South Carolina	SC	45	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
South Dakota	SD	46	0.0	0.0	2.6	3.0	44.3	44.3	44.3	44.3	98.3	186.8	313.2	709.2	784.0	783.0	783.0	803.0	977.0	977.0
Tennessee	TN	47	0.0	2.0	2.0	2.0	2.0	29.0	29.0	29.0	29.0	29.0	29.0	29.0	29.0	29.0	29.0	29.0	29.0	29.0
Texas	TX	48	183.5	183.5	1095.8	1095.8	1290.3	1290.3	1992.1	2735.8	4353.4	7112.7	9403.4	10089.4	10394.0	12214.0	12355.0	14098.0	17713.0	18531.0
Utah	UT	49	0.0	0.2	0.2	0.2	0.2	0.2	0.9	0.9	0.9	19.8	223.3	223.3	325.0	325.0	325.0	325.0	327.0	391.0
Vermont	VT	50	6.1	6.1	6.1	6.1	6.1	6.1	6.1	6.1	6.1	6.1	6.2	6.2	46.0	119.0	119.0	119.0	119.0	119.0
Virginia	VA	51	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0	0.0
Washington	WA	53	0.0	0.0	180.2	228.3	243.9	240.6	390.0	818.1	1163.2	1375.0	1848.9	2104.4	2573.0	2808.0	2808.0	3075.0	3075.0	3075.0
West Virginia	WV	54	0.0	0.0	0.0	66.0	66.0	66.0	66.0	66.0	146.0	330.0	330.0	430.5	564.0	583.0	583.0	583.0	583.0	583.0
Wisconsin	WI	55	23.0	23.0	53.0	53.0	53.0	53.0	53.0	53.0	53.0	449.0	449.1	468.9	631.0	648.0	648.0	648.0	648.0	648.0
Wyoming	WY	56	72.5	90.6	140.6	140.6	284.6	284.6	288.5	288.5	288.5	676.3	1099.3	1412.3	1412.0	1410.0	1410.0	1410.0	1410.0	1410.0