All examples By author By category About

mendozaline

Full window Github gist

Module 5 Exercise Update #1

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

h1 {
				border-bottom: 5px solid #CE1256;
				font-size: 30px;
				font-weight: bold;
			}

h2 {
				font-size: 20px;
				font-weight: bold;
			}

svg {
				float: left;
				max-width: 400px;
				max-width: 800px;
				padding-bottom: 10px;
			}

.textbox {
				float: left;
				max-width: 800px;
				width: 100%;				
				}

#headline {
				margin-bottom: 20px;
				max-width: 850px;
				width: 100%;
			}

#footer {
				float: left;
				font-size: 12px;
				margin-bottom: 15px;
				max-width: 800px;
				width: 100%;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: #000000;
				shape-rendering: crispEdges;
			}

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

.chartTitle {
				font-size: 15px;
				font-weight: bold;
				fill: #000000;
			}

circle:hover {
				fill: #225EA8;
			}

.labels {
				font-size: 12px;
				font-weight: bold;
				fill: #000000;
			}

#tooltip,
			#tooltip2 {
				position: absolute;
				width: 180px;
				height: 80px;
				background-color: rgba(255, 255, 255, 1.0);
				-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
				-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
				box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
				pointer-events: none;
			}

#tooltip.hidden,
			#tooltip2.hidden {
				display: none;
			}

#tooltip p,
			#tooltip2 p {
				font-family: sans-serif;
				font-size: 11px;
				margin-left: 5px;
			}

.gridlines {
				stroke-width: .25;
				stroke: #737373;
			}

</style>
	</head>

<body>
		<div id="headline">
			<h1>The Missing Link Between Cigarette Consumption 
			<br>and Lung Cancer Among American Women</h1>
		</div>

<div class="textbox">
			<p>According to the American Lung Association, smoking <a href="https://www.lung.org/lung-disease/lung-cancer/resources/facts-figures/lung-cancer-fact-sheet.html#SmokingAttributable_Lung_Cancer">contributes</a>
			to approximately 80% of lung cancer deaths among women. So you would 
			expect the relationship between cigarette consumption and lung cancer 
			death rates to be unmistakable. However, as the scatter plot on the left shows, 
			the connection between the two variables is very weak. The correlation 
			coefficient for the plot is a negligible .22 &mdash; revealing an 
			astonishingly tenuous link.</p>
		</div>

<div id="chartContainerONE" style="float:left;">
			<div id="tooltip" class="hidden">
			<p><b>Per capita cigarette consumption:</b> 
			<span id="value1"></span> (<span id="value2"></span>)
			<br>
			<b>Lung/bronchus cancer deaths per 100k women:</b> 
			<span id="value3"></span> (<span id="value4"></span>)
			</p>
			</div>
		</div>

<div id="chartContainerTWO" style="float: left">
			<div id="tooltip2" class="hidden">
			<p><b>Per capita cigarette consumption:</b> 
			<span id="value5"></span> (<span id="value6"></span>)
			<br>
			<b>Lung/bronchus cancer deaths per 100k women:</b> 
			<span id="value7"></span> (<span id="value8"></span>)
			</p>
			</div>
		</div>

<div class="textbox">
			<p>The dots appear chronologically on both chart, but the cigarette
			consumption data along the x-axis spans from 1930 to 2006 on the left and 
			from 1930 to 1981 on the right. The reason for this is because the second chart
			includes a 30-year delay between cigarette consumption and the lung cancer 
			death rate. This is also the reason why the correlation on the left is so 
			weak.</p>

<p>When I first plotted these two data sets, I didn't realize the importance of 
			a latency period, or the time it takes between when someone starts smoking and 
			when they might first develop lung cancer. Researcher William Weiss <a href="https://www.ncbi.nlm.nih.gov/pubmed/9149602">found</a>
			that a 30-year gap exists between when cigarette smoking increased in the U.S. 
			and the subsequent increase in lung cancer deaths. When I adjust the original 
			chart for this latency period, the relationship grows much stronger. The 
			correlation coefficient increases from .22 to .93.</p>

<p>This 30-year lag also exists in other countries. In Australia, the Sydney Morning Herald <a href="https://www.smh.com.au/national/health/sins-of-the-smokers-find-them-out-30-years-later-20141016-1170h8.html">noted</a> 
			that in 2014 lung cancer deaths continued to increase among women, even as 
			it dropped among men. The reason for this is that the increase in the number of female 
			smokers peaked decades after it did for men.</p>
		</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, Males, US, 1930-2011"</a> 
			and the American Lung Association, Trend Reports, <a href="https://www.lung.org/finding-cures/our-research/epidemiology-and-statistics-rpts.html">"Trends in Tobacco Use,"</a>
			Table 2: Cigarette Consumption, United States, 1900-2007.</p>
		</div>

var padding = [ 35, 10, 55, 50 ];

