Assignment Week 4

<!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; 
			}
			
			.y.axis path,
			.y.axis line {
				opacity: 0;
			}	
	
			
			div {text-align:left; width:600px; font-size:16px; color: #000000;
				font-weight:bold; padding-left:200px; padding-bottom:10px;
				padding-top:10px; 
			}
		
		</style>		
	</head>
	<body>
	
		
		<h1>Chicago Divvy BikeShare</h1>
		
		<script type="text/javascript" >
		
		var w = 800;
		var h = 700;
		var padding = [20, 10, 20, 200];
		
		
		var widthScale = d3.scale.linear()
							.range([ 0, w - padding[0] - padding[3] ]);
							
		var heightScale = d3.scale.ordinal()
							.rangeBands([ padding[0], h - padding[2] ],.1);
		
		
		var xAxis = d3.svg.axis()
					.scale(widthScale)
					.orient("bottom")
					.ticks(5);

var t_xAxis = d3.svg.axis()
					.scale(widthScale)
					.orient("top")
					.ticks(5);

var yAxis = d3.svg.axis()
						.scale(heightScale)
						.orient("left");
		
		var dist = "Originating Loop station location, trip distances in meters.";

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) {

data.sort(function(a, b) {
					return d3.descending(+a.ridedistM, b.ridedistM);
				});

data = data.filter(function(d){
					return d.ridedistM < 20000 && d.start_zone == "West Loop";
				});

widthScale.domain([ 0, d3.max(data, function(d) {return +d.ridedistM;
				})]);
				
				
				heightScale.domain(data.map(function(d) { return d.from_station_name; 
				}));

</script>

</body>
</html>

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

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