DataVis with D3 - Module 6 Exercise

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>US Breast Cancer Disparities</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;}
			.chartTitle{font-size: 14px;}
			.rightAligned {
				position: absolute; width: 250px; left: 560px; 
				text-align: right; font-size: 14px; 
			}
			svg {background-color: white;}
			.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;}
			path.dataline:hover {stroke-width: 5;}
			text.datalineLabel {font-size: 13px;}
		</style>
	</head>
	<body>

<h1>Breast Cancer Disparities in the U.S.</h1>
		<p>

<script type="text/javascript">		
			var svgw = 800;
			var svgh = 600;
			var pad = { top: 10, right: 100, bottom: 40, left: 100 };
			var yExtra = 5; // Extra y-axis room at the top
		</script>

<p>Black women have traditionally had lower breast cancer incidence rates 
			than White women in the United States.  In recent years, rates among 
			White women have dropped while rates among Black women have not 
			and currently rates are roughly	the same.
		</p>

<div>
 			<span class="chartTitle">Age-Adjusted Incidence Rates </span>
 			<span class="rightAligned"><label>
				<input type="checkbox" 
					name="ciCheckBox1val" value="ciChecked" 
					id="ciCheckBox1" onClick="ciChange1()" checked /> Show confidence intervals
			</label></span>
		</div>

<script type="text/javascript">	
			var svg1 = d3.select("body") // An empty SVG
				.append("svg")
				.attr("width", svgw).attr("height", svgh);
		</script>

<p>Because Black women's breast cancer incidence rates have traditionally been 
			relatively low, some Black women have a perception that they do not need to get mammograms.  
			Breast cancer screening rates are lower among Black women and they are more often 
			diagnosed with advanced stage disease.  Consequently, Black women have 
			higher breast cancer mortality rates than White women.
		</p>

<div>
 			<span class="chartTitle">Age-Adjusted Mortality Rates </span>
 			<span class="rightAligned"><label>
				<input type="checkbox" 
					name="ciCheckBox2val" value="ciChecked" 
					id="ciCheckBox2" onClick="ciChange2()" checked /> Show confidence intervals
			</label></span>
		</div>

<script type="text/javascript">	
			var svg2 = d3.select("body") // An empty SVG
				.append("svg")
				.attr("width", svgw).attr("height", svgh);
		</script>

<p>Many state and local cancer control programs are currently focused on
			raising awareness among Black women of the importance of getting mammograms.
		<p>Incidence rates are from the cancer registries of the National Cancer 
			Institute's SEER that have been reporting cancer incidence since 1973.  These 
			registries cover about 25% of the population.  Mortality rates are from the
			National Center for Health Statistics and cover the whole U.S.
		</p>

<p style="font-size:12px">Data source: The National Cancer Institute SEER Program (
			<a href="https://seer.cancer.gov/canques/" target="_blank">
					https://seer.cancer.gov/canques/</a>
			).</p>

<script type="text/javascript">	
			// Measure selection:
			var meas1W = { base: "IncWhite_rate", cil: "IncWhite_cil", cih: "IncWhite_cih"};
			var meas1B = { base: "IncBlack_rate", cil: "IncBlack_cil", cih: "IncBlack_cih"};
			var meas2W = { base: "MortWhite_rate", cil: "MortWhite_cil", cih: "MortWhite_cih"};
			var meas2B = { base: "MortBlack_rate", cil: "MortBlack_cil", cih: "MortBlack_cih"};

//Global variables:
			var dataset; 
			// These need to be global so they can be seen from the checkbox functions:
			var errorArea1W;
			var errorArea1B;
			var errorArea2W;
			var errorArea2B;

//Set up date formatting as years
			var dateFormat = d3.time.format("%Y");

// Scale and axis variables:
			var xScale = d3.time.scale()
								.range([ pad.left, svgw - pad.right ]);
			var yScale = d3.scale.linear()
								.range([ pad.top, svgh - pad.bottom ]);
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(10)
							.tickFormat(function(d) {return dateFormat(d);})
							;
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.ticks(6);