var xScale = d3.scale.linear()
				.range([ padding[3], w - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
				.range([ padding[0], h - padding[2] ]);

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

var yAxis = d3.svg.axis()
				.scale(yScale)		
				.orient("left");

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

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

var superscript = "¹²³",
				formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join(""); };

var formatComma = d3.format(",");

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

xScale.domain([ 
					d3.min(data, function(d) { return +d.nonlagCigConsumption; }), 
					d3.max(data, function(d) { return +d.nonlagCigConsumption; }),
				]);

yScale.domain([
					d3.max(data, function(d) { return +d.nonlagFemaleLungBronchus; }),
					d3.min(data, function(d) { return +d.nonlagFemaleLungBronchus - d.nonlagFemaleLungBronchus; })
				]);

for (var i = 1500; i <= 4000; i += 500) {
					svg.append("line")
						.attr({
							"class": "gridlines",
							x1: xScale(i),
							y1: padding[0],
							x2: xScale(i),
							y2: h - padding[2] + 10,
						});
				}

for (var i = 0; i <= 40; i += 5) {
					svg.append("line")
						.attr({
							"class": "gridlines",
							x1: padding[3] - 10,
							y1: yScale(i),
							x2: w - padding[1] * 6,
							y2: yScale(i),
						});
				}

chartONE.on("mouseover", function(d) {
						
						var xPosition = parseFloat(d3.select(this).attr("cx")) + 20 ;
						var yPosition = parseFloat(d3.select(this).attr("cy")) + 180 ;

d3.select("#tooltip")
							.style("left", xPosition + "px")
							.style("top", yPosition + "px")
							.select("#value1")
							.text(formatComma(d.nonlagCigConsumption));

d3.select("#tooltip")
							.select("#value2")
							.text(d.nonlagYear);

d3.select("#tooltip")
							.select("#value3")
							.text(d.nonlagFemaleLungBronchus);

d3.select("#tooltip")
							.select("#value4")
							.text(d.nonlagYear);

d3.select("#tooltip").classed("hidden", false);

})
					.on("mouseout", function() {
						d3.select("#tooltip").classed("hidden", true);
					});

chartONE.sort(function(a, b) { 
						return d3.ascending(+a.nonlagYear, +b.nonlagYear);
					})
					.transition()
					.delay(function(d, i) { return i * 150; })
					.duration(0)
					.attr({
						r: 3,
						"fill": "#CE1256",
					});

svg.append("g")
					.append("text")
					.attr("class", "chartTitle")
					.text("No lag time")
					.attr("transform", "translate(" + padding[3] + ", 15)");

svg.append("g")
					.append("text")
					.text("r" + formatPower(1) + "=.05")
					.attr("transform", "translate(" + (padding[3] + 28) + ", 110)");

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
					.call(yAxis)
					.append("text")
					.attr({
						"class": "labels",
						"transform": "rotate(-90)",
						x: -325,
						y: -30,
					})
					.text("Lung/bronchus cancer deaths per 100,000 women");

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
					.call(xAxis)
					.append("text")
					.attr({
						"class": "labels",
						x: 200,
						y: 40,
					})
					.text("Per capita cigarette consumption");

});

d3.csv("lagFemaleCigConsumption.csv", function(data) {
				xScale.domain([ 
					d3.min(data, function(d) { return +d.lagFemaleCigConsumption; }), 
					d3.max(data, function(d) { return +d.lagFemaleCigConsumption; }),
				]);

yScale.domain([
					d3.max(data, function(d) { return +d.lagFemaleLungBronchus; }),
					d3.min(data, function(d) { return +d.lagFemaleLungBronchus - d.lagFemaleLungBronchus; })
				]);

for (var i = 1500; i <= 4000; i += 500) {
					svgTWO.append("line")
						.attr({
							"class": "gridlines",
							x1: xScale(i),
							y1: padding[0],
							x2: xScale(i),
							y2: h - padding[2] + 10,
						});
				}

for (var i = 0; i <= 40; i += 5) {
					svgTWO.append("line")
						.attr({
							"class": "gridlines",
							x1: padding[3] - 10,
							y1: yScale(i),
							x2: w - padding[1] * 6,
							y2: yScale(i),
						});
				}

var chartTWO = svgTWO.selectAll("circle")
					.data(data)
					.enter()
					.append("circle");

chartTWO
					.attr({
						cx: function(d) { return xScale(d.lagFemaleCigConsumption); },
						cy: function(d) { return yScale(d.lagFemaleLungBronchus); },
						r: 1,
						"fill": "none",
					});

chartTWO.on("mouseover", function(d) {
						var xPosition = parseFloat(d3.select(this).attr("cx")) + (20 * 21);
						var yPosition = parseFloat(d3.select(this).attr("cy")) + 180 ;
						
						d3.select("#tooltip2")
							.style("left", xPosition + "px")
							.style("top", yPosition + "px")
							.select("#value5")
							.text(formatComma(d.lagFemaleCigConsumption));

d3.select("#tooltip2")
							.select("#value6")
							.text(d.lagFemaleYearCig);

d3.select("#tooltip2")
							.select("#value7")
							.text(d.lagFemaleLungBronchus);

d3.select("#tooltip2")
							.select("#value8")
							.text(d.lagYearFemaleLB);

d3.select("#tooltip2").classed("hidden", false);

})
					.on("mouseout", function() {
						d3.select("#tooltip2").classed("hidden", true);
					});

chartTWO.sort(function(a, b) { 
						return d3.ascending(+a.lagFemaleYearCig, +b.lagFemaleYearCig);
					})
					.transition()
					.delay(function(d, i) { return i * 175; })
					.duration(0)
					.attr({
						r: 3,
						"fill": "#CE1256",
					});

svgTWO.append("g")
					.append("text")
					.text("30-year lag time")
					.attr("class", "chartTitle")
					.attr("transform", "translate(" + padding[3] + ", 15)");

svgTWO.append("g")
					.append("text")
					.text("r" + formatPower(1) + "=.87")
					.attr("transform", "translate(" + (padding[3] + 28) + ", 110)");

svgTWO.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
					.call(yAxis)
					.append("text")
					.attr({
						"class": "labels",
						"transform": "rotate(-90)",
						x: -325,
						y: -30,
					})
					.text("Lung/bronchus cancer deaths per 100,000 women");

svgTWO.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
					.call(xAxis)
					.append("text")
					.attr({
						"class": "labels",
						x: 200,
						y: 40,
					})
					.text("Per capita cigarette consumption");
			});

</script>

</body>
</html>

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

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