Intermediate D3 - Exercise 1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 1 Bar Chart</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				font-family: Helvetica, Arial, sans-serif;
				margin: 0;
				background-color: lightGray;
			}
			#container {
				width: 800px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 10px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccc;
			}
			h1 {
				border-bottom: solid 5px #000099;
				font-size: 18pt;
			}
			svg {background-color: white;}
			/* CSS rules for bar groups */
			g.bar text {
				font-size: 12px;
				font-weight: bold;
				text-anchor: start;
				opacity: 0;
			}
			g.bar:hover rect {
				fill: orange;
			}
			g.bar:hover text {
				opacity: 1;
			}
			/*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*/
			}
			text.axisLabel {font-size: 12px;}
			.errorbars {stroke-width: 2; stroke: #2C4E71;			}
			.gridlines {stroke-width: 1; stroke: white;			}
			rect.trigger {opacity: 0;} /* Invisible rect in front of text */
			rect.trigBack {fill: #DBEBFC; stroke: #254E77; shape-rendering: crispEdges;}
			text.trigText {font-size: 14px; fill: #254E77;}
		</style>
	</head>
	<body>

<div id="container">
			<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 };

var meas = { base: "MVMort_rate", cil: "MVMort_cil", cih: "MVMort_cih"};

// Global variables:
			//Now the SVG goes into #container instead of body
			var svg1 = d3.select("#container")
			// var svg1 = 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("MD County Health Rankings - 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[meas.base], +b[meas.base]);
				}); // Plus signs before the a.* and b.* arguments force a numeric value sort
				// Alternatives are Javascript functions parseInt() and parseFloat()

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

// Create the bar chart
				//Bind data to groups (not bars directly)
				var groups = svg1.selectAll("g")
					.data(dataset)
					.enter()
					.append("g")
					.attr("class", "bar");
					//"bar" class help us differentiate these groups
					//from the groups created later for axes

// Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", pad.left)
					.attr("y", function(d) {
						return heightScale(d.CoName);
					})
					//Initially, set bar width to zero
					.attr("width", 0)
					// .attr("width", function(d) {
					// 	return widthScale(d[meas.base]);
					// })
					.attr("height", heightScale.rangeBand())
					.attr("fill", "#6E9BCA");
					// .append("title") // Add mouseover action
					// .text(function(d) {
					// 	return d[meas.base]
					// 		+ " (from " + d[meas.cil] + " to " + d[meas.cih] + ")";
					// });

// Add a text element to each group for hover action
				groups.append("text")
					.attr("x", function(d) {
						return pad.left + 3;
					})
					.attr("y", function(d) {
						return heightScale(d.CoName) + 15;
					})
					.text(function(d) {
						return d[meas.base]
							+ " (from " + d[meas.cil] + " to " + d[meas.cih] + ")";
					});

// Transition bar widths into place
				rects.transition()
					.duration(1000)
					.attr("width", function(d) {
						return widthScale(d[meas.base]);
					});

// Add verticle grid lines: (does not scale with different measures)
				for (var i = 10; i <= 30; i += 10) {
					svg1.append("line")
						.attr("class", "gridlines")
						.attr("x1", pad.left + widthScale(i))
						.attr("y1", pad.top)
						.attr("x2", pad.left + widthScale(i))
						.attr("y2", svgh - pad.bottom)
				} // End for-loop to add grid lines

// Add error bars for confidence intervals
				var errorBars = svg1.selectAll("line.errorbars")
					.data(dataset)
					.enter()
					.append("line");
				errorBars.attr("class", "errorbars")
					.attr("x1", function(d) {
						return pad.left + widthScale(d[meas.base]); // Will transition to low CI
					})
					.attr("x2", function(d) {
						return pad.left + widthScale(d[meas.base]); // Will transition to low CI
					})
					.attr("y1", function(d) {
						return heightScale(d.CoName) + (heightScale.rangeBand() / 2);
					})
					.attr("y2", function(d) {
						return heightScale(d.CoName) + (heightScale.rangeBand() / 2);
					})

// Add the axes and x-axis label:
				svg1.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);
				svg1.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + pad.left + ",0)")
					.call(yAxis);
				svg1.append("text") // label the x-axis
					.attr("class", "axisLabel")
					.attr("x", pad.left - 2)
					.attr("y", svgh - pad.bottom + 26)
					.text("Motor vehicle deaths per 100,000 people per year");

// Add a text box to trigger transitions
				svg1.append("rect")
					.attr("class", "trigBack")
					.attr("x", 2)
					.attr("y", svgh - 40)
					.attr("width", 100)
					.attr("height", 35)
				svg1.append("text") // label the x-axis
					.attr("class", "trigText")
					.attr("x", 6).attr("y", svgh - 25)
					.text("Click to show");
				svg1.append("text") // label the x-axis
					.attr("class", "trigText")
					.attr("x", 6).attr("y", svgh - 10)
					.text("uncertainty");
				svg1.append("rect")
					.attr("class", "trigger")
					.attr("x", 2)
					.attr("y", svgh - 40)
					.attr("width", 100)
					.attr("height", 35)

// Trigger action:
				d3.select("rect.trigger")
					.on("click", function() {
						errorBars.transition()
						.duration(2000)
					.attr("x1", function(d) {
						return pad.left + widthScale(d[meas.cil]);
					})
					.attr("x2", function(d) {
						return pad.left + widthScale(d[meas.cih]);
					})
					});

}; // End generateVis function

</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>

</div>
	</body>
</html>

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

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