Skip to content

Instantly share code, notes, and snippets.

@luckymike
Created April 24, 2015 23:04
Show Gist options
  • Save luckymike/f742cef8707b3dba69c2 to your computer and use it in GitHub Desktop.
Save luckymike/f742cef8707b3dba69c2 to your computer and use it in GitHub Desktop.
Historic BART Ridership Averages
Year Weekday Saturday Sunday
1973 32000
1974 57400
1975 118003
1976 131000
1977 133453
1978 146780
1979 151712
1980 148682
1981 161965
1982 184062
1983 186293
1984 202536
1985 211612
1986 204244
1987 194226
1988 198259
1989 207231 88950 52436
1990 241525 107526 66416
1991 247456 108099 65779
1992 249548 108179 68111
1993 253838 108356 68246
1994 251981 104671 67008
1995 248169 103295 66214
1996 248669 105763 70723
1997 260543 109533 72814
1998 265324 110778 74042
1999 278683 118452 80299
2000 310268 132372 91162
2001 331586 144831 103949
2002 310725 137108 96024
2003 295158 137362 100848
2004 306570 145394 104350
2005 310717 150046 108721
2006 322965 161884 116479
2007 339359 172040 124874
2008 357775 181186 132502
2009 356712 182771 130153
2010 334984 175167 125275
2011 345256 173361 126428
2012 366565 189968 138834
2013 392293 202887 148249
2014 399145 203310 150600
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>BART Destinations from Oakland and San Francisco Airports</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
}
svg {
background-color: white;
}
.axis path, line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11pt;
}
.Weekdays {
fill: steelblue;
}
.Saturdays {
fill: orange;
}
.Sundays {
fill: green;
}
p span {
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
}
</style>
</head>
<body>
<h2>BART Ridership Averages 1973-2014</h2>
<p><span style="color:steelblue">Weekday</span>, <span style="color:orange">Saturday</span>, and <span style="color:green">Sunday</span> Averages. Source: <a href="http://www.bart.gov/about/reports/averages">BART</a></p>
<script type="text/javascript">
w = 1200
h = 600
topPadding = 20
bottomPadding = 50
leftPadding = 80
rightPadding = 0
var numFormat = d3.format("0,f")
var dateFormat = d3.time.format("%Y")
var xScale = d3.time.scale()
.range([ leftPadding, w - rightPadding ]);
var yScale = d3.scale.linear()
.range([ topPadding , h - bottomPadding ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(10)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(20)
.orient("left");
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("BART_Ridership_FY73_FY14.csv", function(data) {
var dataset = [
{ day: "Weekdays",
riders: data.map(function(d) {
var obj = {};
obj['year'] = d.Year;
obj['averages'] = d.Weekday;
return obj;
})
},
{ day: "Saturdays",
riders: data.map(function(d) {
var obj = {};
obj['year'] = d.Year;
obj['averages'] = d.Saturday;
return obj;
})
},
{ day: "Sundays",
riders: data.map(function(d) {
var obj = {};
obj['year'] = d.Year;
obj['averages'] = d.Sunday;
return obj;
})
}
]
xScale.domain([
d3.min(data, function(d) {
return dateFormat.parse(d.Year);
}),
d3.max(data, function(d) {
return dateFormat.parse(d.Year);
})
]);
yScale.domain([d3.max(data, function(d) {
return +d.Weekday;
}), 0 ]);
var area = d3.svg.area()
.x(function(d) {
return xScale(dateFormat.parse(d.year))
})
.y0(h - bottomPadding)
.y1(function(d) {
return yScale(+d.averages)
});
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.attr("class", function(d) {
return d.day;
});
groups.append("title")
.text(function(d) {
return "Average Ridership on " + d.day ;
});
groups.selectAll("path")
.data(function(d) {
return [ d.riders ];
})
.enter()
.append("path")
.attr("class", "area")
.attr("d", area)
.attr("stroke", "none");
dataset.forEach(function(set) {
var circles = svg.selectAll("circles")
.data(set.riders)
.enter()
.append("circle");
circles.attr("cx", function(d) {
return xScale(dateFormat.parse(d.year))
})
.attr("cy", function(d) {
return yScale(+d.averages);
})
.attr("r", 5)
.attr("class", function(d) {
return set.day + " " + d.year;
})
.attr("display", function(d) {
if (d.averages == 0)
return "none";
})
.append("title")
.text(function(d) {
return "Average " + set.day + " Ridership in " + d.year + ": " + numFormat(+d.averages);
})
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - bottomPadding) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (leftPadding - 10) + ", 0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment