mendozaline/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Module 5 Exercise</title>
		<script type="text/javascript" src="http://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="http://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="http://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="http://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="http://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="http://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>

		<script type="text/javascript">
			var h = 400;
			var w = 400;

			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),
						});
				}

				var chartONE = svg.selectAll("circle")
					.data(data)
					.enter()
					.append("circle")

				chartONE.attr({
						cx: function(d) { return xScale(d.nonlagCigConsumption); },
						cy: function(d) { return yScale(d.nonlagFemaleLungBronchus); },
						r: 1,
						"fill": "none",
					});

				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>

## lagFemaleCigConsumption.csv

          
            lagFemaleYearCig
            lagFemaleCigConsumption
            lagYearFemaleLB
            lagFemaleLungBronchus

            
              1930
              1485
              1960
              6.9

            
              1931
              1399
              1961
              7.4

            
              1932
              1245
              1962
              7.6

            
              1933
              1334
              1963
              8.1

            
              1934
              1483
              1964
              8.3

            
              1935
              1564
              1965
              8.9

            
              1936
              1754
              1966
              9.6

            
              1937
              1847
              1967
              10.1

            
              1938
              1830
              1968
              11.8

            
              1939
              1900
              1969
              12.5

            
              1940
              1976
              1970
              13.3

            
              1941
              2236
              1971
              14.4

            
              1942
              2585
              1972
              15.2

            
              1943
              2956
              1973
              15.8

            
              1944
              3039
              1974
              16.9

            
              1945
              3449
              1975
              17.8

            
              1946
              3446
              1976
              19.2

            
              1947
              3416
              1977
              20.3

            
              1948
              3505
              1978
              21.7

            
              1949
              3480
              1979
              22.5

            
              1950
              3522
              1980
              24.3

            
              1951
              3744
              1981
              25.1

            
              1952
              3886
              1982
              26.7

            
              1953
              3778
              1983
              28.3

            
              1954
              3546
              1984
              29.1

            
              1955
              3597
              1985
              30.6

            
              1956
              3650
              1986
              31.6

            
              1957
              3755
              1987
              32.9

            
              1958
              3953
              1988
              34.3

            
              1959
              4073
              1989
              35.9

            
              1960
              4171
              1990
              37

            
              1961
              4266
              1991
              37.8

            
              1962
              4266
              1992
              38.9

            
              1963
              4345
              1993
              39.4

            
              1964
              4195
              1994
              39.8

            
              1965
              4259
              1995
              40.4

            
              1966
              4287
              1996
              40.6

            
              1967
              4280
              1997
              40.9

            
              1968
              4186
              1998
              41.1

            
              1969
              3993
              1999
              40.3

            
              1970
              3985
              2000
              41.2

            
              1971
              4037
              2001
              41.1

            
              1972
              4043
              2002
              41.7

            
              1973
              4148
              2003
              41.4

            
              1974
              4141
              2004
              41

            
              1975
              4123
              2005
              40.8

            
              1976
              4092
              2006
              40.3

            
              1977
              4051
              2007
              40.2

            
              1978
              3967
              2008
              39.2

            
              1979
              3861
              2009
              38.7

            
              1980
              3851
              2010
              38

            
              1981
              3840
              2011
              37.1

## nonlagFemaleCigConsumption.csv

          
            nonlagYear
            nonlagCigConsumption
            nonlagFemaleLungBronchus

            
              1930
              1485
              2.6

            
              1931
              1399
              2.6

            
              1932
              1245
              2.8

            
              1933
              1334
              3

            
              1934
              1483
              3.1

            
              1935
              1564
              3.5

            
              1936
              1754
              3.9

            
              1937
              1847
              3.8

            
              1938
              1830
              4.1

            
              1939
              1900
              4.1

            
              1940
              1976
              4.1

            
              1941
              2236
              4.6

            
              1942
              2585
              4.7

            
              1943
              2956
              4.9

            
              1944
              3039
              5.1

            
              1945
              3449
              5.3

            
              1946
              3446
              5.5

            
              1947
              3416
              6.1

            
              1948
              3505
              6.4

            
              1949
              3480
              5.6

            
              1950
              3522
              5.8

            
              1951
              3744
              5.9

            
              1952
              3886
              6.1

            
              1953
              3778
              6

            
              1954
              3546
              6

            
              1955
              3597
              6.2

            
              1956
              3650
              6.3

            
              1957
              3755
              6.4

            
              1958
              3953
              6.7

            
              1959
              4073
              6.7

            
              1960
              4171
              6.9

            
              1961
              4266
              7.4

            
              1962
              4266
              7.6

            
              1963
              4345
              8.1

            
              1964
              4195
              8.3

            
              1965
              4259
              8.9

            
              1966
              4287
              9.6

            
              1967
              4280
              10.1

            
              1968
              4186
              11.8

            
              1969
              3993
              12.5

            
              1970
              3985
              13.3

            
              1971
              4037
              14.4

            
              1972
              4043
              15.2

            
              1973
              4148
              15.8

            
              1974
              4141
              16.9

            
              1975
              4123
              17.8

            
              1976
              4092
              19.2

            
              1977
              4051
              20.3

            
              1978
              3967
              21.7

            
              1979
              3861
              22.5

            
              1980
              3851
              24.3

            
              1981
              3840
              25.1

            
              1982
              3746
              26.7

            
              1983
              3494
              28.3

            
              1984
              3454
              29.1

            
              1985
              3461
              30.6

            
              1986
              3271
              31.6

            
              1987
              3188
              32.9

            
              1988
              3082
              34.3

            
              1989
              2924
              35.9

            
              1990
              2827
              37

            
              1991
              2719
              37.8

            
              1992
              2640
              38.9

            
              1993
              2543
              39.4

            
              1994
              2524
              39.8

            
              1995
              2505
              40.4

            
              1996
              2482
              40.6

            
              1997
              2423
              40.9

            
              1998
              2320
              41.1

            
              1999
              2136
              40.3

            
              2000
              2056
              41.2

            
              2001
              2026
              41.1

            
              2002
              1979
              41.7

            
              2003
              1837
              41.4

            
              2004
              1791
              41

            
              2005
              2161
              40.8

            
              2006
              1691
              40.3
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Module 5 Exercise</title>
	<script type="text/javascript" src="http://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="http://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 — 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="http://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="http://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 & Figures 2015,
	<a href="http://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="http://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>

	<script type="text/javascript">
	var h = 400;
	var w = 400;

	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),
	});
	}

	var chartONE = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")

	chartONE.attr({
	cx: function(d) { return xScale(d.nonlagCigConsumption); },
	cy: function(d) { return yScale(d.nonlagFemaleLungBronchus); },
	r: 1,
	"fill": "none",
	});

	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>
