Module 4 Exercise

<!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: 95%;
				max-width: 750px;
				text-align: left;
				margin-left: 15px;		
			}
			
			svg {
				background-color: #FFFFFF;
			}

.y.axis path,
			.y.axis line {
				opacity: 0; 
			}

.y.axis text  {
				fill: #000000; 
				font-size: 15px;			
				font-weight: none;
			}
			
			.x.axis path,
			.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);
			}

</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 = 750;
			var h = 1500;
			var padding = [ 0, 0, 80, 55 ];  //Top, right, bottom, left

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

var xAxis = d3.svg.axis()
				.scale(widthScale)
				.orient("bottom");

var yAxis = d3.svg.axis()
				.scale(heightScale)
				.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 + 4.7; }) ]);

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],
						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: w,
						y: function(d) { return heightScale(d.year) + 11.9; },
						"text-anchor": "end",
						"font-size": "15px",
					})
					.text(function(d) { return d.stomach; });

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.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>
	<br>
	</body>
</html>

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

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