Merge pull request #7 from koalabears/tflapi

tfl requests for arrivals and data extraction from this data
koalabears · Oct 21, 2015 · e0e93ef · e0e93ef
2 parents 7a81908 + 629fa3c
commit e0e93ef
Show file tree

Hide file tree

Showing 2 changed files with 186 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>api test</title>
+  </head>
+  <body>
+    <div class="wrapper"></div>
+    <script type="text/javascript" src = "./main.js"></script>
+  </body>
+</html>
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+<style>
+
+path {
+  fill: none;
+  stroke: #000;
+  stroke-width: 3px;
+}
+
+circle {
+  fill: steelblue;
+  stroke: #fff;
+  stroke-width: 3px;
+}
+
+</style>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
diff --git a/main.js b/main.js
@@ -0,0 +1,155 @@
+var mainWrapper = document.querySelector('div.wrapper');
+var req = new XMLHttpRequest();
+req.open('GET', 'https://api.tfl.gov.uk/Line/Circle/arrivals?app_id=835f25cf&app_key=dc0f2d114ba4e4fa542473a670755267');
+req.onreadystatechange = function() {
+  if (req.readyState === 4) {
+    if (req.status === 200) {
+      var data = JSON.parse(req.responseText);
+      mainWrapper.innerHTML = 'fetch!';
+      allStationArrivalInfo = data.map(function(stationArrivalInfo) {
+        return {
+          stationNumber: getStationNumber(stationArrivalInfo.stationName),
+          direction: getDirectionFrom(stationArrivalInfo.towards),
+          time: stationArrivalInfo.timeToStation
+        };
+      });
+      allStationArrivalInfo = removeUnfoundStations(allStationArrivalInfo);
+      clockwiseData = filterByDirection('clockwise', allStationArrivalInfo);
+      var numStations = stopOrder.length;
+      var points = dataToCoords(numStations, createArrivalOutputData(clockwiseData));
+      console.log(points);
+      draw(points);
+    } else {
+      console.log('error. state = ', req.status);
+    }
+  }
+}
+req.send();
+
+function createArrivalOutputData(arrivalData) {
+  var out = stopOrder.map(function(stopName, stopIndex) {
+    return getShortestTimeForStationNumber(stopIndex, arrivalData) + 1;
+  });
+  return out;
+}
+
+function getShortestTimeForStationNumber(targetStationNumber, allStationArrivalInfo) {
+  var maxTime = 600;
+  var minTime = allStationArrivalInfo.reduce(function(minTime, stationArrivalInfo) {
+    if (stationArrivalInfo.stationNumber === targetStationNumber) {
+      var arrivalTime = stationArrivalInfo.time;
+      return minTime > arrivalTime ? arrivalTime : minTime;
+    } else {
+      return minTime;
+    }
+  }, maxTime);
+  return minTime/maxTime;
+}
+
+function removeUnfoundStations(allStationArrivalInfo) {
+  return allStationArrivalInfo.filter(function(stationArrivalInfo) {
+    return stationArrivalInfo.stationNumber !== -1
+  });
+}
+
+function dataToCoords(numberOfPoints, values) {
+  console.log(values);
+  return values.map(function(value, i) {
+    var angle = (i/numberOfPoints)*2*Math.PI;
+    var r = value;
+    return [(r*Math.cos(angle)+2)*100, (r*Math.sin(angle)+2)*100];
+  });
+}
+
+var stopOrder = [
+  'Edgware',
+  'Baker',
+  'Great',
+  'Euston',
+  'King\'s',
+  'Farringdon',
+  'Barbican',
+  'Moorgate',
+  'Liverpool',
+  'Aldgate',
+  'Tower',
+  'Monument',
+  'Cannon',
+  'Mansion',
+  'Blackfriars',
+  'Temple',
+  'Embankment',
+  'Westminster',
+  'St.',
+  'Victoria',
+  'Sloane',
+  'South',
+  'Gloucester',
+  'High',
+  'Notting',
+  'Bayswater',
+  'Paddington'
+];
+
+function getStationNumber(stationName) {
+
+  var stationNameFirstWord = stationName.split(' ')[0];
+  var index = stopOrder.indexOf(stationNameFirstWord);
+  if (index === -1) console.log(stationName);
+  return index;
+}
+
+
+
+function filterByDirection(direction, allStationArrivalInfo) {
+  return allStationArrivalInfo.filter(function(stationArrivalInfo) {
+    return stationArrivalInfo.direction === direction;
+  });
+}
+
+function getDirectionFrom(towards) {
+  return towards === 'Edgware Road (Circle)' ? 'clockwise' : 'anti-clockwise';
+}
+
+function draw(data) {
+
+  var points = data;
+
+  var svgContainer = d3.select("body").append("svg")
+      .attr("width", 960)
+      .attr("height", 500);
+
+  var path = svgContainer.
+    append("path").data([points]).attr("d",
+    d3.svg.line().tension(.5).interpolate("cardinal-closed"));
+
+  svgContainer.selectAll(".point")
+      .data(points)
+    .enter().append("circle")
+      .attr("r", 4)
+      .attr("transform", function(d) { return "translate(" + d + ")"; });
+
+  // var circle = svg.append("circle")
+  //     .attr("r", 13)
+  //     .attr("transform", "translate(" + points[0] + ")");
+  //
+  // transition();
+  //
+  // function transition() {
+  //   circle.transition()
+  //       .duration(10000)
+  //       .attrTween("transform", translateAlong(path.node()))
+  //       .each("end", transition);
+  // }
+  //
+  // // Returns an attrTween for translating along the specified path element.
+  // function translateAlong(path) {
+  //   var l = path.getTotalLength();
+  //   return function(d, i, a) {
+  //     return function(t) {
+  //       var p = path.getPointAtLength(t * l);
+  //       return "translate(" + p.x + "," + p.y + ")";
+  //     };
+  //   };
+  // }
+}