Chicago-Dave · April 18, 2015 20:03
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:10px; 
 				text-align: left;			
 			}
 			
 			svg, div {
 				background-color: #E0E0E0;
 			}
 				
 			.dot {
 			  	stroke: #000000;
 			  	stroke-width: 1;
 			  	stroke-opacity: .7;
 			  	fill-opacity: .7;
 			}		
 		
 			.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 xScale = d3.scale.linear()
 							.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 (d3.round(d/60));
 					})
 					.ticks(5);

 		var t_xAxis = d3.svg.axis()
 					.scale(xScale)
 					.orient("top")
 					.tickFormat(function(d) {
 						return (d3.round(d/60));
 					})
 					.ticks(5);

 		var yAxis = d3.svg.axis()
 						.scale(yScale)
 						.orient("left");
 		
 		var dist = "Trip distances and saddle times.";
 		
 		
 		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 = data.filter(function(d){
 					return d.ridedistM < 12500 && d.seconds < 2500;
 				});

 				xScale.domain([0,
 					d3.max(data, function(d) {
 						return +d.seconds;
 					})
 				]);
 				
 				
 				yScale.domain([
 					d3.max(data, function(d) { 
 						return +d.ridedistM; 
 					}),0
 				
 				]);

 				
 				var circles = svg.selectAll(".dot")
 								.data(data)
 								.enter()
 								.append("circle")
 								.attr("class","dot")
 								.attr("fill", "#00B2EE")
 								;
 							
 				circles.attr("cx", function(d) {
 							return xScale(d.seconds);
 						})
 						.attr("cy", function(d) {
 							return yScale(d.ridedistM);
 						})
 					.attr("r", 0.1);
 					
 				circles.sort(function(a, b) {
 						return d3.ascending(+a.seconds, +b.seconds);
 					})
 					.transition()
 					.delay(function(d, i) {
 						return i * 50;
 					})
 					.duration(100)
 					.attr("r", 6);
 										
 				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("ride times in minutes");		
 				
 				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(" ride distances in meters");
 								
 				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("ride times in minutes");
 		
 				gy.selectAll("g").filter(function(d) { 
 						return d; 
 					})
 		    		.classed("minor", true);
 		
 				gy.selectAll("text")
 		    		.attr("x", 4)
 		    		.attr("dy",-4)
 								
 														   									
 			});


 		</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:10px;
	text-align: left;
	}

	svg, div {
	background-color: #E0E0E0;
	}

	.dot {
	stroke: #000000;
	stroke-width: 1;
	stroke-opacity: .7;
	fill-opacity: .7;
	}

	.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 xScale = d3.scale.linear()
	.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 (d3.round(d/60));
	})
	.ticks(5);

	var t_xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("top")
	.tickFormat(function(d) {
	return (d3.round(d/60));
	})
	.ticks(5);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

	var dist = "Trip distances and saddle times.";


	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 = data.filter(function(d){
	return d.ridedistM < 12500 && d.seconds < 2500;
	});

	xScale.domain([0,
	d3.max(data, function(d) {
	return +d.seconds;
	})
	]);


	yScale.domain([
	d3.max(data, function(d) {
	return +d.ridedistM;
	}),0

	]);


	var circles = svg.selectAll(".dot")
	.data(data)
	.enter()
	.append("circle")
	.attr("class","dot")
	.attr("fill", "#00B2EE")
	;

	circles.attr("cx", function(d) {
	return xScale(d.seconds);
	})
	.attr("cy", function(d) {
	return yScale(d.ridedistM);
	})
	.attr("r", 0.1);

	circles.sort(function(a, b) {
	return d3.ascending(+a.seconds, +b.seconds);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(100)
	.attr("r", 6);

	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("ride times in minutes");

	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(" ride distances in meters");

	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("ride times in minutes");

	gy.selectAll("g").filter(function(d) {
	return d;
	})
	.classed("minor", true);

	gy.selectAll("text")
	.attr("x", 4)
	.attr("dy",-4)


	});


	</script>

	</body>
	</html>