davidski/2013_NBPD_Bike_Counts_edit.csv

## 2013_NBPD_Bike_Counts_edit.csv

          
            Location
            01-01-2013
            05-01-2013
            07-01-2013
            09-01-2013

            
              Linden Ave N and N 130th St
              61
              255
              244
              186

            
              Greenwood Ave N and N 85th St
              39
              103
              82
              79

            
              NE Ravenna Blvd, E Green Lake Way N/NE 71st St
              176
              408
              420
              492

            
              32nd Ave NW and NW 54th St
              81
              298
              212
              258

            
              NW Market St and 24th Ave NW/Shilshole Ave NW
              135
              415
              481
              424

            
              15th Ave NW and NW Market St
              82
              92
              73
              85

            
              N 45th St and Stone Way N
              126
              328
              320
              382

            
              Lake City Way and NE 125th St
              52
              73
              109
              116

            
              NE Northgate Way and 5th Ave NE
              36
              28
              56
              51

            
              12th Ave NE and NE 65th St
              102
              68
              151
              88

            
              Sand Point Way NE at NE 65th St
              24
              160
              415
              204

            
              NE 45th St and Brooklyn Ave NE
              188
              212
              224
              254

            
              Montlake Blvd NE and NE Pacific St 
              378
              809
              826
              872

            
              15th Ave W and W Nickerson St (Ballard Bridge)
              108
              182
              205
              42

            
              32nd Ave W and W McGraw St
              4
              36
              77
              45

            
              Queen Anne Ave N and Boston St
              22
              62
              98
              58

            
              Westlake Ave N and Valley St
              145
              406
              395
              480

            
              Fairview Ave N and Valley St
              16
              120
              93
              122

            
              Mercer St and 9th Ave N
              87
              245
              276
              291

            
              Mercer St and Fairview Ave N
              23
              78
              100
              81

            
              Dexter Ave N and Denny Way
              316
              800
              706
              635

            
              Alaskan Way and Broad St
              204
              676
              840
              697

            
              5th Ave and Stewart St (McGraw Square)
              143
              248
              232
              254

            
              Boren Ave and Pine St
              172
              373
              414
              380

            
              Madison St and 6th Ave
              51
              79
              75
              84

            
              Colman Dock (Alaskan Way and Columbia)
              123
              270
              474
              288

            
              Eastlake Ave E and Furhman Ave E (University Bridge)
              384
              917
              984
              915

            
              Broadway E and E John St
              134
              266
              183
              329

            
              E Pine St and Broadway E
              180
              365
              404
              2675

            
              12th Ave and Madison St/Union St
              190
              460
              469
              558

            
              23rd Ave E and E Union St
              50
              107
              104
              131

            
              1st Ave S and S Jackson St
              121
              326
              309
              407

            
              7th Ave S and S Jackson St
              48
              133
              170
              859

            
              8th Ave S and S Dearborn St
              95
              271
              200
              405

            
              1st Ave S and S Lander St
              62
              150
              112
              161

            
              E Marginal Way S and S Hanford St
              127
              545
              418
              429

            
              35th Ave SW and SW Avalon Way
              71
              149
              170
              126

            
              California Ave SW and SW Alaska St
              32
              105
              61
              75

            
              California Ave SW and Fauntleroy Way SW
              37
              185
              152
              51

            
              Fauntleroy Way SW and SW Cloverdale St
              21
              88
              107
              77

            
              26th Ave SW and SW Barton St
              7
              37
              41
              40

            
              8th Ave S and S Cloverdale St
              21
              95
              115
              69

            
              Airport Way S and S Vale St
              19
              80
              64
              71

            
              12th Ave S and S Jackson St
              91
              234
              315
              266

            
              Beacon Ave S and S Lander St/16th Ave S
              41
              134
              110
              143

            
              Rainer Ave S and M L King Jr Way S
              28
              46
              30
              28

            
              M L King Jr Way S and S Alaska St
              21
              37
              68
              57

            
              M L King Jr Way S and S Othello St
              10
              23
              57
              21

            
              Rainier Ave S and S Henderson St
              9
              22
              21
              24

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Knight Center - Module 6</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
    <style type="text/css">

      body {
        background-color: white;
        font-family: Helvetica, Arial, sans-serif;
      }

      h1 {
        font-size: 24px;
        margin: 0;
      }

      p {
        font-size: 14px;
        margin: 10px 0 0 0;
      }

      svg {
        background-color: white;
      }

      circle:hover {
        fill: orange;
      }

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

      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }

    </style>
  </head>
  <body>

    <h1>Seattle Bike Counts</h1>

    <p>Seattle Bike counts - January-May-June-September 2013. Source: <a href="http://data.seattle.gov">Seattle Data.gov</a></p>

    <script type="text/javascript">


      //Dimensions and padding
      var w = 700;
      var h = 600;
      var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left

      //Set up date formatting and years
      var dateFormat = d3.time.format("%m-%d-%Y");

      //Set up scales
      var xScale = d3.time.scale()
                .range([ padding[3], w - padding[1] - padding[3] ]);

      var yScale = d3.scale.linear()
                .range([ padding[0], h - padding[2] ]);

      //Configure axis generators
      var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(5)
              .tickFormat(function(d) {
                return dateFormat(d);
              });

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

      //Configure line generator
      var line = d3.svg.line()
        .x(function(d) {
          return xScale(dateFormat.parse(d.period));
        })
        .y(function(d) {
          return yScale(+d.amount);
        });

      //Create the empty SVG image
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);


      //Load data
      d3.csv("2013_NBPD_Bike_Counts_edit.csv", function(data) {

        //Data is loaded in, but we need to restructure it.

        /*
          [
            {
              Location: "Australia",
              bikes: [
                    { period: 1961, amount: 90589.568 },
                    { period: 1962, amount: 94912.961 },
                    { period: 1963, amount: 101029.517 },
                    …
                     ]
            },
            {
              Location: "Bermuda",
              bikes: [
                    { period: 1961, amount: 176.016 },
                    { period: 1962, amount: 157.681 },
                    { period: 1963, amount: 150.347 },
                    …
                     ]
            },
            …
           ]
        */
        //New array with all the dates, for referencing later
        var sample_dates = ["01-01-2013", "05-01-2013", "07-01-2013", "09-01-2013"];

        //Create a new, empty array to hold our restructured dataset
        var dataset = [];

        //Loop once for each row in data
        for (var i = 0; i < data.length; i++) {

          //Create new object with this Location's name and empty array
          dataset[i] = {
            Location: data[i].Location,
            bikes: []
          };

          //Loop through all the date periods
          for (var j = 0; j < sample_dates.length; j++) {

            // If value is not empty
            if (data[i][sample_dates[j]]) {
              //Add a new object to the bikes data array
              //for this location
              dataset[i].bikes.push({
                period: sample_dates[j],
                amount: data[i][sample_dates[j]]
              });
            }

          }

        //Uncomment to log the original data to the console
        //console.log(data);

        //Uncomment to log the newly restructured dataset to the console
        //console.log(dataset);


        }

        //Set scale domains
        xScale.domain([
          d3.min(sample_dates, function(d) {
            return dateFormat.parse(d);
          }),
          d3.max(sample_dates, function(d) {
            return dateFormat.parse(d);
          })
        ]);

        yScale.domain([
          d3.max(dataset, function(d) {
            return d3.max(d.bikes, function(d) {
              return +d.amount;
            });
          }),
          0
        ]);


        //Make a group for each Location
        var groups = svg.selectAll("g")
          .data(dataset)
          .enter()
          .append("g");

        //Append a title with the Location name (so we get easy tooltips)
        groups.append("title")
          .text(function(d) {
            return d.Location;
          });

        //Within each group, create a new line/path,
        //binding just the bikes data to each one
        groups.selectAll("path")
          .data(function(d) {
            return [ d.bikes ];
          })
          .enter()
          .append("path")
          .attr("class", "line")
          .attr("d", line)
          .attr("fill", "none")
          .attr("stroke", "steelblue")
          .attr("stroke-width", 2)
          .style("opacity", "0.3")
          .on("mouseover", mouseover)
          .on("mouseout", mouseout);

        function mouseover(d, i) {

            d3.select(this).style("stroke","red")
                           .style("opacity", "1");

       };

       function mouseout(d, i) {
            d3.select(this).style("stroke", "steelblue")
                           .style("opacity", "0.3");
       };

        //Axes
        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (h - padding[2]) + ")")
          .call(xAxis);

        svg.append("g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (padding[3]) + ",0)")
          .call(yAxis);

      });

      //console.log(dataset)

    </script>

  </body>