//Configure the line generators
			var line1W = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y(function(d) {
					return yScale(d[meas1W.base]);
				});
			var line1B = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y(function(d) {
					return yScale(d[meas1B.base]);
				});
			var line2W = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y(function(d) {
					return yScale(d[meas2W.base]);
				});
			var line2B = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y(function(d) {
					return yScale(d[meas2B.base]);
				});

//Configure the area generators based on confidence intervals
			var area1W = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y0(function(d) {
					return yScale(d[meas1W.cil])
				})
				.y1(function(d) {
					return yScale(d[meas1W.cih]);
				});
			var area1B = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y0(function(d) {
					return yScale(d[meas1B.cil])
				})
				.y1(function(d) {
					return yScale(d[meas1B.cih]);
				});
			var area2W = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y0(function(d) {
					return yScale(d[meas2W.cil])
				})
				.y1(function(d) {
					return yScale(d[meas2W.cih]);
				});
			var area2B = d3.svg.area()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Year));
				})
				.y0(function(d) {
					return yScale(d[meas2B.cil])
				})
				.y1(function(d) {
					return yScale(d[meas2B.cih]);
				});

//Load in contents of CSV file, check for errors, and call generateVis functions
			d3.csv("usBreastCancerRates.csv", 
				function(error, data) {
					if (error) { console.log(error); //Log the error.
					} else { 
						console.log(data); //Log the data.
						dataset = data;
						generateVis1();
						generateVis2();
					}
				});

// generateVis1: function to generate the incidence graph
			var generateVis1 = function() {

// Set up the input domains
				xScale.domain([ 
					d3.min(dataset, function(d) { return dateFormat.parse(d.Year); }), 
					d3.max(dataset, function(d) { return dateFormat.parse(d.Year); })
				]);
				yScale.domain([ 
					d3.max(dataset, function(d) 
						{ return Math.max(+d[meas1W.cih], +d[meas1B.cih]) + yExtra; }), 
					// Pick one - set y-axis start at 0 or the smallest y value:
					0
					// d3.min(dataset, function(d) 
					// 	{ return Math.min(+d[meas1W.cil], +d[meas1B.cil]) - yExtra; })
				]);

// Generate the confidence interval areas using the area generators
				// Do this before the lines so the line hover and mouseover will work
				errorArea1W = svg1.data([ dataset ]) // A global variable
					.append("path")
					.attr("class", "dataarea")
					.attr("d", area1W)
					.attr("fill", "green")
					.attr("stroke", "none")
					.attr("opacity", 0.5);

errorArea1B = svg1.data([ dataset ]) // A global variable
					.append("path")
					.attr("class", "dataarea")
					.attr("d", area1B)
					.attr("fill", "purple")
					.attr("stroke", "none")
					.attr("opacity", 0.5);

// Generate the data lines using the line generators
				svg1.data([ dataset ])
					.append("path")
					.attr("class", "dataline")
					.attr("d", line1W)
					.attr("fill", "none")
					.attr("stroke", "green")
					.attr("stroke-width", 2)
					.append("title")
					.text("White women");
				svg1.append("text") // label the dataline
					.attr("class", "datalineLabel")
					.attr("x", svgw - pad.right + 5).attr("y", 80)
					.attr("fill", "green")
					.text("White women");

svg1.data([ dataset ])
					.append("path")
					.attr("class", "dataline")
					.attr("d", line1B)
					.attr("fill", "none")
					.attr("stroke", "purple")
					.attr("stroke-width", 2)
					.append("title")
					.text("Black women");
				svg1.append("text") // label the dataline
					.attr("class", "datalineLabel")
					.attr("x", svgw - pad.right + 5).attr("y", 110)
					.attr("fill", "purple")
					.text("Black women");

// Add the axes and labels:
				svg1.append("g")
					.attr("class", "x axis")
					.attr("transform", 
						"translate(0," + (svgh - pad.bottom) + ")") 
					.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 + 32)
					.text("Year of diagnosis");
				// Label the y-axis - multiple text lines

svg1.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 10)
					.text("Cases per");
				svg1.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 25)
					.text("100,000");
				svg1.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 40)
					.text("people");
				svg1.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 55)
					.text("per year");

}; // End generateVis1 function

