Assignment Week 6

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Divvy_Distances</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js">
		</script>
		<style type="text/css">
			
			body {	
				background-color: #8B8878;
				font-family: helvetica;
				font-weight: bold; 
				margin-left:10px; 
				text-align: left;			
			}
			
			svg, div {
				background-color: #E0E0E0;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis minor line {
			  	stroke: #777;
			  	stroke-dasharray: 2,2;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
					
			
			h1 {
				font-size: 32px;
				margin: 0;
				color: #F8F8FF;
			}
			
			
			p {
				position: relative;
				margin: 0;
				left: 1px;
				color: #F8F8FF; 
			}
	
			div {
				text-align:left; 
				width:990px; 
				font-size:16px; 
				color: #000000;
				font-weight:bold; 
				padding-left:10px; 
				padding-bottom:10px;
				padding-top:10px; 
			}
		
		</style>		
	</head>
	<body>
	
		
		<h1>Chicago Divvy BikeShare</h1>
		
		<script type="text/javascript" >
		
		var w = 1000;
		var h = 1000;
		var padding = [20, 10, 50, 200];
		
		
		var dateFormat = d3.time.format("%d-%m-%Y");
		
	
		var xScale = d3.time.scale()
							.range([padding[2] + 75, w-padding[3] + 100]);
							
		var yScale = d3.scale.linear()
							.range([padding[2], h-padding[2]]);
		
		
		var xAxis = d3.svg.axis()
					.scale(xScale)
					.orient("bottom")
					.tickFormat(function(d) {
						return dateFormat(d);
					})
					.ticks(12);

var t_xAxis = d3.svg.axis()
					.scale(xScale)
					.orient("top")
					.tickFormat(function(d) {
						return dateFormat(d);
					})
					.ticks(12);

var yAxis = d3.svg.axis()
						.scale(yScale)
						.orient("left");
		
		var dist = "Rental Activity at 2 Divvy Stations for Study Range";
		
		
		var line = d3.svg.line()
			.x(function(d) {
				return xScale(dateFormat.parse(d.startdate));
				})
			.y(function(d) {
				return yScale(d.tempM)
				});
	
		
		d3.select("body").append("div").text(dist);
			
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height",h)
					;
				
			d3.csv("Chicago_DivvyBikeShare_01pct.csv", function(data) {

xScale.domain([
					d3.min(data, function(d) {
						return dateFormat.parse(d.startdate);
					}),
					
					d3.max(data, function(d) {
						return dateFormat.parse(d.startdate);
					})
				]);
				
				
				yScale.domain([
					d3.max(data, function(d) { 
						return d3.mean(d.tempM); 
					}),
					d3.min(data, function(d) {
						return d3.mean(d.tempM);
					})
				]);
									
				svg.data([data])
					.append("path")
					.attr("class","line Divvy")
					.attr("d", line)
					.attr("fill", "none")
					.attr("stroke", "steelblue")
					.attr("stroke-width", 2);
					
										
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call(xAxis)
					.append("text")
					.attr("class","label")
					.attr("x", 900)
					.attr("y", -10)
					.style("text-anchor", "end")
					.text("Months in Study Range");		
				
				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3]-100) + ",0)")
					.call(yAxis)
					.append("text")
					.attr("class","label")
					.attr("transform", "rotate(-90)")
					.attr("y", 10)
					.attr("x", -50)
					.attr("dy", ".75em")
					.style("text-anchor", "end")
					.text("Average Temperatures");
								
				var gy = svg.append("g")
		   				 .attr("class", "x axis")
		   				 .attr("transform", "translate(0," + (h-padding[3] *4.8) + ")")
		   				 .call(t_xAxis)
		   				 .append("text")
		   				 .attr("class","label")
		   				 .attr("x", 875)
		   				 .attr("y", 18)
		   				 .style("text-anchor", "end")
		   				 .text("Months in Study Range");
		
				gy.selectAll("g").filter(function(d) { 
						return d; 
					})
		    		.classed("minor", true);
		
				gy.selectAll("text")
		    		.attr("x", 4)
		    		.attr("dy",-4)
								
														   									
			});

</script>

</body>
</html>

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

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