pstuffa · September 7, 2016 14:33
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
diff --git a/data.tsv b/data.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- Paul Buffa 2015
  -->
 <meta charset="utf-8">
 <style>

 body {
  font: 10px sans-serif;
  margin: 0;
 }

 button {
  font: 12px sans-serif;
  text-align: center;

 }
 div {
  margin-top: 10px;
  margin-bottom: 10px;
  font: 12px sans-serif;
 }

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

 .square {
  stroke: #000;
  stroke-opacity: .2;
  stroke-width: 1;
 }

 .x {
  font-size: 0px;
 }

 .background {
  fill: #000;
  fill-opacity: .02;
  stroke-opacity: .1;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 </style>
 <body>
  <div> &nbsp; Sort By:
   <button id="sort_five">Distance Asc.</button>
   <button id="sort_six">Distance Desc.</button>
   <button id="sort_four">Elevation Gain per Mile Asc.</button>
   <button id="sort_three">Elevation Gain per Mile Desc.</button>
   <button id="sort_two">Date Asc.</button>
   <button id="sort_one">Date Desc.</button>
  </div>
 <br />
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

 var margin = {top: 20, right: 30, bottom: 40, left: 10},
    width = 300 - margin.left - margin.right,
    height = 200 - margin.top - margin.bottom;

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

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

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

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

 var opacityScale = d3.scale.linear()
    .domain([0,300])
    .range([0.20, .70]);

 var colorScale = d3.scale.linear()
    .domain([0,300])
    .range(["green","blue"]);

 // Loading in running data 
 d3.tsv("data.tsv", function(error, data) {

 // Making some modifications to the dataset
 var parseDate = d3.time.format("%M/%d/%Y").parse;
 var formatDate = d3.time.format("%M/%d");

 data.forEach(function(d) {
    d['Distance'] = +d['Distance'];
    d['Calories'] = +d['Calories'];
    d['Elevation Gain'] = +d['Elevation Gain'];
    d['Date'] = formatDate(parseDate(d['Date']));
    d['Elevation per Mile'] = d['Elevation Gain'] / d['Distance'];
  });

 // Setting the priority order for the chart series 
 var priority_order = ['Tuesday', 'Wednesday', 'Thursday', 'Saturday', 'Sunday', 'Monday'];

 // Assigning key and main sort 
 var topics = d3.nest()
    .key(function(d) { return d['Day of Week']; })
    .sortKeys(d3.ascending)
    .sortKeys(function(a,b) { return priority_order.indexOf(a) - priority_order.indexOf(b); })
    .entries(data);

 // SVG variable 
 var svg = d3.select("body").selectAll("svg")
    .data(topics)
  .enter().append("svg")
    .attr("id", function(d) { return d.key; })
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("class", function(d) { return "chart " + d.key; })
    .append("g")
    .attr("transform", "translate(" + (margin.left + 20) + "," + margin.top + ")")
    .each(multiple);

 // Legend 
 var legend = d3.select("body")
    .append("svg")
      .attr("width", 1000)
      .attr("height", 30);

 // Adding Gradient 
 var gradient = legend.append("svg:defs")
    .append("svg:linearGradient")
      .attr("id", "gradient")
      .attr("x1", "0%")
      .attr("y1", "0%")
      .attr("x2", "100%")
      .attr("y2", "0%");
         
 gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "green")
    .attr("stop-opacity", .3);

 gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "blue")
    .attr("stop-opacity", .7);

 legend.append("svg:rect")
    .attr("x", 790)
    .attr("width", 100)
    .attr("height", 10)
    .style("fill", "url(#gradient)");

 // Appending Legend text 
 legend.append("text")
    .attr("x", 785)
    .attr("y", 5)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text("Elevation Gain per Mile (ft)");

 legend.append("text")
    .attr("x", 795)
    .attr("y", 15)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text("0");

 legend.append("text")
    .attr("x", 890)
    .attr("y", 15)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text("300");

 svg.append("text")
    .attr("x", 0)
    .attr("y", -8)
    .style("text-anchor", "top")
    .style("font", "14px sans-serif")
    .style("font-weight", "bold")
    .text(function(d) { return d.key; });


 // Begin function for each loop on line 125
 function multiple(topic) {

  var svg = d3.select(this);

  svg.append("rect")
    .attr("class","background")
    .attr("width", width)
    .attr("height", height);

  x.domain(topic.values
    .sort(function(a, b) {   return d3.ascending(a['Date Value'],b['Date Value']);  })
    .map(function(d) { return d['Date']; }));
    
 // add in the dots 
  svg.selectAll(".square")
      .data(topic.values)
    .enter().append("rect")
      .attr("width", 10)
      .attr("height", function(d,i) { return height - y(d['Distance']); })
      .attr("rx", 2) 
      .attr("ry", 2)
      .style("fill", function(d) { return colorScale(d['Elevation per Mile']); })
      .attr("class",function(d) { return "square " + d['Month'];})
      .attr("id",function(d) { return d['Type']; })
      .style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
      .attr("y", function(d,i) { return y(d['Distance']); })
      .attr("x", function(d, i) { return x(d['Date']); });

 // Axis Labels
  svg.selectAll("text")
      .data(topic.values)
    .enter().append("text")
      .attr("class", function(d) { return "title " + d['Month'] + "text"; })
      .attr("y", height + 6)
      .attr("text-anchor", "top")
      .style("writing-mode","tb-rl")
      .attr("x", function(d, i) { return x(d['Date']) + 5; })
      .text(function(d) { return d['Date']});

 // appending the axes 
    svg.append("g")
       .attr("class", "x axis")
       .style("stroke-dasharray", function(d) { 
          if(d.key == 'Overall') {  return "0, 0" }
                            else {  return "1, 1" } })
       .attr("transform", "translate(0," + height + ")")
       .call(xAxis);
      
    svg.append("g")
       .attr("class", "y axis")
       .style("stroke-dasharray", function(d) { 
          if(d.key == 'Overall') { return "0, 0"  }
                            else { return "1, 1" } })
       .call(yAxis);


 // Interactive Events - Sorts

 // Sort by Date Descending 
 function changeSortOne() {

  // turning off pointer events
  d3.selectAll(".square")
    .style("pointer-events","None");

  d3.selectAll(".title")
    .style("pointer-events","None");

  d3.select("body").selectAll("svg")
    .select("g")
    .each(change);

  function change(topic) {

    var svg = d3.select(this);

    x.domain(topic.values.sort(function(a, b) {  return d3.descending(a['Date Value'],b['Date Value']); })
     .map(function(d) { return d['Date']; }));

    svg.selectAll(".square")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']); });

    svg.selectAll(".title")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']) + 5; });    

    // turning pointer events back on
    d3.selectAll(".square")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

    d3.selectAll(".title")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

      }
  } // Ends Sort One

 d3.selectAll("#sort_one").on("click", changeSortOne);


 // Sort by Date Ascending
 function changeSortTwo() {

  // turning off pointer events
  d3.selectAll(".square")
    .style("pointer-events","None");

  d3.selectAll(".title")
    .style("pointer-events","None");

  d3.select("body").selectAll("svg")
    .select("g")
    .each(change);

  function change(topic) {

    var svg = d3.select(this);

    x.domain(topic.values.sort(function(a, b) {  return d3.ascending(a['Date Value'],b['Date Value']); })
     .map(function(d) { return d['Date']; }));

    svg.selectAll(".square")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']); });

    svg.selectAll(".title")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']) + 5; });    

    // turning pointer events back on
    d3.selectAll(".square")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

    d3.selectAll(".title")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

      }
  } // Ends Sort Two

 d3.selectAll("#sort_two").on("click", changeSortTwo);


 // Sort by Last Name
 function changeSortThree() {

  // turning off pointer events
  d3.selectAll(".square")
    .style("pointer-events","None");

  d3.selectAll(".title")
    .style("pointer-events","None");

  d3.select("body").selectAll("svg")
    .select("g")
    .each(change);

  function change(topic) {

    var svg = d3.select(this);

    x.domain(topic.values.sort(function(a, b) {  return d3.descending(a['Elevation per Mile'],b['Elevation per Mile']); })
     .map(function(d) { return d['Date']; }));

    svg.selectAll(".square")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']); });

    svg.selectAll(".title")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']) + 5; });    

    // turning pointer events back on
    d3.selectAll(".square")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

    d3.selectAll(".title")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

      }
  } // Ends Sort Three

 d3.selectAll("#sort_three").on("click", changeSortThree);


 // Sort by Elevation per Mile
 function changeSortFour() {

  // turning off pointer events
  d3.selectAll(".square")
    .style("pointer-events","None");

  d3.selectAll(".title")
    .style("pointer-events","None");

  d3.select("body").selectAll("svg")
    .select("g")
    .each(change);

  function change(topic) {

    var svg = d3.select(this);

    x.domain(topic.values.sort(function(a, b) {  return d3.ascending(a['Elevation per Mile'],b['Elevation per Mile']); })
     .map(function(d) { return d['Date']; }));

    svg.selectAll(".square")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']); });

    svg.selectAll(".title")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']) + 5; });    

    // turning pointer events back on
    d3.selectAll(".square")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

    d3.selectAll(".title")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

      }
  } // Ends Sort Four

 d3.selectAll("#sort_four").on("click", changeSortFour);


 // Sort by Distance Ascending 
 function changeSortFive() {

  // turning off pointer events
  d3.selectAll(".square")
    .style("pointer-events","None");

  d3.selectAll(".title")
    .style("pointer-events","None");

  d3.select("body").selectAll("svg")
    .select("g")
    .each(change);

  function change(topic) {

    var svg = d3.select(this);

    x.domain(topic.values.sort(function(a, b) {  return d3.ascending(a['Distance'],b['Distance']); })
     .map(function(d) { return d['Date']; }));

    svg.selectAll(".square")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']); });

    svg.selectAll(".title")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']) + 5; });    

    // turning pointer events back on
    d3.selectAll(".square")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

    d3.selectAll(".title")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

      }
  } // Ends Sort Five

 d3.selectAll("#sort_five").on("click", changeSortFive);


 // Sort by Distane Descending 
 function changeSortSix() {

  // turning off pointer events
  d3.selectAll(".square")
    .style("pointer-events","None");

  d3.selectAll(".title")
    .style("pointer-events","None");

  d3.select("body").selectAll("svg")
    .select("g")
    .each(change);

  function change(topic) {

    var svg = d3.select(this);

    x.domain(topic.values.sort(function(a, b) {  return d3.descending(a['Distance'],b['Distance']); })
     .map(function(d) { return d['Date']; }));

    svg.selectAll(".square")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']); });

    svg.selectAll(".title")
      .transition()
      .duration(2000)
      .ease("bounce")
      .delay(function(d,i) { return i * 50; })
      .attr("x", function(d) { return x(d['Date']) + 5; });    

    // turning pointer events back on
    d3.selectAll(".square")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

    d3.selectAll(".title")
      .transition()
      .delay(4000)
      .style("pointer-events","all");

      }
  }

 d3.selectAll("#sort_six").on("click", changeSortSix);


 } // Ends Multiple Loop

 // Interactive Events - Hovers
 function hover(d, i) {

    d3.selectAll(".square")
      .transition()
      .duration(500)
      .style("fill-opacity", .1)
      .style("stroke-opacity", .2)
      .attr("y", function(d,i) { return height - 5; })
      .attr("height", 5);

    d3.selectAll("." + d['Month']) 
      .transition()
      .ease("elastic")
      .duration(1500)
      .attr("height", function(d,i) { return height - y(d['Distance']); })
      .style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
      .attr("y", function(d,i) { return y(d['Distance']); })
      .style("stroke-opacity", 1);

    d3.selectAll("."  + d['Month'] + "text") 
      .style("fill-opacity", 1)
      .style("font-size", 13);

    }

 function hoverOut(d, i) {

    d3.selectAll(".square")
      .transition()
      .duration(500)
      .style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
      .style("stroke-opacity", .3)
      .attr("height", function(d,i) { return height - y(d['Distance']); })
      .attr("y", function(d,i) { return y(d['Distance']); });

   d3.selectAll(".title") 
      .style("font-size", 10);

    }

  d3.selectAll(".square")
      .on("mouseover", hover)
      .on("mouseout", hoverOut);

  d3.selectAll(".title")
      .on("mouseover", hover)
      .on("mouseout", hoverOut);
      
 }); // Ends Data Function

 </script>
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
Activity Name	Activity Type	Month	Date Long	Date	Date Value	Day of Week	Time	Distance	Elevation Gain	Avg Pace	Max Pace	Avg HR	Max HR	Calories	Training Effect
Boulder Running	Running	July	Sun, Jul 12, 2015 12:24 PM	7/12/2015	42197	Sunday	4:00:19	17.34	3399	13:52	6:46	130	154	2120	4.3
Manitou Springs Running	Running	July	Sat, Jul 11, 2015 8:38 AM	7/11/2015	42196	Saturday	6:40:50	32.11	7021	15:37	5:47	138	160	4765	5
Boulder Running	Running	July	Thu, Jul 9, 2015 4:05 PM	7/9/2015	42194	Thursday	1:27:25	9.74	259	8:58	5:48	148	162	1247	5
Boulder Running	Running	July	Wed, Jul 8, 2015 3:58 PM	7/8/2015	42193	Wednesday	2:49:58	14.01	2320	12:08	4:55	138	170	1844	5
Boulder Running	Running	July	Tue, Jul 7, 2015 4:56 PM	7/7/2015	42192	Tuesday	1:36:06	10.09	295	9:31	4:49	144	160	1381	5
Boulder Running	Running	July	Sun, Jul 5, 2015 11:24 AM	7/5/2015	42190	Sunday	55:34:00	6.06	164	9:10	5:35	144	160	798	5
Boulder Running	Running	July	Wed, Jul 1, 2015 4:04 PM	7/1/2015	42186	Wednesday	57:43:00	5.14	161	11:14	6:02	122	135	688	3.4
Leadville Running	Running	June	Mon, Jun 29, 2015 10:07 AM	6/29/2015	42184	Monday	3:47:49	20.81	1562	10:50	7:16	138	167	2987	5
Twin Lakes Running	Running	June	Sun, Jun 28, 2015 8:38 AM	6/28/2015	42183	Sunday	6:22:26	21.21	6463	18:02	5:03	141	169	4799	5
Leadville Running	Running	June	Sat, Jun 27, 2015 8:35 AM	6/27/2015	42182	Saturday	4:59:23	25.78	2871	11:37	6:46	143	163	4391	5
Boulder Running	Running	June	Thu, Jun 25, 2015 2:45 PM	6/25/2015	42180	Thursday	1:45:54	10.17	285	10:25	6:04	179	210	1429	4
Boulder Running	Running	June	Wed, Jun 24, 2015 4:50 PM	6/24/2015	42179	Wednesday	2:28:33	13.97	433	10:38	5:09	171	203	1942	3.9
Boulder Running	Running	June	Tue, Jun 23, 2015 4:08 PM	6/23/2015	42178	Tuesday	1:58:21	10.08	1138	11:45	5:53	155	206	1474	3.5
Boulder Running	Running	June	Sun, Jun 21, 2015 12:03 PM	6/21/2015	42176	Sunday	1:48:50	7.96	1562	13:40	8:02	148	187	1155	3
Boulder Running	Running	June	Sat, Jun 20, 2015 9:47 AM	6/20/2015	42175	Saturday	2:42:18	12.03	2234	13:29	5:27	151	195	1873	3.2
Boulder Running	Running	June	Thu, Jun 18, 2015 4:29 PM	6/18/2015	42173	Thursday	56:35:00	6.12	187	9:15	6:13	143	158	711	3.3
Boulder Running	Running	June	Wed, Jun 17, 2015 4:23 PM	6/17/2015	42172	Wednesday	1:19:13	8.02	256	9:52	4:58	146	158	980	3.1
Boulder Running	Running	June	Tue, Jun 16, 2015 4:05 PM	6/16/2015	42171	Tuesday	57:54:00	6.34	207	9:08	4:03	140	156	669	3
Leadville Running	Running	June	Sun, Jun 14, 2015 7:46 AM	6/14/2015	42169	Sunday	5:15:32	24.9	1467	12:40	7:26	136	160	2965	3.8
Leadville Running	Running	June	Sat, Jun 13, 2015 9:38 AM	6/13/2015	42168	Saturday	4:41:14	24.77	1640	11:21	6:33	144	162	3120	4
Boulder Running	Running	June	Thu, Jun 11, 2015 3:49 PM	6/11/2015	42166	Thursday	43:50:00	5.1	184	8:36	4:51	146	161	503	3.3
Boulder Running	Running	June	Wed, Jun 10, 2015 2:16 PM	6/10/2015	42165	Wednesday	2:12:22	9.92	1890	13:20	7:41	162	201	1487	4.5
Boulder Running	Running	June	Tue, Jun 9, 2015 4:17 PM	6/9/2015	42164	Tuesday	59:11:00	5.1	161	11:36	6:10	177	207	719	4
Boulder Running	Running	June	Sun, Jun 7, 2015 10:22 AM	6/7/2015	42162	Sunday	4:32:17	19.95	4088	13:39	3:37	148	183	2777	3.2
Boulder Running	Running	June	Sat, Jun 6, 2015 10:19 AM	6/6/2015	42161	Saturday	4:25:15	18	4226	14:44	6:14	143	171	2271	--
Boulder Running	Running	June	Thu, Jun 4, 2015 4:15 PM	6/4/2015	42159	Thursday	1:51:32	10.17	299	10:58	5:32	149	160	1183	3.3
Boulder Running	Running	June	Wed, Jun 3, 2015 4:05 PM	6/3/2015	42158	Wednesday	2:07:06	10	1982	12:43	7:07	150	169	1288	3.8
Boulder Running	Running	June	Tue, Jun 2, 2015 4:01 PM	6/2/2015	42157	Tuesday	1:53:53	10.03	308	11:22	5:17	142	182	1120	2.9
Boulder Running	Running	May	Sun, May 31, 2015 11:32 AM	5/31/2015	42155	Sunday	4:07:39	19.75	2192	12:32	4:46	148	170	2639	3.8
Boulder Running	Running	May	Sat, May 30, 2015 11:11 AM	5/30/2015	42154	Saturday	5:50:10	24.57	4370	14:15	5:07	149	186	3485	4.1
Boulder Running	Running	May	Thu, May 28, 2015 3:59 PM	5/28/2015	42152	Thursday	1:40:15	10.01	308	10:01	7:22	150	173	1258	3.6
Boulder Running	Running	May	Wed, May 27, 2015 4:36 PM	5/27/2015	42151	Wednesday	1:22:26	8.39	246	9:50	4:51	153	165	1062	3.4
Boulder Running	Running	May	Tue, May 26, 2015 4:01 PM	5/26/2015	42150	Tuesday	59:28:00	6.26	197	9:30	6:23	147	169	739	3.2
Boulder Running	Running	May	Sun, May 24, 2015 2:54 PM	5/24/2015	42148	Sunday	2:00:51	8.31	1381	14:33	4:55	137	179	1223	2.6
Boulder Running	Running	May	Sat, May 23, 2015 10:31 AM	5/23/2015	42147	Saturday	2:04:38	9.33	1647	13:22	7:05	150	174	1541	3.9
Brooklyn Running	Running	May	Thu, May 21, 2015 6:45 AM	5/21/2015	42145	Thursday	53:04:00	6.08	358	8:43	3:44	161	194	758	3.8
Brooklyn Running	Running	May	Wed, May 20, 2015 6:42 AM	5/20/2015	42144	Wednesday	1:39:12	7.98	305	12:26	6:05	153	175	1128	2.8
Brooklyn Running	Running	May	Tue, May 19, 2015 6:27 AM	5/19/2015	42143	Tuesday	54:50:00	6.11	243	8:59	5:39	147	163	781	3.8
Brooklyn Running	Running	May	Sun, May 17, 2015 10:04 AM	5/17/2015	42141	Sunday	2:35:52	13.95	486	11:10	4:49	130	154	1441	3.1
Brooklyn Running	Running	May	Sat, May 16, 2015 9:59 AM	5/16/2015	42140	Saturday	3:30:21	21	781	10:01	2:56	138	175	2160	3.5
Brooklyn Running	Running	May	Thu, May 14, 2015 6:24 AM	5/14/2015	42138	Thursday	2:03:26	10.26	830	12:02	6:05	122	145	1049	2.7
Brooklyn Running	Running	May	Wed, May 13, 2015 5:26 AM	5/13/2015	42137	Wednesday	2:20:32	12.27	433	11:27	5:00	140	172	1597	2.3
Brooklyn Running	Running	May	Tue, May 12, 2015 6:30 AM	5/12/2015	42136	Tuesday	1:46:32	10.06	331	10:36	7:04	119	169	923	2.4
Brooklyn Running	Running	May	Sun, May 10, 2015 11:03 AM	5/10/2015	42134	Sunday	38:42:00	4.07	144	9:30	5:45	136	180	463	2.3
Brooklyn Running	Running	May	Sat, May 9, 2015 1:10 PM	5/9/2015	42133	Saturday	58:44:00	6.01	207	9:47	4:26	152	176	786	2.9
Brooklyn Running	Running	May	Thu, May 7, 2015 6:51 AM	5/7/2015	42131	Thursday	26:45:00	3.11	98	8:37	6:00	157	183	400	3
Brooklyn Running	Running	May	Wed, May 6, 2015 6:38 AM	5/6/2015	42130	Wednesday	34:36:00	3.93	128	8:48	3:40	143	187	486	3
Brooklyn Running	Running	May	Tue, May 5, 2015 6:43 AM	5/5/2015	42129	Tuesday	32:09:00	3	102	10:44	6:28	136	176	374	2.4
Tomkins Cove Running	Running	May	Sat, May 2, 2015 4:58 AM	5/2/2015	42126	Saturday	11:27:53	52	8396	13:14	6:18	147	187	6620	5
Brooklyn Running	Running	April	Thu, Apr 30, 2015 7:40 AM	4/30/2015	42124	Thursday	22:13	2.97	108	7:29	3:25	180	202	391	3.4
Brooklyn Running	Running	April	Wed, Apr 29, 2015 7:36 AM	4/29/2015	42123	Wednesday	32:13:00	4.04	125	7:58	5:03	175	206	524	3.5
Brooklyn Running	Running	April	Tue, Apr 28, 2015 7:04 AM	4/28/2015	42122	Tuesday	24:09:00	3.01	115	8:02	4:31	162	206	365	3
Treadmill Running	Running	April	Sat, Apr 25, 2015 3:01 PM	4/25/2015	42119	Saturday	14:59	1.03	7	14:37	9:43	124	163	140	1.5
Treadmill Running	Running	April	Thu, Apr 23, 2015 11:48 AM	4/23/2015	42117	Thursday	24:42:00	2.01	1	12:19	9:19	130	192	241	1.9
Treadmill Running	Running	April	Tue, Apr 21, 2015 11:38 AM	4/21/2015	42115	Tuesday	41:43:00	3.01	3	13:53	9:29	117	170	357	2
Brooklyn Running	Running	April	Tue, Apr 14, 2015 6:55 AM	4/14/2015	42108	Tuesday	1:25:05	10.01	367	8:30	4:31	136	151	946	2.5
Brooklyn Running	Running	April	Sun, Apr 12, 2015 11:01 AM	4/12/2015	42106	Sunday	2:56:10	20.01	764	8:48	6:41	150	210	1930	4
Brooklyn Running	Running	April	Sat, Apr 11, 2015 8:38 AM	4/11/2015	42105	Saturday	1:34:36	10.01	489	9:27	4:19	170	208	1357	5
Brooklyn Running	Running	April	Thu, Apr 9, 2015 6:23 AM	4/9/2015	42103	Thursday	48:44:00	6.23	246	7:50	4:06	167	195	747	4.9
Brooklyn Running	Running	April	Wed, Apr 8, 2015 7:11 AM	4/8/2015	42102	Wednesday	1:03:13	8	331	7:54	5:45	172	198	1043	5
Brooklyn Running	Running	April	Tue, Apr 7, 2015 6:31 AM	4/7/2015	42101	Tuesday	48:51:00	6.13	233	7:58	3:05	166	194	766	5
Brooklyn Running	Running	April	Sun, Apr 5, 2015 9:20 AM	4/5/2015	42099	Sunday	3:30:01	20.07	666	8:47	4:59	147	164	2303	3.5
Brooklyn Running	Running	April	Sat, Apr 4, 2015 10:39 AM	4/4/2015	42098	Saturday	4:44:48	30.01	1690	9:29	3:26	148	193	3431	3.9
Brooklyn Running	Running	April	Thu, Apr 2, 2015 6:36 AM	4/2/2015	42096	Thursday	56:17:00	6.34	197	8:53	3:36	163	191	841	3.3
Brooklyn Running	Running	April	Wed, Apr 1, 2015 7:06 AM	4/1/2015	42095	Wednesday	1:10:12	8.15	302	8:37	3:04	151	178	900	3.2
Brooklyn Running	Running	March	Tue, Mar 31, 2015 7:45 AM	3/31/2015	42094	Tuesday	50:28:00	6.15	253	8:12	4:22	167	192	825	3.8
Brooklyn Running	Running	March	Sat, Mar 28, 2015 12:14 PM	3/28/2015	42091	Saturday	2:59:13	20.71	886	8:39	4:27	147	188	2256	3.2
Brooklyn Running	Running	March	Thu, Mar 26, 2015 7:20 AM	3/26/2015	42089	Thursday	50:10:00	6.14	262	8:11	5:37	148	184	743	3
Brooklyn Running	Running	March	Wed, Mar 25, 2015 7:11 AM	3/25/2015	42088	Wednesday	1:05:53	8.01	312	8:13	4:57	142	159	886	2.8
Brooklyn Running	Running	March	Tue, Mar 24, 2015 6:56 AM	3/24/2015	42087	Tuesday	52:07:00	6.05	253	8:37	6:55	153	191	720	2.8
Brooklyn Running	Running	March	Sun, Mar 22, 2015 11:40 AM	3/22/2015	42085	Sunday	2:57:40	20.07	876	8:51	5:28	141	161	2176	3.2
Brooklyn Running	Running	March	Sat, Mar 21, 2015 11:57 AM	3/21/2015	42084	Saturday	3:04:28	20.11	850	9:10	4:43	179	213	2749	3.6
Brooklyn Running	Running	March	Thu, Mar 19, 2015 7:22 AM	3/19/2015	42082	Thursday	51:04:00	6.09	256	8:23	6:05	171	212	801	3.4
Brooklyn Running	Running	March	Wed, Mar 18, 2015 7:08 AM	3/18/2015	42081	Wednesday	1:05:41	8.01	331	8:12	6:18	175	208	1058	3.8
Brooklyn Running	Running	March	Tue, Mar 17, 2015 8:40 AM	3/17/2015	42080	Tuesday	47:31:00	6	253	7:55	4:10	155	189	753	3.5
Brooklyn Running	Running	March	Sun, Mar 15, 2015 12:01 PM	3/15/2015	42078	Sunday	1:04:27	8.3	436	7:46	3:23	161	196	1010	3.6
Brooklyn Running	Running	March	Sat, Mar 14, 2015 10:14 AM	3/14/2015	42077	Saturday	1:39:37	12	614	8:18	5:28	155	176	1539	4
Brooklyn Running	Running	March	Thu, Mar 12, 2015 7:29 AM	3/12/2015	42075	Thursday	47:41:00	6.08	305	7:50	5:26	149	173	718	3.2
Brooklyn Running	Running	March	Wed, Mar 11, 2015 6:41 AM	3/11/2015	42074	Wednesday	1:05:15	8.14	289	8:01	4:19	167	194	1053	4.3
Treadmill Running	Running	March	Tue, Mar 10, 2015 11:39 AM	3/10/2015	42073	Tuesday	58:43:00	6.02	1	9:45	8:51	154	205	534	2
Brooklyn Running	Running	March	Sun, Mar 8, 2015 11:12 AM	3/8/2015	42071	Sunday	3:22:58	20.01	912	10:09	3:58	145	198	2488	3.3
Brooklyn Running	Running	March	Sat, Mar 7, 2015 9:35 AM	3/7/2015	42070	Saturday	5:05:59	30.01	1453	10:12	5:00	137	171	3248	3.6
Brooklyn Running	Running	March	Thu, Mar 5, 2015 7:20 AM	3/5/2015	42068	Thursday	25:40:00	3.01	108	8:32	4:58	138	152	355	2.3
Brooklyn Running	Running	March	Wed, Mar 4, 2015 7:10 AM	3/4/2015	42067	Wednesday	33:04:00	4.02	177	8:14	6:10	140	162	471	2.7
Brooklyn Running	Running	March	Tue, Mar 3, 2015 6:27 AM	3/3/2015	42066	Tuesday	30:23:00	3.37	144	9:02	6:01	125	139	344	1.6
Brooklyn Running	Running	March	Sun, Mar 1, 2015 10:46 AM	3/1/2015	42064	Sunday	1:02:35	8.01	338	7:49	4:49	152	173	920	3.4
Brooklyn Running	Running	February	Sat, Feb 28, 2015 10:23 AM	2/28/2015	42063	Saturday	1:45:17	12.51	489	8:25	5:21	150	172	1342	3.2
Brooklyn Running	Running	February	Thu, Feb 26, 2015 7:05 AM	2/26/2015	42061	Thursday	51:10:00	6.2	269	8:16	5:33	146	193	690	3.4
Treadmill Running	Running	February	Wed, Feb 25, 2015 12:19 PM	2/25/2015	42060	Wednesday	1:16:15	8.02	1	9:30	8:14	158	188	1046	3.3
Treadmill Running	Running	February	Tue, Feb 24, 2015 12:27 PM	2/24/2015	42059	Tuesday	1:04:19	6.5	3	9:54	8:56	155	193	588	2.1
Brooklyn Running	Running	February	Sun, Feb 22, 2015 11:07 AM	2/22/2015	42057	Sunday	3:20:19	20.02	915	10:00	3:14	146	175	2426	3.5
Brooklyn Running	Running	February	Sat, Feb 21, 2015 12:45 PM	2/21/2015	42056	Saturday	3:19:13	20.26	971	9:50	4:42	144	175	2368	3.4
Treadmill Running	Running	February	Thu, Feb 19, 2015 12:15 PM	2/19/2015	42054	Thursday	51:39:00	5.06	1	10:12	8:34	158	191	678	3.2
Treadmill Running	Running	February	Wed, Feb 18, 2015 12:00 PM	2/18/2015	42053	Wednesday	1:43:27	10.05	7	10:17	8:39	141	166	1097	2.5
Treadmill Running	Running	February	Tue, Feb 17, 2015 12:19 PM	2/17/2015	42052	Tuesday	49:36:00	5.14	16	9:39	7:02	148	176	647	3.2
Treadmill Running	Running	February	Sun, Feb 15, 2015 4:23 PM	2/15/2015	42050	Sunday	1:13:23	8.03	161	9:08	7:52	140	164	929	3
Brooklyn Running	Running	February	Sat, Feb 14, 2015 3:03 PM	2/14/2015	42049	Saturday	1:57:10	12.56	522	9:20	4:27	138	166	1330	3
Brooklyn Running	Running	February	Thu, Feb 12, 2015 8:07 AM	2/12/2015	42047	Thursday	48:45:00	6.02	279	8:06	6:53	155	169	771	3.7
Brooklyn Running	Running	February	Wed, Feb 11, 2015 6:36 AM	2/11/2015	42046	Wednesday	1:04:32	8.05	459	8:01	3:56	146	163	860	3.2
Treadmill Running	Running	February	Tue, Feb 10, 2015 12:58 PM	2/10/2015	42045	Tuesday	58:46:00	6.11	3	9:37	8:05	142	160	751	2.9
Brooklyn Running	Running	February	Sun, Feb 8, 2015 12:20 PM	2/8/2015	42043	Sunday	1:24:25	10.07	367	8:23	4:44	156	177	1260	4.2
Treadmill Running	Running	February	Sat, Feb 7, 2015 4:03 PM	2/7/2015	42042	Saturday	3:44:02	22.02	112	10:11	8:28	145	169	2317	3.7
Treadmill Running	Running	February	Thu, Feb 5, 2015 12:40 PM	2/5/2015	42040	Thursday	56:07:00	6.02	7	9:19	7:11	144	164	796	3.3
Treadmill Running	Running	February	Wed, Feb 4, 2015 12:17 PM	2/4/2015	42039	Wednesday	1:32:33	10.08	36	9:11	7:00	134	161	1064	2.9
Treadmill Running	Running	February	Tue, Feb 3, 2015 12:20 PM	2/3/2015	42038	Tuesday	1:10:54	7.54	1	9:24	8:15	132	144	778	2.5
Brooklyn Running	Running	February	Sun, Feb 1, 2015 12:42 PM	2/1/2015	42036	Sunday	1:28:46	10.04	400	8:50	5:49	139	163	1111	3.2
Treadmill Run	Running	January	Sat, Jan 31, 2015 3:50 PM	1/31/2015	42035	Saturday	3:26:52	20.09	174	10:18	7:55	--	--	2901	--
Brooklyn Running	Running	January	Thu, Jan 29, 2015 6:40 AM	1/29/2015	42033	Thursday	56:01:00	6.51	260	8:37	5:05	141	155	713	3
Brooklyn Running	Running	January	Wed, Jan 28, 2015 6:48 AM	1/28/2015	42032	Wednesday	1:11:47	8.15	384	8:49	4:39	133	149	790	2.6
Brooklyn Running	Running	January	Tue, Jan 27, 2015 12:14 PM	1/27/2015	42031	Tuesday	57:51:00	6.39	272	9:04	5:54	140	156	718	3
Brooklyn Running	Running	January	Sun, Jan 25, 2015 11:37 AM	1/25/2015	42029	Sunday	1:23:14	10.33	394	8:03	2:04	150	176	1020	4.2
Brooklyn Running	Running	January	Sat, Jan 24, 2015 8:05 AM	1/24/2015	42028	Saturday	3:40:29	20.04	1063	11:00	4:58	--	--	2856	--
Weekly Run	Street Running	January	Thu, Jan 22, 2015 11:00 AM	1/22/2015	42026	Thursday	42:47:00	5.3	16	8:04	--	--	--	668	--
Weekly Run	Street Running	January	Wed, Jan 21, 2015 11:15 AM	1/21/2015	42025	Wednesday	1:22:41	10	161	8:16	--	--	--	1246	--
Weekly Run	Street Running	January	Tue, Jan 20, 2015 11:00 AM	1/20/2015	42024	Tuesday	43:59:00	5.3	16	8:18	--	--	--	668	--
	<!DOCTYPE html>
	<!-- Paul Buffa 2015
	-->
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	margin: 0;
	}

	button {
	font: 12px sans-serif;
	text-align: center;

	}
	div {
	margin-top: 10px;
	margin-bottom: 10px;
	font: 12px sans-serif;
	}

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

	.square {
	stroke: #000;
	stroke-opacity: .2;
	stroke-width: 1;
	}

	.x {
	font-size: 0px;
	}

	.background {
	fill: #000;
	fill-opacity: .02;
	stroke-opacity: .1;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<div>   Sort By:
	<button id="sort_five">Distance Asc.</button>
	<button id="sort_six">Distance Desc.</button>
	<button id="sort_four">Elevation Gain per Mile Asc.</button>
	<button id="sort_three">Elevation Gain per Mile Desc.</button>
	<button id="sort_two">Date Asc.</button>
	<button id="sort_one">Date Desc.</button>
	</div>
	<br />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20, right: 30, bottom: 40, left: 10},
	width = 300 - margin.left - margin.right,
	height = 200 - margin.top - margin.bottom;

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

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

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

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

	var opacityScale = d3.scale.linear()
	.domain([0,300])
	.range([0.20, .70]);

	var colorScale = d3.scale.linear()
	.domain([0,300])
	.range(["green","blue"]);

	// Loading in running data
	d3.tsv("data.tsv", function(error, data) {

	// Making some modifications to the dataset
	var parseDate = d3.time.format("%M/%d/%Y").parse;
	var formatDate = d3.time.format("%M/%d");

	data.forEach(function(d) {
	d['Distance'] = +d['Distance'];
	d['Calories'] = +d['Calories'];
	d['Elevation Gain'] = +d['Elevation Gain'];
	d['Date'] = formatDate(parseDate(d['Date']));
	d['Elevation per Mile'] = d['Elevation Gain'] / d['Distance'];
	});

	// Setting the priority order for the chart series
	var priority_order = ['Tuesday', 'Wednesday', 'Thursday', 'Saturday', 'Sunday', 'Monday'];

	// Assigning key and main sort
	var topics = d3.nest()
	.key(function(d) { return d['Day of Week']; })
	.sortKeys(d3.ascending)
	.sortKeys(function(a,b) { return priority_order.indexOf(a) - priority_order.indexOf(b); })
	.entries(data);

	// SVG variable
	var svg = d3.select("body").selectAll("svg")
	.data(topics)
	.enter().append("svg")
	.attr("id", function(d) { return d.key; })
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.attr("class", function(d) { return "chart " + d.key; })
	.append("g")
	.attr("transform", "translate(" + (margin.left + 20) + "," + margin.top + ")")
	.each(multiple);

	// Legend
	var legend = d3.select("body")
	.append("svg")
	.attr("width", 1000)
	.attr("height", 30);

	// Adding Gradient
	var gradient = legend.append("svg:defs")
	.append("svg:linearGradient")
	.attr("id", "gradient")
	.attr("x1", "0%")
	.attr("y1", "0%")
	.attr("x2", "100%")
	.attr("y2", "0%");

	gradient.append("svg:stop")
	.attr("offset", "0%")
	.attr("stop-color", "green")
	.attr("stop-opacity", .3);

	gradient.append("svg:stop")
	.attr("offset", "100%")
	.attr("stop-color", "blue")
	.attr("stop-opacity", .7);

	legend.append("svg:rect")
	.attr("x", 790)
	.attr("width", 100)
	.attr("height", 10)
	.style("fill", "url(#gradient)");

	// Appending Legend text
	legend.append("text")
	.attr("x", 785)
	.attr("y", 5)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text("Elevation Gain per Mile (ft)");

	legend.append("text")
	.attr("x", 795)
	.attr("y", 15)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text("0");

	legend.append("text")
	.attr("x", 890)
	.attr("y", 15)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text("300");

	svg.append("text")
	.attr("x", 0)
	.attr("y", -8)
	.style("text-anchor", "top")
	.style("font", "14px sans-serif")
	.style("font-weight", "bold")
	.text(function(d) { return d.key; });


	// Begin function for each loop on line 125
	function multiple(topic) {

	var svg = d3.select(this);

	svg.append("rect")
	.attr("class","background")
	.attr("width", width)
	.attr("height", height);

	x.domain(topic.values
	.sort(function(a, b) { return d3.ascending(a['Date Value'],b['Date Value']); })
	.map(function(d) { return d['Date']; }));

	// add in the dots
	svg.selectAll(".square")
	.data(topic.values)
	.enter().append("rect")
	.attr("width", 10)
	.attr("height", function(d,i) { return height - y(d['Distance']); })
	.attr("rx", 2)
	.attr("ry", 2)
	.style("fill", function(d) { return colorScale(d['Elevation per Mile']); })
	.attr("class",function(d) { return "square " + d['Month'];})
	.attr("id",function(d) { return d['Type']; })
	.style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
	.attr("y", function(d,i) { return y(d['Distance']); })
	.attr("x", function(d, i) { return x(d['Date']); });

	// Axis Labels
	svg.selectAll("text")
	.data(topic.values)
	.enter().append("text")
	.attr("class", function(d) { return "title " + d['Month'] + "text"; })
	.attr("y", height + 6)
	.attr("text-anchor", "top")
	.style("writing-mode","tb-rl")
	.attr("x", function(d, i) { return x(d['Date']) + 5; })
	.text(function(d) { return d['Date']});

	// appending the axes
	svg.append("g")
	.attr("class", "x axis")
	.style("stroke-dasharray", function(d) {
	if(d.key == 'Overall') { return "0, 0" }
	else { return "1, 1" } })
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.style("stroke-dasharray", function(d) {
	if(d.key == 'Overall') { return "0, 0" }
	else { return "1, 1" } })
	.call(yAxis);


	// Interactive Events - Sorts

	// Sort by Date Descending
	function changeSortOne() {

	// turning off pointer events
	d3.selectAll(".square")
	.style("pointer-events","None");

	d3.selectAll(".title")
	.style("pointer-events","None");

	d3.select("body").selectAll("svg")
	.select("g")
	.each(change);

	function change(topic) {

	var svg = d3.select(this);

	x.domain(topic.values.sort(function(a, b) { return d3.descending(a['Date Value'],b['Date Value']); })
	.map(function(d) { return d['Date']; }));

	svg.selectAll(".square")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']); });

	svg.selectAll(".title")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']) + 5; });

	// turning pointer events back on
	d3.selectAll(".square")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	d3.selectAll(".title")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	}
	} // Ends Sort One

	d3.selectAll("#sort_one").on("click", changeSortOne);


	// Sort by Date Ascending
	function changeSortTwo() {

	// turning off pointer events
	d3.selectAll(".square")
	.style("pointer-events","None");

	d3.selectAll(".title")
	.style("pointer-events","None");

	d3.select("body").selectAll("svg")
	.select("g")
	.each(change);

	function change(topic) {

	var svg = d3.select(this);

	x.domain(topic.values.sort(function(a, b) { return d3.ascending(a['Date Value'],b['Date Value']); })
	.map(function(d) { return d['Date']; }));

	svg.selectAll(".square")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']); });

	svg.selectAll(".title")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']) + 5; });

	// turning pointer events back on
	d3.selectAll(".square")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	d3.selectAll(".title")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	}
	} // Ends Sort Two

	d3.selectAll("#sort_two").on("click", changeSortTwo);


	// Sort by Last Name
	function changeSortThree() {

	// turning off pointer events
	d3.selectAll(".square")
	.style("pointer-events","None");

	d3.selectAll(".title")
	.style("pointer-events","None");

	d3.select("body").selectAll("svg")
	.select("g")
	.each(change);

	function change(topic) {

	var svg = d3.select(this);

	x.domain(topic.values.sort(function(a, b) { return d3.descending(a['Elevation per Mile'],b['Elevation per Mile']); })
	.map(function(d) { return d['Date']; }));

	svg.selectAll(".square")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']); });

	svg.selectAll(".title")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']) + 5; });

	// turning pointer events back on
	d3.selectAll(".square")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	d3.selectAll(".title")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	}
	} // Ends Sort Three

	d3.selectAll("#sort_three").on("click", changeSortThree);


	// Sort by Elevation per Mile
	function changeSortFour() {

	// turning off pointer events
	d3.selectAll(".square")
	.style("pointer-events","None");

	d3.selectAll(".title")
	.style("pointer-events","None");

	d3.select("body").selectAll("svg")
	.select("g")
	.each(change);

	function change(topic) {

	var svg = d3.select(this);

	x.domain(topic.values.sort(function(a, b) { return d3.ascending(a['Elevation per Mile'],b['Elevation per Mile']); })
	.map(function(d) { return d['Date']; }));

	svg.selectAll(".square")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']); });

	svg.selectAll(".title")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']) + 5; });

	// turning pointer events back on
	d3.selectAll(".square")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	d3.selectAll(".title")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	}
	} // Ends Sort Four

	d3.selectAll("#sort_four").on("click", changeSortFour);


	// Sort by Distance Ascending
	function changeSortFive() {

	// turning off pointer events
	d3.selectAll(".square")
	.style("pointer-events","None");

	d3.selectAll(".title")
	.style("pointer-events","None");

	d3.select("body").selectAll("svg")
	.select("g")
	.each(change);

	function change(topic) {

	var svg = d3.select(this);

	x.domain(topic.values.sort(function(a, b) { return d3.ascending(a['Distance'],b['Distance']); })
	.map(function(d) { return d['Date']; }));

	svg.selectAll(".square")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']); });

	svg.selectAll(".title")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']) + 5; });

	// turning pointer events back on
	d3.selectAll(".square")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	d3.selectAll(".title")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	}
	} // Ends Sort Five

	d3.selectAll("#sort_five").on("click", changeSortFive);


	// Sort by Distane Descending
	function changeSortSix() {

	// turning off pointer events
	d3.selectAll(".square")
	.style("pointer-events","None");

	d3.selectAll(".title")
	.style("pointer-events","None");

	d3.select("body").selectAll("svg")
	.select("g")
	.each(change);

	function change(topic) {

	var svg = d3.select(this);

	x.domain(topic.values.sort(function(a, b) { return d3.descending(a['Distance'],b['Distance']); })
	.map(function(d) { return d['Date']; }));

	svg.selectAll(".square")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']); });

	svg.selectAll(".title")
	.transition()
	.duration(2000)
	.ease("bounce")
	.delay(function(d,i) { return i * 50; })
	.attr("x", function(d) { return x(d['Date']) + 5; });

	// turning pointer events back on
	d3.selectAll(".square")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	d3.selectAll(".title")
	.transition()
	.delay(4000)
	.style("pointer-events","all");

	}
	}

	d3.selectAll("#sort_six").on("click", changeSortSix);


	} // Ends Multiple Loop

	// Interactive Events - Hovers
	function hover(d, i) {

	d3.selectAll(".square")
	.transition()
	.duration(500)
	.style("fill-opacity", .1)
	.style("stroke-opacity", .2)
	.attr("y", function(d,i) { return height - 5; })
	.attr("height", 5);

	d3.selectAll("." + d['Month'])
	.transition()
	.ease("elastic")
	.duration(1500)
	.attr("height", function(d,i) { return height - y(d['Distance']); })
	.style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
	.attr("y", function(d,i) { return y(d['Distance']); })
	.style("stroke-opacity", 1);

	d3.selectAll("." + d['Month'] + "text")
	.style("fill-opacity", 1)
	.style("font-size", 13);

	}

	function hoverOut(d, i) {

	d3.selectAll(".square")
	.transition()
	.duration(500)
	.style("fill-opacity", function(d) { return opacityScale(d['Elevation per Mile']); })
	.style("stroke-opacity", .3)
	.attr("height", function(d,i) { return height - y(d['Distance']); })
	.attr("y", function(d,i) { return y(d['Distance']); });

	d3.selectAll(".title")
	.style("font-size", 10);

	}

	d3.selectAll(".square")
	.on("mouseover", hover)
	.on("mouseout", hoverOut);

	d3.selectAll(".title")
	.on("mouseover", hover)
	.on("mouseout", hoverOut);

	}); // Ends Data Function

	</script>
	</body>
	</html>