DataVis with D3 - Module 4 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: #F2F2F2;
				padding: 5px;
			}
			h1 {
				border-bottom: solid 5px #000099;
				font-size: 18pt;
			}
			svg {background-color: white;}
			rect:hover {fill: orange;}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			.axis text {font-family: sans-serif;}
			.x.axis text {font-size: 12px;}
			.y.axis text {font-size: 14px;}
			.y.axis path,
			.y.axis line {
				opacity: 0.0;  /* set the visibility of the y-axis line and ticks*/
			}
		</style>
	</head>
	<body>

<h1>Maryland County Motor Vehicle Death Rates</h1>
		<p>Caroline County had the highest rate of motor vehicle deaths 
			among Maryland counties in 2014.</p>
		<p>

// Tunable variables:
			var svgw = 800;
			var svgh = 600;
			var pad = { top: 1, right: 20, bottom: 30, left: 120 };

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

// Scale and axis variables:
			var widthScale = d3.scale.linear()
								.range([ 0, svgw - pad.left - pad.right ]);
			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ pad.top, svgh - pad.bottom ], 0.15);
			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom")
							.ticks(5);
			var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");

//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.MVMort_rate, +b.MVMort_rate);
				}); // plus signs before the a.* and b.* arguments force a numeric value sort

// Set up the input domains
				widthScale.domain([ 0, 
					d3.max(dataset, function(d) { return +d.MVMort_cih; })
				]);
				heightScale.domain(dataset.map(function(d) { return d.CoName; } ));

// Create the bar chart
				svg.selectAll("rect")
					.data(dataset)
					.enter()
					.append("rect")
					.attr("x", pad.left)
					.attr("y", function(d) {
						return heightScale(d.CoName);
					})
					.attr("width", function(d) {
						return widthScale(d.MVMort_rate);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill", "#6E9BCA")
					.append("title") // Add mouseover action
					.text(function(d) {
						return d.CoName + " County: " + d.MVMort_rate
							+ " (from " + d.MVMort_cil + " to " + d.MVMort_cih + ")";
					});

// Add confidence intervals
				svg.selectAll("line")
					.data(dataset)
					.enter()
					.append("line")
					.attr("x1", function(d) {
						return pad.left + widthScale(d.MVMort_cil);
					})
					.attr("y1", function(d) {
						return (heightScale.rangeBand() / 2) + heightScale(d.CoName);
					})
					.attr("x2", function(d) {
						return pad.left + widthScale(d.MVMort_cih);
					})
					.attr("y2", function(d) {
						return (heightScale.rangeBand() / 2) + heightScale(d.CoName);
					})
					.attr("stroke", "#2C4E71")
					.attr("stroke-width", "2");

// Add the axes and x-axis label:
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", 
						"translate(" + pad.left + "," + (svgh - pad.bottom - 5) + ")") 
						// Adjusted a bit to account for extra space from using rangeRoundBands
					.call(xAxis);
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + pad.left + ",0)")
					.call(yAxis);
				svg.append("text") // label the x-axis
					.attr("x", pad.left - 2)
					.attr("y", svgh - pad.bottom + 26)
					.attr("font-size", "11")
					.text("Motor vehicle deaths per 100,000 people per year");

};

</script>

<p style="font-size:12px">Source: County Health Rankings web site (
			<a href="https://www.countyhealthrankings.org/" target="_blank">
					https://www.countyhealthrankings.org/</a>
			), the "Additional Measures" data for 2014.</p>

</body>
</html>

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

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