Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
Last active August 29, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mpmckenna8/11305775 to your computer and use it in GitHub Desktop.
Save mpmckenna8/11305775 to your computer and use it in GitHub Desktop.
Top 3 Bay Area Bike Share Stations in Trips from per city d3 Bar Chart

Starting to look through the trips csv included in this dataset I thought it would be interesting to see which stations were used the most for the given period(8/29/2013-2/28/2014). The thing that popped out was that the San Francisco Stations had drastically higher numbers of trips from their stations. I figured an effective way to show this stark comparison would be to put the top three stations from each Bay Area Bike Share "city" on a bar chart and there you go.

Now I need to make it better, and further look into the data for other relationships. I liked a to from aggregation I did w/ the trips data as well to show the most popular Start Station to End Station rides on the system but haven't decided how to put that together yet.

For now there's some stuff I'm doing/have done w/ Bay Area Bike Share data in https://github.com/mpmckenna8/sfbikeshare

Use it or improve it please.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bike Data</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="./takeOffBABS.js"></script>
<style type="text/css">
svg{
background:#DCDCDC;
}
.bars {
fill:#00FFFF;
}
.rwc{
fill:green;
}
.pab{
fill:yellow;
}
.sj{
fill:#B22222;
}
.mtv{
fill:purple;
}
.labmtv{
font: 8px sans-serif;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em purple,
0 0 0.2em purple;
}
.labsf{
font: 8px sans-serif;
background:orange;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #00FFFF,
0 0 0.2em #00FFFF;
}
.labsj{
font: 8px sans-serif;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #B22222,
0 0 0.2em #B22222;
}
.labpab{
font: 8px sans-serif;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em yellow,
0 0 0.2em yellow;
}
.labrwc{
font: 8px sans-serif;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em green,
0 0 0.2em green;
}
.bars:hover {
fill: brown;
font: 10px sans-serif;
color:black
}
.axis {
font: 9px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
stroke:black;
}
#key{
background:white;
width:180px;
padding:5px;
position:absolute;
margin-left: 220px;
margin-top:35px;
border-style:solid;
border-width:3px;
}
.sfer{
background:#00FFFF;
width:20px;
height:15px;
float:right;
margin-right:10px
}
.sjer{
background:#B22222;
width:20px;
height:15px;
float:right;
margin-right:10px
}
.mtver{
background:purple;
width:20px;
height:15px;
float:right;
margin-right:10px
}
.rwer{
background:green;
width:20px;
height:15px;
float:right;
margin-right:10px
}
.paer{
background:yellow;
width:20px;
height:15px;
float:right;
margin-right:10px
}
/* No style rules here yet */
.hov{
fill:white;
opacity:0;
}
.tooltip{
position:absolute;
background:white;
margin:5px 5 5 5;
}
</style>
</head>
<body>
<div id='key'>San Francisco<div class="sfer"></div>
<div>San Jose <div class="sjer"></div> </div>
<div>Mountain View <div class="mtver"></div> </div>
<div>Palo Alto <div class="paer"></div> </div>
<div>Redwood City <div class="rwer"></div> </div>
</div>
<div class="tooltip"></div>
<script type="text/javascript">
//Width and height
var margin = {top: 20, right: 20, bottom: 30, left: 85};
var w = 1000- margin.left - margin.right,
barheight= 20;
var h= 500 - margin.top - margin.bottom,
barPadding = 16;
var x = d3.scale.ordinal()
.range([0, w+20])
.domain(50);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
;
var y = d3.scale.linear()
.domain([0,10000])
.range([ h,40]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var axisp= h;
/*
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
// .text("a simple tooltip");
;
*/
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll("rect")
.data(leave)
.enter()
.append("rect")
.attr("x", function(d, i) { return i * (w / leave.length) + 15; })
.attr("y", function(d) {
return h - (d.numTrips / 25);
})
.attr("width", w / leave.length - barPadding)
.attr("height", function(d) {
//console.log(d)
return d.numTrips / 25;
})
.attr("class",function(d){
if(d.city === "Redwood City"){
return "rwc"
}
else if(d.city ==="Palo Alto"){return "pab"}
else if(d.city ==="San Jose"){return "sj"}
else if(d.city ==="Mountain View"){return "mtv"}
else{return "bars"}
})
.on("click", function(d){
console.log(d)
})
svg.selectAll("text")
.data(leave).enter().append("text")
.attr("x", function(d, i) {
return i * (w / leave.length) +35;
} )
.attr("y", function(d,i){
if(i%2===0){
return h+20;
}
else{return h+10}
})
// .attr("transform", "rotate(-45)")
.attr("class", function(d){
if(d.city === "Redwood City"){
return "labrwc"
}
else if(d.city ==="Palo Alto"){return "labpab"}
else if(d.city ==="San Jose"){return "labsj"}
else if(d.city ==="Mountain View"){return "labmtv"}
else{return "labsf"}
})
.text(function(d,i){
return (d._id)
})
.style("text-anchor","middle")
svg.append("g")
.attr("class", "x axis")
.call(xAxis)
.attr("transform", "translate(0," + axisp + ")")
.append("text")
.style("text-anchor","middle")
.text("Bike Share Stations")
.attr("y", 30)
.attr("x",axisp);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 10)
.attr("x", -40)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Trips Total");
svg.append("g")
.attr("class", "x axis")
.call(xAxis)
.attr("transform", "translate(0," + axisp + ")")
.append("text")
.style("text-anchor","middle")
.text("Bike Share Stations")
.attr("y", 30)
.attr("x",axisp)
svg.selectAll("hovs")
.data(leave)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (w / leave.length) + 15;
})
.attr("height", function(d) {
//console.log(d)
return d.numTrips / 25;
})
.attr("width", w / leave.length - barPadding)
.attr("height", function(d) {
//console.log(d)
return h -30;
})
.attr("class",function(d){
return "hov"
})
// some events going on
.on("click", function(d,i){
console.log(d._id +i)
})
.on("mouseover", function(d,i){
var xposit = function() {
// console.log(i)
var left = 55;
return left*i+"px";
};
//parseFloat(d3.select(this).attr("x")) + x.rangeBand() / 2;
var yposit = 200;
d3.select(".tooltip")
.style("left", xposit )
.style("top", yposit + "px")
// .select("#value")
.text(d._id +" with "+ d.numTrips + " trips")
// .append("<a href=\'www.openstreetmap.org/#map=18/37.79231/-122.39723&layers=C\'>OSM</a>");
//show the tooltip
d3.select(".tooltip").classed("hidden",false);
})
.on("mouseout",function(){
//take away the tooltip
d3.select(".tooltip").classed("hidden",true);
});
</script>
</body>
</html>
var leave = [
{
"_id" : "San Mateo County Center",
"numTrips" : 101,
"city":"Redwood City"
},
{
"_id" : "Cowper at University",
"numTrips" : 355,
"city":"Palo Alto"
},
{
"_id" : "San Antonio Caltrain Station",
"numTrips" : 238,
"city":"Mountain View"
},
{
"_id" : "Paseo de San Antonio",
"numTrips" : 745,
"city":"San Jose"
},
{
"_id" : "Embarcadero at Sansome",
"numTrips" : 6545,
"city":"San Francisco"
},
{
"_id" : "Redwood City Medical Center",
"numTrips" : 123,
"city":"Redwood City"
},
{
"_id" : "Palo Alto Caltrain Station",
"numTrips" : 431,
"city":"Palo Alto"
},
{
"_id" : "Mountain View City Hall",
"numTrips" : 630,
"city":"Mountain View"
},
{
"_id" : "Santa Clara at Almaden",
"numTrips" : 855,
"city":"San Jose"
},
{
"_id" : "Harry Bridges Plaza (Ferry Building)",
"numTrips" : 7343,
"city":"San Francisco"
},
{
"_id" : "Redwood City Caltrain Station",
"numTrips" : 378,
"city":"Redwood City"
},
{
"_id" : "University and Emerson",
"numTrips" : 434,
"city":"Palo Alto"
},
{
"_id" : "Mountain View Caltrain Station",
"numTrips" : 1154,
"city":"Mountain View"
},
{
"_id" : "San Jose Diridon Caltrain Station",
"numTrips" : 1972,
"city":"San Jose"
},
{
"_id" : "San Francisco Caltrain (Townsend at 4th)",
"numTrips" : 9838,
"city":"San Franciso"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment