davidski · October 6, 2015 02:01
diff --git a/2013_NBPD_Bike_Counts_edit.csv b/2013_NBPD_Bike_Counts_edit.csv
diff --git a/index.html b/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>