</html>
Location	01-01-2013	05-01-2013	07-01-2013	09-01-2013
Linden Ave N and N 130th St	61	255	244	186
Greenwood Ave N and N 85th St	39	103	82	79
NE Ravenna Blvd, E Green Lake Way N/NE 71st St	176	408	420	492
32nd Ave NW and NW 54th St	81	298	212	258
NW Market St and 24th Ave NW/Shilshole Ave NW	135	415	481	424
15th Ave NW and NW Market St	82	92	73	85
N 45th St and Stone Way N	126	328	320	382
Lake City Way and NE 125th St	52	73	109	116
NE Northgate Way and 5th Ave NE	36	28	56	51
12th Ave NE and NE 65th St	102	68	151	88
Sand Point Way NE at NE 65th St	24	160	415	204
NE 45th St and Brooklyn Ave NE	188	212	224	254
Montlake Blvd NE and NE Pacific St	378	809	826	872
15th Ave W and W Nickerson St (Ballard Bridge)	108	182	205	42
32nd Ave W and W McGraw St	4	36	77	45
Queen Anne Ave N and Boston St	22	62	98	58
Westlake Ave N and Valley St	145	406	395	480
Fairview Ave N and Valley St	16	120	93	122
Mercer St and 9th Ave N	87	245	276	291
Mercer St and Fairview Ave N	23	78	100	81
Dexter Ave N and Denny Way	316	800	706	635
Alaskan Way and Broad St	204	676	840	697
5th Ave and Stewart St (McGraw Square)	143	248	232	254
Boren Ave and Pine St	172	373	414	380
Madison St and 6th Ave	51	79	75	84
Colman Dock (Alaskan Way and Columbia)	123	270	474	288
Eastlake Ave E and Furhman Ave E (University Bridge)	384	917	984	915
Broadway E and E John St	134	266	183	329
E Pine St and Broadway E	180	365	404	2675
12th Ave and Madison St/Union St	190	460	469	558
23rd Ave E and E Union St	50	107	104	131
1st Ave S and S Jackson St	121	326	309	407
7th Ave S and S Jackson St	48	133	170	859
8th Ave S and S Dearborn St	95	271	200	405
1st Ave S and S Lander St	62	150	112	161
E Marginal Way S and S Hanford St	127	545	418	429
35th Ave SW and SW Avalon Way	71	149	170	126
California Ave SW and SW Alaska St	32	105	61	75
California Ave SW and Fauntleroy Way SW	37	185	152	51
Fauntleroy Way SW and SW Cloverdale St	21	88	107	77
26th Ave SW and SW Barton St	7	37	41	40
8th Ave S and S Cloverdale St	21	95	115	69
Airport Way S and S Vale St	19	80	64	71
12th Ave S and S Jackson St	91	234	315	266
Beacon Ave S and S Lander St/16th Ave S	41	134	110	143
Rainer Ave S and M L King Jr Way S	28	46	30	28
M L King Jr Way S and S Alaska St	21	37	68	57
M L King Jr Way S and S Othello St	10	23	57	21
Rainier Ave S and S Henderson St	9	22	21	24
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Knight Center - Module 6</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	circle:hover {
	fill: orange;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>Seattle Bike Counts</h1>

	<p>Seattle Bike counts - January-May-June-September 2013. Source: <a href="http://data.seattle.gov">Seattle Data.gov</a></p>

	<script type="text/javascript">


	//Dimensions and padding
	var w = 700;
	var h = 600;
	var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left

	//Set up date formatting and years
	var dateFormat = d3.time.format("%m-%d-%Y");

	//Set up scales
	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);

	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

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

	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.period));
	})
	.y(function(d) {
	return yScale(+d.amount);
	});

	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	//Load data
	d3.csv("2013_NBPD_Bike_Counts_edit.csv", function(data) {

	//Data is loaded in, but we need to restructure it.

	/*
	[
	{
	Location: "Australia",
	bikes: [
	{ period: 1961, amount: 90589.568 },
	{ period: 1962, amount: 94912.961 },
	{ period: 1963, amount: 101029.517 },
	…
	]
	},
	{
	Location: "Bermuda",
	bikes: [
	{ period: 1961, amount: 176.016 },
	{ period: 1962, amount: 157.681 },
	{ period: 1963, amount: 150.347 },
	…
	]
	},
	…
	]
	*/
	//New array with all the dates, for referencing later
	var sample_dates = ["01-01-2013", "05-01-2013", "07-01-2013", "09-01-2013"];

	//Create a new, empty array to hold our restructured dataset
	var dataset = [];

	//Loop once for each row in data
	for (var i = 0; i < data.length; i++) {

	//Create new object with this Location's name and empty array
	dataset[i] = {
	Location: data[i].Location,
	bikes: []
	};

	//Loop through all the date periods
	for (var j = 0; j < sample_dates.length; j++) {

	// If value is not empty
	if (data[i][sample_dates[j]]) {
	//Add a new object to the bikes data array
	//for this location
	dataset[i].bikes.push({
	period: sample_dates[j],
	amount: data[i][sample_dates[j]]
	});
	}

	}

	//Uncomment to log the original data to the console
	//console.log(data);

	//Uncomment to log the newly restructured dataset to the console
	//console.log(dataset);


	}

	//Set scale domains
	xScale.domain([
	d3.min(sample_dates, function(d) {
	return dateFormat.parse(d);
	}),
	d3.max(sample_dates, function(d) {
	return dateFormat.parse(d);
	})
	]);

	yScale.domain([
	d3.max(dataset, function(d) {
	return d3.max(d.bikes, function(d) {
	return +d.amount;
	});
	}),
	0
	]);


	//Make a group for each Location
	var groups = svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g");

	//Append a title with the Location name (so we get easy tooltips)
	groups.append("title")
	.text(function(d) {
	return d.Location;
	});

	//Within each group, create a new line/path,
	//binding just the bikes data to each one
	groups.selectAll("path")
	.data(function(d) {
	return [ d.bikes ];
	})
	.enter()
	.append("path")
	.attr("class", "line")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-width", 2)
	.style("opacity", "0.3")
	.on("mouseover", mouseover)
	.on("mouseout", mouseout);

	function mouseover(d, i) {

	d3.select(this).style("stroke","red")
	.style("opacity", "1");

	};

	function mouseout(d, i) {
	d3.select(this).style("stroke", "steelblue")
	.style("opacity", "0.3");
	};

	//Axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis);

	});

	//console.log(dataset)

	</script>

	</body>
	</html>