Philadelphia Weather History

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Philadelphia Weather History</title>
		<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style type="text/css">
		body {
		}
		.bar {
		  	fill: steelblue;
		  	opacity: .6;
		}
		.overlay {
			fill: white;
			opacity: .5;
		}
		.overlay:hover {
			opacity: 0;
		}
		.labels {
			font: 12px sans-serif;
			fill: black;
		}
		.axis path,
		.axis line {
		  	fill: none;
		  	stroke: #e0e0e0;
		  	shape-rendering: crispEdges;
		}
		.x.axis {
			font: 10px sans-serif;
			fill: #c0c0c0;
		}
		.y.axis {
			font: 10px sans-serif;
			fill: #c0c0c0;
		}
		.x.axis path {
		  	display: none;
		}
		.area {
		  	fill: #a0a0a0;
		  	opacity: .7;
		  	
		}
		.line {
		  	fill: none;
		  	stroke: white;
		}
		</style>
	</head>
	<body>
		<div id="container">
				<script type="text/javascript">
				//conventional margins
				var margin = {top: 40, right: 160, bottom: 40, left: 40};
				
				var width = 960 - margin.left - margin.right,
					height = 500 - margin.top - margin.bottom;
					
				var svg = d3.select('#container').append('svg')
					.attr('width', width + margin.left + margin.right)
					.attr('height', height + margin.top + margin.bottom)
					.append('g')
					.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
				//conventional margins end
				
				var parseDate = d3.time.format('%Y').parse;
				
				//scales
				var xA = d3.time.scale()
					.range([0,width]);
				
				var xB = d3.scale.ordinal()
					.rangeBands([0, width], .25, .25);
					
				var yA = d3.scale.linear()
					.range([height, 0]);
					
				var yB = d3.scale.linear()
					.range([height, 0]);
					
				//axes
				var xAxis = d3.svg.axis()
					.scale(xA)
					.orient('bottom')
					.ticks(10);
				
				var yAxisA = d3.svg.axis()
					.scale(yA)
					.orient('left');
				
				var yAxisB = d3.svg.axis()
					.scale(yB)
					.orient('right');				
				
				//area chart
				var area = d3.svg.area()
					.x(function(d) { return xA(d.Year); })
					.y0(function(d) { return yA(d.DecJanFeb); })
					.y1(function(d) { return yA(d.JunJulAug); });
				
				//line chart	
				var line = d3.svg.line()
					.x(function(d) { return xA(d.Year); })
					.y(function(d) { return yA(d.Mean); });
					
				//data
				d3.csv('temps.csv', function(error, data) {
					data.forEach(function(d) {
						d.Year = parseDate(d.Year);
						d.Mean = +d.Mean;
						d.DecJanFeb = +d.DecJanFeb;
						d.JunJulAug = +d.JunJulAug;
						d.Snowfall = +d.Snowfall;
					});
					
					//domains for the scales
					xA.domain(d3.extent(data, function(d) { return d.Year; }));
					xB.domain(data.map(function(d) { return d.Year; }));
					yA.domain([0,100]);
					yB.domain([0,100]);

svg.append('path')
						.datum(data)
						.attr('class', 'area')
						.attr('d', area);
							
					svg.selectAll('.bar')
						.data(data)
						.enter().append("rect")
						.attr("class", "bar")
						.attr("x", function(d) { return xB(d.Year); })
						.attr("width", xB.rangeBand())
						.attr("y", function(d) { return yB(d.Snowfall); })
						.attr("height", function(d) { return height - yB(d.Snowfall); });
					
					svg.append('path')
						.datum(data)
						.attr('class', 'line')
						.attr('d', line);
					
					svg.selectAll('.overlay')
						.data(data)
						.enter().append("rect")
						.attr("class", "overlay")
						.attr("x", function(d) { return xB(d.Year); })
						.attr("width", xB.rangeBand())
						.attr("y", 0)
						.attr("height", height)
						.on('mouseover', function(d) {
								xTip = parseFloat(d3.select(this).attr('x'));
								
							svg.append('text')
								.data(data)
								.attr('class', 'labels')
								.attr('id', 'tooltip0')
								.attr('x', xTip - 35)
								.attr('y', yB(d.Snowfall) - 5)
								.text(d.Snowfall + 'in');
								
							svg.append('text')
								.data(data)
								.attr('class', 'labels')
								.attr('id', 'tooltip1')
								.attr('x', xTip + 5)
								.attr('y', yB(d.Mean) - 5)
								.text(' Average ' + d.Mean + 'º');
								
							svg.append('text')
								.data(data)
								.attr('class', 'labels')
								.attr('id', 'tooltip2')
								.attr('x', xTip + 5)
								.attr('y', yB(d.JunJulAug) - 5)
								.text(' Jun-Jul-Aug average: ' + d.JunJulAug + 'º');
								
							svg.append('text')
								.data(data)
								.attr('class', 'labels')
								.attr('id', 'tooltip3')
								.attr('x', xTip + 5)
								.attr('y', yB(d.DecJanFeb) - 5)
								.text(' Dec-Jan-Feb average: ' + d.DecJanFeb + 'º');
							})
						.on('mouseout', function() {
							d3.select('#tooltip0').remove()
							d3.select('#tooltip1').remove()
							d3.select('#tooltip2').remove()
							d3.select('#tooltip3').remove();
							});
							
											
					svg.append('g')
						.attr('class', 'x axis')
						.call(xAxis)
						.append('text')
						.attr('x', width - 100)
						.attr('y', -16)
						.attr("dy", ".71em")
						.text("source: Franklin Institute");
						
					svg.append("g")
						.attr("class", "y axis")
						.call(yAxisA)
						.append("text")
						.attr("transform", "rotate(-90)")
						.attr("y", 6)
						.attr("dy", ".71em")
						.style("text-anchor", "end")
						.text("Temp.(ºF) 1875-1990");
						
					svg.append("g")
						.attr("class", "y axis")
						.attr("transform", "translate(" + width + ", 0)")
						.call(yAxisB)
						.append("text")
						.attr("x", -110)
						.attr("y", height + 10)
						.attr("dy", ".71em")
						.style("text-anchor", "start")
						.text("Snowfall(in.) 1875-1990");
									
				});
				</script>
		</div>
	</body>
</html>

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

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