All examples By author By category About

mendozaline

Full window Github gist

Module 6 Exercise

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 6 Exercise</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			body {
				background-color: #FFFFFF;
				font-family: Arial, sans-serif;
				max-width: 1000px;
			}

h1 {
				border-left: 5px solid #FF0000;
				border-bottom: 1px solid #FF0000;
				font-family: Arial Narrow, Arial, sans-serif;
				font-size: 30px;
				font-weight: bold;
				padding-left: 5px;
			}

h2 {
				font-family: Arial, sans-serif;
				font-size: 20px;
				font-weight: bold;
			}
			
			svg {
				background-color: #FFFFFF;
				float: left;
			}

.pathF {
				stroke: #D4B9DA;
				stroke-width: 1.5px;
			}

.pathF:hover {
				stroke: #CE1256;
				stroke-width: 2px;
			}

g.HighlightF path {
				stroke: #CE1256;
				stroke-width: 2px;
			}

.pathM {
				stroke: #FCBBA1;
				stroke-width: 1.5px;
			}

.pathM:hover {
				stroke: #CB181D;
				stroke-width: 2px;
			}

g.HighlightM path {
				stroke: #CB181D;
				stroke-width: 2px;
			}

.axis path {
				fill: none;
				shape-rendering: crispEdges;
				stroke: none;
				stroke-width: 1px;
			}

.axis line {
				fill: none;
				shape-rendering: crispEdges;
				stroke: #969696;
				stroke-width: 1;
			}

.axis text {
				fill: #000000;
				font-family: sans-serif;
				font-size: 11px;
			}

#headline {
				background-color: #FFFFFF;

color: #000000;
				float: left;
				font-size: 15px;
				max-width: 800px;
				padding-left: 5px;
				padding-bottom: 0px;
				width: 100%;
			}

.textbox {
				background-color: #FFFFFF;
				
				float: left;
				font-size: 15px;
				max-width: 800px;
				margin-top: 0px;
				margin-bottom: 0px;
				width: 100%;
			}

#footer {
				background-color: #FFFFFF;

float: left;
				font-size: 12px;
				margin-top: 20px;
				margin-bottom: 20px;
				max-width: 800px;
				padding-left: 5px;
				width: 60%;
			}

.gridlines {
				stroke: #737373;
				stroke-dasharray: 1;
				shape-rendering: crispEdges;
				stroke-width: 1;
			}

</style>
	</head>
	<body>
		<div id="headline" style="float: left;">
			<h1>Good News, Bad News: 
			<br> Cancer Death Rates in the United States, 1930-2011</h1>
		</div>
		
		<div class="textbox" style="float: left;">
			<h2>The Good News</h2>
			
			<p>Among American women, the age-adjusted death rates for five types of cancer 
			have decreased since the 1930s. The largest decline has been in stomach cancer, 
			which has dropped from 35.2 deaths per 100,000 women in 1930 to 2.3 deaths in 
			2011 &mdash; or a decline of 93.5%. Stomach cancer death rates have declined 
			similarly for men, dropping 90.5% since 1930.
			</p>
		</div>
		
		<div id="chartContainerF1" style="float: left;"></div>
		<div id="chartContainerM1" style="float: left;"></div>
		
		<div class="textbox" style="float: left; border-top: 1px solid #FF0000; margin-top: 25px;">
			<h2>The Bad News</h2>
						
			<p> The lung and bronchus cancer death rates have increased greatly for both men 
			and women over the last 80 years. Since 1930, the death rate has risen 1326% 
			and 1251%, respectively, among women and men. However, the lung/bronchus 
			cancer death rate peaked in 1990 for men and has declined by 36% since then. 
			The female death rate peaked after it did for men because cigarette use 
			increased among women decades after it did for men. So we're only starting 
			to see the decline in deaths for women due to lung cancer. 
			</p>
		</div>
		
		<div id="chartContainerF2" style="float: left;"></div>
		<div id="chartContainerM2" style="float: left;"></div>
		
		<div id="footer">
			<p><b>Data sources:</b> American Cancer Society, Cancer Facts &amp; Figures 2015, 
			<a href="https://www.cancer.org/research/cancerfactsstatistics/cancerfactsfigures2015/index">
			"Trends in Age-adjusted Cancer Death Rates by Site, Females, US, 1930-2011"</a> 
			and <a href="https://www.cancer.org/research/cancerfactsstatistics/cancerfactsfigures2015/index">
			"Trends in Age-adjusted Cancer Death Rates by Site, Males, US, 1930-2011."</a>
			</p>
		</div>

