Assignment Week 3

<!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:150px;
				;
			}
			
			svg, div {
				background-color: #E0E0E0;
			}
			
			h1, p {
				position: relative;
				left: 5px;
				color: #F8F8FF; 
			}
			
		div {text-align:center; width:800px; font-size:20px; color: #000000;
			font-weight:bold; padding-top:10px; padding-bottom:10px; 
		}
		
		</style>		
	</head>
	<body>
		
		<script type="text/javascript" >
		d3.select("body").append("h1").text("Chicago Divvy BikeShare 1 Sep 2013 to 31 Aug 2014");
		var dist = "West Loop Trip Distances in Meters";
				
		d3.select("body").append("div").text(dist);
			
			var svg = d3.select("body")
						.append("svg")
						.attr("width", 800)
						.attr("height",500)
						;
			
			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.ridedistM > 5500 });
				
				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect")
								.attr("fill", "#00B2EE");
								
				rects.attr("x", 0)
					.attr("y", function(d,i) {
						return i * 16;
					})
					.attr("width", function(d) {
						return d.ridedistM * 0.04;	
					})
					.attr("height", 14);
			
				
				svg.selectAll("text")
					.data(data)
					.enter()
					.append("text")
					.text(function(d) {
						return d.ridedistM;
					})
					.attr("x", function(d) {
						return ("width", d.ridedistM * 0.04) - 26;
					})
					.attr("y", function(d,i) {
						return i * 16 + 10;
						
					})
					.attr("font-family", "sans-serif")
					.attr("font-size","9px")
					.attr("fill", "white")
					.attr("text-anchor", "right")
					;
								
								   									
				});

</script>

</body>
</html>

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

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