Exercise 5 for Data Visualizations and Infographics with D3

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Scatter Plot</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%;
			}
			circle: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: 1;
			}
			/*.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>Relationship between Obesity and Diabetes Rates in California Counties</h1>
		<p>Hover over a dot for more information!</p>

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

var xVal, xVal2, yVal, circles;

// Define columns in CSV associated with x- and y- axes
				xVal = "Diabetes Value";
				xVal2 = "Adult obesity Value";
				// xVal2 = "Median household income 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 xScale
				xScale.domain([ d3.round(d3.min(data, function(d) {
									return d[xVal]
								}) * 0.9, 2), d3.max(data, function(d){
					return d[xVal];
				}) ]);
				// Define domain for yScale
				yScale.domain([ d3.max(data, function(d) {
					return d[xVal2];
				}), d3.round(d3.min(data, function(d) {
					return d[xVal2];
				}) * 0.9, 2) ]);

// Bind data to rectangles in the SVG element
				// svg1.selectAll("rect")
				// 	.data(data)
				// 	.enter()
				// 	.append("rect");
				circles = bindData(svg1, data, "circle");

// 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);
				makeScatterPlot(circles, xVal, xVal2);
				circles.append("title").text(function(d) {return d[yVal] + " has a diabetes rate of " + d[xVal] + " and an obesity rate of " + d[xVal2];});

// 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(" + xOffset + "," + (h - padding[2]) + ")")
					.call(xAxis);
			}

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

</script>

</body>
</html>

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

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