DataVis with D3 - Module 5 Exercise

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 5 Chart 5</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;
				max-width: 800px;
			}
			h1 {
				border-bottom: solid 5px #000099;
				font-size: 18pt;
			}
			svg {background-color: white;}
			circle.nonMissing {fill: #6E9BCA}
			circle.nonMissing:hover {fill: orange;}
			circle.missingVal {opacity: 0;} 
			.axis path,
			.axis line {
				fill: none;
				stroke: gray;
				shape-rendering: crispEdges;
			}
			.axis text {font-family: sans-serif;}
			.x.axis text {font-size: 12px; fill: gray;}
			.y.axis text {font-size: 12px; fill: gray;}
			text.axisLabel {font-size: 12px; fill: gray;}
			.errorCIs {fill: #6E9BCA; opacity: 0.25;
				shape-rendering: crispEdges;
			}
			.errorCIs.missingVal {opacity: 0;} 
			rect.trigger5 {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>

<h1>Scatterplot of Motor Vehicle Death Rates by Homicide Death Rates</h1>
		<p>

// Tunable variables:
			var svgw = 800;
			var svghScat = 500;
			var padScat = { top: 10, right: 20, bottom: 40, left: 120 };

// Measure selection:
			var measMV = { base: "MVMort_rate", cil: "MVMort_cil", cih: "MVMort_cih"};
			// var measHom = { base: "Homicide_rate", cil: "Homicide_cil", cih: "Homicide_cih"};
			var measHom = { base: "Homicide2_rate", cil: "Homicide2_cil", cih: "Homicide2_cih"};

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

// Scale and axis variables:
			var xScale5 = d3.scale.linear()
								.range([ padScat.left, svgw - padScat.right ]);
			var yScale5 = d3.scale.linear()
								.range([ padScat.top, svghScat - padScat.bottom ]);
			var xAxis5 = d3.svg.axis()
							.scale(xScale5)
							.orient("bottom")
							.ticks(5);
			var yAxis5 = d3.svg.axis()
							.scale(yScale5)
							.orient("left")
							.ticks(5);

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

// generateVis: function to generate the scatterplot
			var generateVis5 = function() {

// Sort in descending order
				dataset.sort(function(a, b) {
					return d3.descending(+a[measMV.base], +b[measMV.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
				xScale5.domain([ 
					0,
					// d3.min(dataset, function(d) { return +d[measHom.cih]; }), 
					d3.max(dataset, function(d) { return +d[measHom.cih]; })
				]);
				yScale5.domain([ 
					23, // Override because max value has missing homicide rate
					// d3.max(dataset, function(d) { return +d[measMV.cih]; }), 
					0
					// d3.min(dataset, function(d) { return +d[measMV.cil]; })
				]);

// Add error ellipses for confidence intervals
				// Do this before the scatterplot points so that they are underneath
				var errEllipses = svg5.selectAll("ellipse.errorCIs")
					.data(dataset)
					.enter()
					.append("ellipse");
				errEllipses.attr("class", function(d) {
						if (d[measHom.base] != "") { // Homicide rate might be missing
						return "errorCIs nonMissing"
						} else {
						return "errorCIs missingVal"
						}
					})
					.attr("cx", function(d) {
						return xScale5(d[measHom.base]);
					})
					.attr("cy", function(d) {
						return yScale5(d[measMV.base]);
					})
					.attr("rx", 0)
					.attr("ry", 0)

// Create the scatterplot points
				svg5.selectAll("circle.cir5")
					.data(dataset)
					.enter()
					.append("circle")
					.attr("class", function(d) {
						if (d[measHom.base] != "") { // Homicide rate might be missing
						return "nonMissing cir5"
						} else {
						return "missingVal cir5"
						}
					})
					.attr("cx", function(d) {
						return xScale5(d[measHom.base]);
					})
					.attr("cy", function(d) {
						return yScale5(d[measMV.base])
					})
					.attr("r", 6)
					.append("title") // Add mouseover action
					.text(function(d) {
						if (d[measHom.base] != "") {  // Homicide rate might be missing
						if (d.CoName.substr(d.CoName.length-4,4) == "City") { // CoName ends in "City"
						return d.CoName + ": X-value " 
							+ d[measHom.base] + " (from " + d[measHom.cil] + " to " + d[measHom.cih] 
							+ "), Y-value "
							+ d[measMV.base] + " (from " + d[measMV.cil] + " to " + d[measMV.cih] + ")";
						} else { // Add "County" to the text
						return d.CoName + " County: X-value " 
							+ d[measHom.base] + " (from " + d[measHom.cil] + " to " + d[measHom.cih] 
							+ "), Y-value "
							+ d[measMV.base] + " (from " + d[measMV.cil] + " to " + d[measMV.cih] + ")";
						} }
					});

// Add the axes and labels:
				svg5.append("g")
					.attr("class", "x axis")
					.attr("transform", 
						"translate(0," + (svghScat - padScat.bottom) + ")") 
					.call(xAxis5);
				svg5.append("g")
					.attr("class", "y axis")
					.attr("transform", 
						"translate(" + padScat.left + ",0)")
					.call(yAxis5);
				svg5.append("text") // label the x-axis
					.attr("class", "axisLabel")
					.attr("x", padScat.left - 2)
					.attr("y", svghScat - padScat.bottom + 32)
					.text("Homicide deaths per 100,000 people per year");
				// Label the y-axis - multiple text lines
				svg5.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", padScat.top + 10)
					.text("Motor vehicle");
				svg5.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", padScat.top + 25)
					.text("deaths per");
				svg5.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", padScat.top + 40)
					.text("100,000 people");
				svg5.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", padScat.top + 55)
					.text("per year");

// Add a text box to trigger transitions
				svg5.append("rect")
					.attr("class", "trigBack")
					.attr("x", 2)
					.attr("y", svghScat - 70)
					.attr("width", 80)
					.attr("height", 50)
				svg5.append("text") // label the x-axis
					.attr("class", "trigText")
					.attr("x", 6).attr("y", svghScat - 55)
					.text("Click to");
				svg5.append("text") // label the x-axis
					.attr("class", "trigText")
					.attr("x", 6).attr("y", svghScat - 40)
					.text("show");
				svg5.append("text") // label the x-axis
					.attr("class", "trigText")
					.attr("x", 6).attr("y", svghScat - 25)
					.text("uncertainty");
				svg5.append("rect")
					.attr("class", "trigger5")
					.attr("x", 2)
					.attr("y", svghScat - 70)
					.attr("width", 80)
					.attr("height", 50)

// Trigger action:
				d3.select("rect.trigger5")
					.on("click", function() {
						errEllipses.transition()
						.duration(2000)
						.attr("rx", function(d) {
							return (xScale5(d[measHom.cih]) - xScale5(d[measHom.cil]))/2;
						})
						.attr("ry", function(d) {  // note: y-scale is reversed
							return (yScale5(d[measMV.cil]) - yScale5(d[measMV.cih]))/2;
						})
					});

}; // End generateVis5 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>

</body>
</html>

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

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