Exercise 3 for Data Visualization and Infographics with D3 by nydame

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<style type="text/css">
			body {
				background-color: whitesmoke;
			}
			svg {
				background-color: mistyrose;
			}
		</style>
		<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
	</head>
	<body>

		<h1>California Counties Ranked By Diabetes Rate</h1>
		<p>Hover over a bar to see which county it represents!</p>

		<svg width="600" height="600">
			<line x1="10" y1="5" x2="10" y2="590" stroke="gray" stroke-width="3" />
		</svg>

		<script type="text/javascript">		

			//Load in contents of CSV file and create a bar graph
			d3.csv("CA-diabetes-data.csv", function(data) {

				var svg1 = d3.select("svg");

				// Sort the data in order of ascending Diabetes Value (DV)
				data.sort(function(a, b) {
					return d3.ascending(a["Diabetes Value"], b["Diabetes Value"]);
				});

				// Bind data to rectangles in the SVG element
				svg1.selectAll("rect")
					.data(data)
					.enter()
					.append("rect");

				// Give rectangles width proportional to DV
				// and position along y axis determined by index
				svg1.selectAll("rect")
					.attr("x", 15)
					.attr("y", function(d, i) {
						return (i * 10) + 5;
					})
					.attr("width", function(d) {
						return parseInt(d["Diabetes Value"] * 4000);
					})
					.attr("height", 8)
					.attr("fill", "gray")
					.append("title")
					.text(function(d) {return d["County"];});

			});


		</script>

	</body>
</html>

CA-diabetes-data.csv

County,Premature death Value,Adult obesity Value,Diabetes Value,Premature age-adjusted mortality Value,Median household income Value
California,5570,0.232,0.079,287.4,58322
Alameda County,5141,0.207,0.078,267.1,70209
Amador County,7504,0.23,0.098,350.3,51388
Butte County,7944,0.243,0.081,403.8,40748
Calaveras County,6938,0.258,0.091,323.2,50962
Colusa County,5945,0.226,0.078,299.8,49871
Contra Costa County,5257,0.237,0.076,263,74208
Del Norte County,9671,0.255,0.088,455.4,37305
El Dorado County,5170,0.203,0.081,259.9,68446
Fresno County,7010,0.294,0.09,351.9,41563
Glenn County,6819,0.268,0.078,353,41201
Humboldt County,8293,0.265,0.084,407.3,39837
Imperial County,5672,0.235,0.074,291.7,38185
Inyo County,7070,0.238,0.093,339.1,45748
Kern County,7631,0.278,0.078,394.4,45599
Kings County,6372,0.242,0.075,349.1,45464
Lake County,9804,0.267,0.1,479.7,35437
Lassen County,6849,0.256,0.075,383.3,47480
Los Angeles County,5464,0.213,0.077,281.4,52929
Madera County,6694,0.297,0.091,333.4,42054
Marin County,3782,0.154,0.055,189.2,88654
Mariposa County,7309,0.238,0.094,349.6,43166
Mendocino County,7975,0.248,0.077,380.1,41088
Merced County,6726,0.313,0.08,342.7,42552
Modoc County,9030,0.251,0.088,402.7,36724
Mono County,3891,0.208,0.066,166.8,53067
Monterey County,5216,0.228,0.069,253,56038
Napa County,5309,0.236,0.072,266.6,65698
Nevada County,5604,0.185,0.072,260,54230
Orange County,4396,0.204,0.074,230,71866
Placer County,4802,0.228,0.072,252.7,69521
Plumas County,7082,0.23,0.093,335.4,46450
Riverside County,5960,0.27,0.095,309.9,52416
Sacramento County,6447,0.277,0.092,337.3,52617
San Benito County,4955,0.243,0.074,267.7,60577
San Bernardino County,6760,0.282,0.085,356.9,50603
San Diego County,5143,0.231,0.075,270.9,60235
San Francisco County,5244,0.16,0.069,270.6,72093
San Joaquin County,7088,0.31,0.095,362.7,50431
San Luis Obispo County,5229,0.2,0.067,265.7,58427
San Mateo County,4135,0.2,0.072,218.3,81568
Santa Barbara County,5245,0.192,0.066,263.5,60683
Santa Clara County,3988,0.21,0.076,215.6,91195
Santa Cruz County,5109,0.201,0.06,257.6,65799
Shasta County,8358,0.28,0.09,419.6,44477
Sierra County,7607,0.234,0.095,374,45157
Siskiyou County,8516,0.233,0.088,389.3,36597
Solano County,6389,0.271,0.104,326.1,61976
Sonoma County,5233,0.225,0.066,273,59855
Stanislaus County,6810,0.308,0.083,359.3,46324
Sutter County,6862,0.259,0.084,348.5,46524
Tehama County,7902,0.26,0.089,378.2,38577
Trinity County,8555,0.251,0.095,410,35162
Tulare County,7367,0.295,0.074,372.1,40197
Tuolumne County,6682,0.227,0.079,321.8,46624
Ventura County,5058,0.219,0.071,253.4,71043
Yolo County,4891,0.229,0.07,275,51040
Yuba County,7940,0.305,0.077,433.5,41599