axelson/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This simple bar chart shows the amount of buses operating in Oahu over time. As
we can see the number of buses serving Oahu has not changed much since bus
service was first introduced. While this is not a comprehensive analysis it
would appear that the level of service for TheBus has gone down or at least not
increased over time since area that TheBus serves has only increased. It would
be nice to do an analysis that would include historical coverage areas and bus
routes.
One way to increase bus service quality without an increase in funding is by
increasing frequency on core routes, hopefully getting some routes to every 10
minutes, then riders generally do not need to plan their trip around the bus
schedule because missing a single bus is not a huge issue. Where if the bus
only comes every 30 minutes (which is many routes on Oahu) then the rider may
want to get to the bus stop up to 10 minutes ahead of time, in case the bus is
early!
Data source, DBEDT Data Book:

1989-1992: http://files.hawaii.gov/dbedt/economic/databook/db2000/sec18.pdf
1993-2013: http://files.hawaii.gov/dbedt/economic/databook/2013-individual/18/182513.xls

Why the 2013 version doesn't retain the data from 1989-1992 is a mystery to me.
Also some of the numbers that overlap (1993-1999) don't agree with each other.
I've assumed that the 2013 version is more accurate.

  
## data.tsv

          
            year
            numBuses

            
              1989
              475

            
              1990
              475

            
              1991
              475

            
              1992
              475

            
              1993
              470

            
              1994
              501

            
              1995
              508

            
              1996
              523

            
              1997
              524

            
              1998
              525

            
              1999
              525

            
              2000
              525

            
              2001
              529

            
              2002
              525

            
              2003
              525

            
              2004
              536

            
              2005
              496

            
              2006
              499

            
              2007
              524

            
              2008
              528

            
              2009
              530

            
              2010
              530

            
              2011
              516

            
              2012
              515

            
              2013
              526

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.tsv", type, function(error, data) {
  if (error) throw error;

  x.domain(data.map(function(d) { return d.year; }));
  y.domain([0, d3.max(data, function(d) { return d.numBuses; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 4)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Number of Buses");

  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.year); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.numBuses); })
      .attr("height", function(d) { return height - y(d.numBuses); });
});

function type(d) {
  d.numBuses = +d.numBuses;
  return d;
}

</script>
	year	numBuses
	1989	475
	1990	475
	1991	475
	1992	475
	1993	470
	1994	501
	1995	508
	1996	523
	1997	524
	1998	525
	1999	525
	2000	525
	2001	529
	2002	525
	2003	525
	2004	536
	2005	496
	2006	499
	2007	524
	2008	528
	2009	530
	2010	530
	2011	516
	2012	515
	2013	526
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar {
	fill: steelblue;
	}

	.bar:hover {
	fill: brown;
	}

	.axis {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.tsv", type, function(error, data) {
	if (error) throw error;

	x.domain(data.map(function(d) { return d.year; }));
	y.domain([0, d3.max(data, function(d) { return d.numBuses; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 4)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Number of Buses");

	svg.selectAll(".bar")
	.data(data)
	.enter().append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.year); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.numBuses); })
	.attr("height", function(d) { return height - y(d.numBuses); });
	});

	function type(d) {
	d.numBuses = +d.numBuses;
	return d;
	}

	</script>