lagFemaleYearCig	lagFemaleCigConsumption	lagYearFemaleLB	lagFemaleLungBronchus
1930	1485	1960	6.9
1931	1399	1961	7.4
1932	1245	1962	7.6
1933	1334	1963	8.1
1934	1483	1964	8.3
1935	1564	1965	8.9
1936	1754	1966	9.6
1937	1847	1967	10.1
1938	1830	1968	11.8
1939	1900	1969	12.5
1940	1976	1970	13.3
1941	2236	1971	14.4
1942	2585	1972	15.2
1943	2956	1973	15.8
1944	3039	1974	16.9
1945	3449	1975	17.8
1946	3446	1976	19.2
1947	3416	1977	20.3
1948	3505	1978	21.7
1949	3480	1979	22.5
1950	3522	1980	24.3
1951	3744	1981	25.1
1952	3886	1982	26.7
1953	3778	1983	28.3
1954	3546	1984	29.1
1955	3597	1985	30.6
1956	3650	1986	31.6
1957	3755	1987	32.9
1958	3953	1988	34.3
1959	4073	1989	35.9
1960	4171	1990	37
1961	4266	1991	37.8
1962	4266	1992	38.9
1963	4345	1993	39.4
1964	4195	1994	39.8
1965	4259	1995	40.4
1966	4287	1996	40.6
1967	4280	1997	40.9
1968	4186	1998	41.1
1969	3993	1999	40.3
1970	3985	2000	41.2
1971	4037	2001	41.1
1972	4043	2002	41.7
1973	4148	2003	41.4
1974	4141	2004	41
1975	4123	2005	40.8
1976	4092	2006	40.3
1977	4051	2007	40.2
1978	3967	2008	39.2
1979	3861	2009	38.7
1980	3851	2010	38
1981	3840	2011	37.1
nonlagYear	nonlagCigConsumption	nonlagFemaleLungBronchus
1930	1485	2.6
1931	1399	2.6
1932	1245	2.8
1933	1334	3
1934	1483	3.1
1935	1564	3.5
1936	1754	3.9
1937	1847	3.8
1938	1830	4.1
1939	1900	4.1
1940	1976	4.1
1941	2236	4.6
1942	2585	4.7
1943	2956	4.9
1944	3039	5.1
1945	3449	5.3
1946	3446	5.5
1947	3416	6.1
1948	3505	6.4
1949	3480	5.6
1950	3522	5.8
1951	3744	5.9
1952	3886	6.1
1953	3778	6
1954	3546	6
1955	3597	6.2
1956	3650	6.3
1957	3755	6.4
1958	3953	6.7
1959	4073	6.7
1960	4171	6.9
1961	4266	7.4
1962	4266	7.6
1963	4345	8.1
1964	4195	8.3
1965	4259	8.9
1966	4287	9.6
1967	4280	10.1
1968	4186	11.8
1969	3993	12.5
1970	3985	13.3
1971	4037	14.4
1972	4043	15.2
1973	4148	15.8
1974	4141	16.9
1975	4123	17.8
1976	4092	19.2
1977	4051	20.3
1978	3967	21.7
1979	3861	22.5
1980	3851	24.3
1981	3840	25.1
1982	3746	26.7
1983	3494	28.3
1984	3454	29.1
1985	3461	30.6
1986	3271	31.6
1987	3188	32.9
1988	3082	34.3
1989	2924	35.9
1990	2827	37
1991	2719	37.8
1992	2640	38.9
1993	2543	39.4
1994	2524	39.8
1995	2505	40.4
1996	2482	40.6
1997	2423	40.9
1998	2320	41.1
1999	2136	40.3
2000	2056	41.2
2001	2026	41.1
2002	1979	41.7
2003	1837	41.4
2004	1791	41
2005	2161	40.8
2006	1691	40.3