var w = 450;
			var h = 300;
			var padding = {top: 10, bottom: 25, left: 40, right: 15};

var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
				.range([ padding.left + 5, w - padding.right - 5]);

var yScale = d3.scale.linear()
				.range([ padding.top + 10, h - padding.bottom - 5]);

var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom")
				.ticks(10)
				.tickFormat(function(d) {
					return dateFormat(d);
				});

var yAxis1 = d3.svg.axis()
				.scale(yScale)
				.tickValues([20,40,60,80,100])
				.orient("left");
							
			var yAxis2 = d3.svg.axis()
				.scale(yScale)
				.tickValues([20,40,60,80,100])
				.orient("left");

var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScale(+d.amount);
				});

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

d3.csv("female_cancer_death_rates.csv", function(data) {

var years = ["1930", "1931", "1932", "1933", "1934", "1935", 
				"1936", "1937", "1938", "1939", "1940", "1941", "1942", "1943", "1944", "1945", 
				"1946", "1947", "1948", "1949", "1950", "1951", "1952", "1953", "1954", "1955", 
				"1956", "1957", "1958", "1959", "1960", "1961", "1962", "1963", "1964", "1965", 
				"1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", 
				"1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", 
				"1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", 
				"1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", 
				"2006", "2007", "2008", "2009", "2010", "2011"];

var dataset = [];

for (var i = 0; i < data.length; i++) {

dataset[i] = {
						cancer: data[i].cancerType,
						rates: []
					};

for (var j = 0; j < years.length; j++) {

if (data[i][years[j]]) {
							dataset[i].rates.push({
								year: years[j],
								amount: data[i][years[j]]
							});
						}
					}
				}
				
				xScale.domain([ 
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

yScale.domain([ 
					100,
					0
				]);

for (var i = 0; i <= 100; i += 20) {
					svg1.append("line")
						.attr({
							"class": "gridlines",
							x1: padding.left + 2,
							y1: yScale(i),
							x2: w - padding.right,
							y2: yScale(i),
						});
				};

groups.selectAll("path")
					.data(function(d) {
						return [ d.rates ];
					})
					.enter()
					.append("path")
					.attr({
						"class": "pathF",
						"d": line,
						"fill": "none",
					});

groups.append("title")
					.text(function(d) {
						return d.cancer;
					});

svg1.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding.bottom) + ")")
					.call(xAxis);

svg1.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding.left) + ", 0)")
					.call(yAxis1)
					.append("text")
					.attr({
						"transform": "rotate(270)",
						x: -190,
						y: -30,
					})
					.text("Deaths per 100,000");

svg1.append("g")
					.append("text")
					.text("Women")
					.attr("font-weight", "bold")
					.attr("transform", "translate(" + padding.left + "," + padding.top + ")");

svg1.append("g")
					.append("text")
					.text("Stomach")
					.attr("font-weight", "bold")
					.attr("fill", "#CE1256")
					.attr("transform", "translate(" + ( padding.left ) + "," + (padding.top * 21.9) + ")");

for (var i = 0; i <= 100; i += 20) {
					svg3.append("line")
						.attr({
							"class": "gridlines",
							x1: padding.left + 2,
							y1: yScale(i),
							x2: w - padding.right,
							y2: yScale(i),
						});
				};

