DataVis with D3 - Module 3 Exercise

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 3 Exercise</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				font-family: Helvetica, Arial, sans-serif;
				color: #000099;
				background-color: #80FFCC;
				padding: 5px;
			}
			h1 {
				border-bottom: solid 5px #000099;
				font-size: 18pt;
			}
			svg {background-color: white;}
		</style>
	</head>
	<body>

<h1>DataVis with D3 - Module 3 Exercise</h1>

<select id="measureSelect">
			<option value="NoInsAdult_pct">Percent of adults without health insurance</option>
			<option value="NoInsChild_pct">Percent of children without health insurance</option>
			<option value="Access2Dr_pct">Percent who were unable to see a doctor due to costs</option>
			<option value="LimitedFood_pct">Percent with limited access to healthy food</option>
			<option value="Black_pct">Percent African American</option>
			<option value="Hisp_pct">Percent Hispanic</option>
			<option value="NHWhite_pct">Percent Non-Hispanic White</option>
		</select>
		<p>

// Selected county measure
			var selMmeasure = "NoInsAdult_pct"; // Hard-code the measure for now

// Tunable variables:
			var svgw = 1120;
			var svgh = 600;
			var barStart = 50; // Down from the top - leave room for title
			var barOffset = 100; // Shift right - leave room for county names
			var barHeight = 17
			var barPad = 5;

//Global variables:
			var svg = d3.select("body") // An empty SVG
				.append("svg")
				.attr("width", svgw).attr("height", svgh);
			var dataset;

//Load in contents of CSV file, check for errors, and call generateVis()
			d3.csv("2014 County Health Rankings Maryland - additional_measures.csv", 
				function(error, data) {
					if (error) { console.log(error); //Log the error.
					} else { 
						console.log(data); //Log the data.
						dataset = data;
						generateVis();
					}
				});

// generateVis: function to generate the bar chart
			var generateVis = function() {

// Sort in descending order
				dataset.sort(function(a, b) {
					return d3.descending(a.NoInsAdult_pct, b.NoInsAdult_pct);
				});

// Create the bar chart
				svg.selectAll("rect")
					.data(dataset)
					.enter()
					.append("rect")
					.attr("x", barOffset)
					.attr("y", function(d, i) {
						return i * (barHeight + barPad) + barStart;
					})
					.attr("width", function(d) {
						return d.NoInsAdult_pct * 10;
					})
					.attr("height", barHeight)
					.attr("fill", "#4A82BD")
					.append("title")
					.text(function(d) {
						return d.CoName + " County's value is " + d.NoInsAdult_pct + " percent";
					});
				// Add text labels for each bar
				var d_text = svg.selectAll("text")
					.data(dataset);
				// Add the county name to the left of the bar
				d_text.enter()
					.append("text")
					.text(function(d) {
							return d.CoName;
					})
					.attr("x", 2)
					.attr("y", function(d, i) {
						return i * (barHeight + barPad) + barStart + 12;  // Add 12 for font size
					})
					.attr("font-size", "12px")
					.attr("fill", "#000099");
				// Add the data value at the end of the bar
				// d_text.enter()
				// 	.append("text")
				// 	.text(function(d) {
				// 		return d.NoInsAdult_pct;
				// 	})
				// 	// .attr("x", 2)
				// 	.attr("x", function(d) {
				// 		return d.NoInsAdult_pct * 30;
				// 	.attr("y", function(d, i) {
				// 		return i * (barHeight + barPad) + barStart + 12;  // Add 12 for font size
				// 	})
				// 	.attr("font-size", "12px")
				// 	.attr("fill", "#000099");
				// Add a title
				svg.append("rect") // Title rectangle
					.attr({  // Using D3's "multivalue maps"
						x: svgw / 2 - 200, y: 5, width: 400, height: 30, fill: "#FFE0D1"});
				svg.append("text") // Title text
					.attr({  // Using D3's "multivalue maps"
						x: svgw / 2, y: 25, fill: "#000099", 
						"font-size": 18, "font-weight": "bold", "text-anchor": "middle"})
					.text("Maryland County Health Rankings - 2014");
				svg.append("line") // X-axis line
					.attr({  // Using D3's "multivalue maps"
						x1: barOffset, y1: svgh - 20, 
						x2: barOffset + 1000, y2: svgh - 20, stroke: "#000099"});
				svg.append("text") // X-axis 0 
					.attr({  // Using D3's "multivalue maps"
						x: barOffset, y: svgh - 6, fill: "#000099", 
						"font-size": 12, "text-anchor": "middle"})
					.text("0");
				svg.append("text") // X-axis 25
					.attr({  // Using D3's "multivalue maps"
						x: barOffset + 250, y: svgh - 6, fill: "#000099", 
						"font-size": 12, "text-anchor": "middle"})
					.text("25");
				svg.append("text") // X-axis 50
					.attr({  // Using D3's "multivalue maps"
						x: barOffset + 500, y: svgh - 6, fill: "#000099", 
						"font-size": 12, "text-anchor": "middle"})
					.text("50");
				svg.append("text") // X-axis 75
					.attr({  // Using D3's "multivalue maps"
						x: barOffset + 750, y: svgh - 6, fill: "#000099", 
						"font-size": 12, "text-anchor": "middle"})
					.text("75");
				svg.append("text") // X-axis 100
					.attr({  // Using D3's "multivalue maps"
						x: barOffset + 1000, y: svgh - 6, fill: "#000099", 
						"font-size": 12, "text-anchor": "middle"})
					.text("100");
			};

</script>

<p style="font-size:12px">Source: County Health Rankings web site (
			<a href="https://https://www.countyhealthrankings.org/">
					https://https://www.countyhealthrankings.org/</a>
			) additional measures data.</p>

</body>
</html>

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

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