// generateVis2: function to generate the mortality graph
			var generateVis2 = function() {

// Set up the input domains
				xScale.domain([ 
					d3.min(dataset, function(d) { return dateFormat.parse(d.Year); }), 
					d3.max(dataset, function(d) { return dateFormat.parse(d.Year); })
				]);
				yScale.domain([ 
					d3.max(dataset, function(d) 
						{ return Math.max(+d[meas2W.cih], +d[meas2B.cih]) + yExtra; }), 
					// Pick one - set y-axis start at 0 or the smallest y value:
					0
					// d3.min(dataset, function(d) 
					// 	{ return Math.min(+d[meas2W.cil], +d[meas2B.cil]) - yExtra; })
				]);

// Generate the confidence interval areas using the area generators
				// Do this before the lines so the line hover and mouseover will work
				errorArea2W = svg2.data([ dataset ]) // A global variable
					.append("path")
					.attr("class", "dataarea")
					.attr("d", area2W)
					.attr("fill", "green")
					.attr("stroke", "none")
					.attr("opacity", 0.5);

errorArea2B = svg2.data([ dataset ]) // A global variable
					.append("path")
					.attr("class", "dataarea")
					.attr("d", area2B)
					.attr("fill", "purple")
					.attr("stroke", "none")
					.attr("opacity", 0.5);

// Generate the data lines using the line generators
				svg2.data([ dataset ])
					.append("path")
					.attr("class", "dataline")
					.attr("d", line2W)
					.attr("fill", "none")
					.attr("stroke", "green")
					.attr("stroke-width", 2)
					.append("title")
					.text("White women");
				svg2.append("text") // label the dataline
					.attr("class", "datalineLabel")
					.attr("x", svgw - pad.right + 5).attr("y", 308)
					.attr("fill", "green")
					.text("White women");

svg2.data([ dataset ])
					.append("path")
					.attr("class", "dataline")
					.attr("d", line2B)
					.attr("fill", "none")
					.attr("stroke", "purple")
					.attr("stroke-width", 2)
					.append("title")
					.text("Black women");
				svg2.append("text") // label the dataline
					.attr("class", "datalineLabel")
					.attr("x", svgw - pad.right + 5).attr("y", 200)
					.attr("fill", "purple")
					.text("Black women");

// Add the axes and labels:
				svg2.append("g")
					.attr("class", "x axis")
					.attr("transform", 
						"translate(0," + (svgh - pad.bottom) + ")") 
					.call(xAxis);
				svg2.append("g")
					.attr("class", "y axis")
					.attr("transform", 
						"translate(" + pad.left + ",0)")
					.call(yAxis);
				svg2.append("text") // label the x-axis
					.attr("class", "axisLabel")
					.attr("x", pad.left - 2)
					.attr("y", svgh - pad.bottom + 32)
					.text("Year of death");
				// Label the y-axis - multiple text lines
				svg2.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 10)
					.text("Deaths per");
				svg2.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 25)
					.text("100,000");
				svg2.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 40)
					.text("people");
				svg2.append("text") 
					.attr("class", "axisLabel")
					.attr("x", 5).attr("y", pad.top + 55)
					.text("per year");

}; // End generateVis2 function

// ciChange1: function to show or remove confidence intervals
			var ciChange1 = function() {
				if (document.getElementById("ciCheckBox1").checked) {
					var op=0.5;
				}
				else {
					var op=0;
				}
				console.log("Checkbox1 op: " + op)
				errorArea1W.transition()
				.duration(1000)
				.attr("opacity", op)
				errorArea1B.transition()
				.duration(1000)
				.attr("opacity", op)
			}; // End ciChange1 function

// ciChange2: function to show or remove confidence intervals
			var ciChange2 = function() {
				if (document.getElementById("ciCheckBox2").checked) {
					var op=0.5;
				}
				else {
					var op=0;
				}
				console.log("Checkbox2 op: " + op)
				errorArea2W.transition()
				.duration(1000)
				.attr("opacity", op)
				errorArea2B.transition()
				.duration(1000)
				.attr("opacity", op)
			}; // End ciChange2 function

</script>

</body>
</html>

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

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