groups.append("title")
					.text(function(d) {
						return d.cancer;
					});

svg3.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding.bottom) + ")")
					.call(xAxis);

svg3.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding.left) + ", 0)")
					.call(yAxis1)
					.append("text")
					.attr({
						"transform": "rotate(270)",
						x: -190,
						y: -30,
					})
					.text("Deaths per 100,000");

svg3.append("g")
					.append("text")
					.text("Women")
					.attr("font-weight", "bold")
					.attr("transform", "translate(" + padding.left + "," + padding.top + ")");

svg3.append("g")
					.append("text")
					.text("Lung and bronchus")
					.attr("font-weight", "bold")
					.attr("fill", "#CE1256")
					.attr("transform", "translate(" + ( padding.left * 7.5 ) + "," + (padding.top * 16) + ")");
			});

d3.csv("male_cancer_death_rates.csv", function(data) {

var dataset = [];

for (var i = 0; i < data.length; i++) {

dataset[i] = {
						cancer: data[i].cancerType,
						rates: []
					};

for (var j = 0; j < years.length; j++) {

if (data[i][years[j]]) {
							dataset[i].rates.push({
								year: years[j],
								amount: data[i][years[j]]
							});
						}
					}
				}

xScale.domain([ 
					d3.min(years, function(d) {
						return dateFormat.parse(d);
					}),
					d3.max(years, function(d) {
						return dateFormat.parse(d);
					})
				]);

yScale.domain([ 
					100,
					0
				]);

for (var i = 0; i <= 100; i += 20) {
					svg2.append("line")
						.attr({
							"class": "gridlines",
							x1: padding.left + 2,
							y1: yScale(i),
							x2: w - padding.right,
							y2: yScale(i),
						});
				};

groups.selectAll("path")
					.data(function(d) {
						return [ d.rates ];
					})
					.enter()
					.append("path")
					.attr({
						"class": "pathM",
						"d": line,
						"fill": "none",
					});

groups.append("title")
					.text(function(d) {
						return d.cancer;
					});

svg2.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding.bottom) + ")")
					.call(xAxis);

svg2.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding.left) + ", 0)")
					.call(yAxis2)
					.append("text")
					.attr({
						"transform": "rotate(270)",
						x: -190,
						y: -30,
					})
					.text("Deaths per 100,000");

svg2.append("g")
					.append("text")
					.text("Men")
					.attr("font-weight", "bold")
					.attr("transform", "translate(" + padding.left + "," + padding.top + ")");

svg2.append("g")
					.append("text")
					.text("Stomach")
					.attr("font-weight", "bold")
					.attr("fill", "#CB181D")
					.attr("transform", "translate(" + ( padding.left ) + "," + (padding.top * 15) + ")");

for (var i = 0; i <= 100; i += 20) {
					svg4.append("line")
						.attr({
							"class": "gridlines",
							x1: padding.left + 2,
							y1: yScale(i),
							x2: w - padding.right,
							y2: yScale(i),
						});
				};

groups.append("title")
					.text(function(d) {
						return d.cancer;
					});

svg4.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding.bottom) + ")")
					.call(xAxis);

svg4.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding.left) + ", 0)")
					.call(yAxis2)
					.append("text")
					.attr({
						"transform": "rotate(270)",
						x: -190,
						y: -30,
					})
					.text("Deaths per 100,000");

svg4.append("g")
					.append("text")
					.text("Men")
					.attr("font-weight", "bold")
					.attr("transform", "translate(" + padding.left + "," + padding.top + ")");

svg4.append("g")
					.append("text")
					.text("Lung and bronchus")
					.attr("font-weight", "bold")
					.attr("fill", "#CB181D")
					.attr("transform", "translate(" + ( padding.left * 7.5 ) + "," + (padding.top * 14) + ")");

});

</script>
	</body>

</html>

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

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