Exercise 4 for Data Visualization and Infographics with D3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<link href='https://fonts.googleapis.com/css?family=Raleway:400,300' rel='stylesheet' type='text/css'>
		<style type="text/css">
			body {
				background-color: whitesmoke;
				font-family: 'Raleway', Helvetica, sans-serif;
				font-weight: 300;
			}
			h1 {
				font-weight: 400;
				line-height: 1.5em;
				border-bottom: 1px solid gray;
			}
			svg {
				background-color: mistyrose;
				width: 75%;
			}
			rect:hover {
				fill: rebeccapurple;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			.axis text {
				font-size: 11px;
			}
			.y.axis path,
			.y.axis line {
				opacity: 0;
			}
			.y.axis text {
				-moz-transform: rotate(-25deg) translate(0, -0.5em);-ms-transform: rotate(-25deg) translate(0, -0.5em);-o-transform: rotate(-25deg) translate(0, -0.5em);-webkit-transform: rotate(-25deg) translate(0, -0.5em);transform: rotate(-25deg) translate(0, -0.5em);
				-moz-transform-origin: top right;-ms-transform-origin: top right;-o-transform-origin: top right;-webkit-transform-origin: top right;transform-origin: top right;
			}

</style>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
	</head>
	<body>

<h1>California Counties Ranked By Diabetes Rate</h1>
		<p>Hover over a bar to see the diabetes rate for that county!</p>

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

var xVal, yVal, rects;

// Define columns in CSV associated with x- and y- axes
				xVal = "Diabetes Value";
				yVal = "County";

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

// Define domain for wScale
				wScale.domain([ 0, d3.max(data, function(d){
					return +d[xVal];
				}) ]);
				// Define domain for hScale
				hScale.domain(data.map(function(d) {
					return d[yVal];
				}));

// Bind data to rectangles in the SVG element
				// svg1.selectAll("rect")
				// 	.data(data)
				// 	.enter()
				// 	.append("rect");
				rects = bindData(svg1, data, "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"];});
				makeBarChart(rects, xVal, yVal);

// Add x- and y- axes to container
				addXAxis(svg1);
				addYAxis(svg1);

});

function sortUp(data, s) {
				data.sort(function(a, b) {
					return d3.ascending( a[s], b[s] );
				});
			}

function bindData(container, dataset, shape) {
				return container.selectAll(shape)
					.data(dataset)
					.enter()
					.append(shape);
			}

function addXAxis(container) {
				container.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);
			}

function addYAxis(container) {
				container.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);
			}

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js