csessig86 · April 4, 2015 19:39
diff --git a/ia_free_reduced_50_higher.csv b/ia_free_reduced_50_higher.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Simple SVG and loading data with D3</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 	</head>

 	<style>
 		html, body {
 			font-family: Helvetica;
 		}

 		svg {
 			margin-bottom: 20px;
 		}

 		svg rect {
 			fill: #72bcd4;
 		}
 	</style>
 	<body>
 		<h3>Free and reduced lunch in Iowa</h3>
 		<p>This graph shows all the schools in Iowa where 50% or more of their students are on a free or reduced lunch program. A total of 64 school districts are shown.</p>
 		<svg></svg>
 		<script type="text/javascript">		
 			// Create empty SVG so we can append data to it later
 			var svg = d3.select("svg")
 				.attr("width", 500)
 				.attr("height", 850);

 			// Load CSV data
 			d3.csv("ia_free_reduced_50_higher.csv", function(data) {
 				// Sort desc
 				// data.sort(function(a, b) {
 				// 	return d3.descending( a['FreeOrReducedPercent'], b['FreeOrReducedPercent'] );
 				// });

 				// Create rectangles and append to DOM
 				var rects = svg.selectAll("rect")
 					.data(data)
 					.enter()
 					.append("rect");

 				// Set attributes
 				rects.attr("x", 0)
 					.attr("y", function(d, num) {
 						return num * 14;
 					})
 					.attr("width", function(d) {
 						return d['FreeOrReducedPercent'] * 2;
 					})
 					.attr("height", 12)
 					.append("title")
 					// Tooltip
 					.text(function(d) {
 						return 'The percentage of students on free or reduced lunch at ' + d['Name'] + 'High School is ' + d['FreeOrReducedPercent'] + '%.';
 					});
 			});
 		</script>
 	</body>
 </html>
District	Name	Enrollment	FreeLunch	ReducedLunch	FreeorReduced	FreeorReducedPrice	FreeOrReducedPercent
5310	Postville	656	654	0	654	99.7	99.7
5184	Perry	1746	1104	222	1326	75.95	75.9
6219	Storm Lake	2306	1453	253	1706	73.98	74
6516	Twin Rivers	50	30	7	37	74	74
1368	Columbus	739	487	59	546	73.88	73.9
1737	Des Moines Independent	31356	19796	3163	22959	73.22	73.2
1701	Denison	2126	1273	255	1528	71.87	71.9
4104	Marshalltown	4852	2932	456	3388	69.83	69.8
6795	Waterloo	10662	6498	914	7412	69.52	69.5
5328	Prescott	38	22	4	26	68.42	68.4
4905	Olin Consolidated	83	52	4	56	67.47	67.5
3897	LuVerne	73	39	10	49	67.12	67.1
6039	Sioux City	13862	7804	1378	9182	66.24	66.2
3537	Laurens-Marathon	270	163	13	176	65.19	65.2
1093	Central Decatur	698	339	109	448	64.18	64.2
2313	Fort Dodge	3680	1951	406	2357	64.05	64
7002	Whiting	193	92	30	122	63.21	63.2
916	CAL	220	117	21	138	62.73	62.7
3312	Keokuk	1844	953	185	1138	61.71	61.7
1944	Eagle Grove	823	421	85	506	61.48	61.5
882	Burlington	4001	2225	217	2442	61.03	61
6097	South Page	127	70	7	77	60.63	60.6
6990	West Sioux	740	360	88	448	60.54	60.5
2493	Gilmore City-Bradgate	42	18	7	25	59.52	59.5
6098	South Tama County	1423	693	150	843	59.24	59.2
6975	West Liberty	1179	560	138	698	59.2	59.2
4505	Mormon Trail	215	107	20	127	59.07	59.1
1211	Clarke	1330	622	161	783	58.87	58.9
5463	Red Oak	1088	543	94	637	58.55	58.5
2834	Harmony	256	107	42	149	58.2	58.2
2772	Hamburg	207	107	13	120	57.97	58
977	Cardinal	627	306	56	362	57.74	57.7
4869	Oelwein	1209	562	127	689	56.99	57
1278	Clinton	3465	1724	246	1970	56.85	56.9
4778	North Kossuth	261	112	36	148	56.7	56.7
2322	Fort Madison	2028	955	169	1124	55.42	55.4
1503	Creston	1441	650	143	793	55.03	55
4131	Mason City	3761	1680	390	2070	55.04	55
4978	Orient-Macksburg	166	77	14	91	54.82	54.8
5049	Ottumwa	4332	2049	302	2351	54.27	54.3
2781	Hampton-Dumont	1186	545	94	639	53.88	53.9
72	Albert City-Truesdale	99	36	17	53	53.54	53.5
1611	Davenport	15269	7520	619	8139	53.3	53.3
6651	Villisca	280	115	33	148	52.86	52.9
5895	Seymour	250	104	28	132	52.8	52.8
1107	Chariton	1337	635	70	705	52.73	52.7
4033	Maple Valley-Anthon Oto	614	238	85	323	52.61	52.6
4644	Newell-Fonda	463	190	53	243	52.48	52.5
3609	Lenox	471	196	50	246	52.23	52.2
4491	Moravia	378	151	46	197	52.12	52.1
3465	Lamoni	322	134	33	167	51.86	51.9
594	Belmond-Klemme	716	334	37	371	51.82	51.8
1449	Corwith-Wesley	58	26	4	30	51.72	51.7
4572	Murray	322	130	36	166	51.55	51.6
4041	Maquoketa	1391	610	105	715	51.4	51.4
4581	Muscatine	5184	2308	353	2661	51.33	51.3
4725	Newton	2838	1230	224	1454	51.23	51.2
1476	Council Bluffs	8582	3895	466	4361	50.82	50.8
135	Allamakee	1116	329	237	566	50.72	50.7
1413	Coon Rapids-Bayard	379	137	55	192	50.66	50.7
387	Atlantic	1499	600	155	755	50.37	50.4
6854	Wayne	518	199	61	260	50.19	50.2
1053	Cedar Rapids	15884	6894	1055	7949	50.04	50
6462	Tri-County	234	88	29	117	50	50
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Simple SVG and loading data with D3</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	</head>

	<style>
	html, body {
	font-family: Helvetica;
	}

	svg {
	margin-bottom: 20px;
	}

	svg rect {
	fill: #72bcd4;
	}
	</style>
	<body>
	<h3>Free and reduced lunch in Iowa</h3>
	<p>This graph shows all the schools in Iowa where 50% or more of their students are on a free or reduced lunch program. A total of 64 school districts are shown.</p>
	<svg></svg>
	<script type="text/javascript">
	// Create empty SVG so we can append data to it later
	var svg = d3.select("svg")
	.attr("width", 500)
	.attr("height", 850);

	// Load CSV data
	d3.csv("ia_free_reduced_50_higher.csv", function(data) {
	// Sort desc
	// data.sort(function(a, b) {
	// return d3.descending( a['FreeOrReducedPercent'], b['FreeOrReducedPercent'] );
	// });

	// Create rectangles and append to DOM
	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	// Set attributes
	rects.attr("x", 0)
	.attr("y", function(d, num) {
	return num * 14;
	})
	.attr("width", function(d) {
	return d['FreeOrReducedPercent'] * 2;
	})
	.attr("height", 12)
	.append("title")
	// Tooltip
	.text(function(d) {
	return 'The percentage of students on free or reduced lunch at ' + d['Name'] + 'High School is ' + d['FreeOrReducedPercent'] + '%.';
	});
	});
	</script>
	</body>
	</html>