Chicago-Dave · August 29, 2015 14:18
diff --git a/Chicago_DivvyBikeShare_01pct.csv b/Chicago_DivvyBikeShare_01pct.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Divvy_Distances</title>
 		<script type="text/javascript" src="http://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>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Divvy_Distances</title>
	<script type="text/javascript" src="http://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>