Module 4 Exercise Update #2

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 4 Exercise</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				font-family: Segoe, Arial,sans-serif;
			}
			
			h1 {
				font-size: 20px;
			}

p {
				font-size: 15px;
			}

#description,
			#footer {
				width: 85%;
				max-width: 850px;
				text-align: left;
				margin-left: 15px;
			}
			
			svg {
				background-color: #FFFFFF;
			}

.y.axis path {
				opacity: 0.0;
			}

.y.axis line {
				opacity: 1.0;
				stroke: #000000;
				shape-rendering: crispEdges;
			}

.y.axis text  {
				fill: #000000;
				font-size: 15px;
				font-weight: bold;
			}
			
			.x.axis path {
				fill: none;
				stroke: none;
				shape-rendering: crispEdges;
				}
	
			.x.axis line {
				fill: none;
				stroke: #000000;
				shape-rendering: crispEdges;
			}

.x.axis text {
				fill: #000000; 
				font-size: 15px;
			}
	
			.hover text {
				fill: rgba(0, 0, 0, 1.0);
				font-weight: bold;
			}

.hover rect{
				fill: rgba(250,159,181, 1.0);
			}
			
			.gridlines {
				stroke-width: 2;
				stroke: #FFFFFF;
			}
			
		</style>
	</head>

<body>

<div id="description">
			<h1>Age-adjusted Stomach Cancer Death Rate Per 100,000 Women, 1930-2011</h1>
			<p>In the United States, the stomach cancer death rate has fallen considerably from 35.2 per 100,000 women in 1930 to 2.3 in 2011 &mdash; or a decrease of 93%. According to the American Cancer Society, the increased use of antibiotics and refrigeration may have <a href="https://www.cancer.org/cancer/stomachcancer/detailedguide/stomach-cancer-key-statistics">contributed</a> to this decline.</p>
		</div>
		
		<script type="text/javascript">

var w = 850;
			var h = 850;
			var padding = [ 15, 5, 0, 55 ];  //Top, right, bottom, left
			var z = padding[3]

var widthScale = d3.scale.linear()
				.range([ 0, w - padding[1] - padding[3] - z]);
			
			var heightScale = d3.scale.ordinal()
				.rangeRoundBands([ padding[0], h - padding[2] ], 0.2);

var xAxis = d3.svg.axis()
				.scale(widthScale)
				.tickValues([ 5, 10, 15, 20, 25, 30, 35 ])
				.orient("top");

var yAxis = d3.svg.axis()
				.scale(heightScale)
				.tickValues([ 1930, 1940, 1950, 1960, 1970, 1980, 1990, 2000, 2010])
				.orient("left");

var svg = d3.select("body")
				.append("svg")
				.attr({
					width: w,
					height: h,
				});

d3.csv("female_cancer_death_rates.csv", function(data) {
				console.log(data);

widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.stomach; }) ]);

heightScale.domain(data.map(function(d) { 
					return +d.year; }) );

var barGroup = svg.selectAll("g")
					.data(data)
					.enter()
					.append("g")

barGroup.append("rect")
					.attr({
						x: padding[3] + z,
						y: function(d) { return heightScale(d.year); },
						width: function(d) { return widthScale(d.stomach); },
						height: heightScale.rangeBand(),
						"fill": "rgba(174, 1, 126, 1.0)",
					})
					.append("title")
					.text(function(d) {
						return "In " + d.year + ", the stomach cancer death rate was " + d.stomach + " per 100,000 women.";
					});

barGroup.append("text")
					.attr({
						x: (padding[3] * .7) + z,
						y: function(d) { return heightScale(d.year) + 9; },
						"text-anchor": "end",
						"font-size": "15px",
						"fill": "none",
					})
					.text(function(d) { return d.stomach; });

svg.append("line")
					.attr({
						"class": "gridlines",						
						x1: 214.5,
						y1: 0,
						x2: 214.5,
						y2: 850,
					});

svg.append("line")
					.attr({
						"class": "gridlines",
						x1: 318.75,
						y1: 0,
						x2: 318.75,
						y2: 850,
					});

svg.append("line")
					.attr({
						"class": "gridlines",
						x1: 423,
						y1: 0,
						x2: 423,
						y2: 850,
					});

svg.append("line")
					.attr({
						"class": "gridlines",
						x1: 527.25,
						y1: 0,
						x2: 527.25,
						y2: 850,
					});

svg.append("line")
					.attr({
						"class": "gridlines",
						x1: 632,
						y1: 0,
						x2: 632,
						y2: 850,
					});

svg.append("line")
					.attr({
						"class": "gridlines",
						x1: 736.25,
						y1: 0,
						x2: 736.25,
						y2: 850,						
					});

svg.append("line")
					.attr({
						"class": "gridlines",
						x1: 840.75,
						y1: 0,
						x2: 840.75,
						y2: 850,
					});

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + (padding[3] + z) + ", " + 20 + ")")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ", 0)")
					.call(yAxis);

barGroup.style("cursor", "pointer")

barGroup.on("mouseover", function() { 
					d3.select(this)
						.classed("hover", true)
				});

barGroup.on("mouseout", function() { 
					d3.select(this)
						.classed("hover", false)
				});

});
		</script>

<div id="footer">
		<p><b>Data source:</b> <a href="https://www.cancer.org/research/cancerfactsstatistics/cancerfactsfigures2015/index">American Cancer Society, Cancer Facts &amp; Figures 2015</a>.</p>
	</div>
	</body>
</html>

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

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