Merge branch 'master' into flo_branch

cors_webserver.py

@@ -0,0 +1,19 @@
+#!/usr/bin/env python3
+try:
+    # Python 3
+    from http.server import HTTPServer, SimpleHTTPRequestHandler, test as test_orig
+    import sys
+    def test (*args):
+        test_orig(*args, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)
+except ImportError: # Python 2
+    from BaseHTTPServer import HTTPServer, test
+    from SimpleHTTPServer import SimpleHTTPRequestHandler
+
+class CORSRequestHandler (SimpleHTTPRequestHandler):
+    def end_headers (self):
+        self.send_header('Access-Control-Allow-Origin', '*')
+        SimpleHTTPRequestHandler.end_headers(self)
+
+if __name__ == '__main__':
+    test(CORSRequestHandler, HTTPServer)
+

js/diagrams.js

@@ -77,6 +77,7 @@ function createLineGraph(containerId, raceData){
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
           .attr("class", "dot linedot") // Assign a class for styling
+          .attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
           .attr("data-line", driverLapData.driver.driverId)
           .attr("data-opacitychange", 0)
           .attr("data-highlighted", 0)
@@ -85,6 +86,21 @@ function createLineGraph(containerId, raceData){
           .attr("cx", function(d, i) {return x(d.lap) })
           .attr("cy", function(d, i) { return y(d.position) })
           .attr("r", linePointSize)
+          .style("opacity", 0);
+
+      //Appends a circle for each datapoint
+      svg.selectAll(".invisiblelinepoint")
+          .data(driverLapData.laps)
+          .enter().append("circle") // Uses the enter().append() method
+          .attr("class", "dot linedot") // Assign a class for styling
+          .attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
+          .attr("data-line", driverLapData.driver.driverId)
+          .attr("data-opacitychange", 0)
+          .attr("data-highlighted", 0)
+          .attr("fill", getColorValue(driverIndex, enhancedLapData.length))
+          .attr("cx", function(d, i) {return x(d.lap) })
+          .attr("cy", function(d, i) { return y(d.position) })
+          .attr("r", linePointSize*2.4)
           .on("click", handleClickOnPoint)
           .on("mouseover", handleMouseOverLinePoint)
           .on("mouseout", handleMouseOutLinePoint)
@@ -212,18 +228,21 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOverLinePoint(d, i) {
+
     var dataType = d3.select(this).attr("data-elemtype");
     //depending on Pitstop and lap different Texts
     var textArr = [];
-
+    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
+    var circle = d3.select("#" + circleId);
+    
     // Add interactivity
     // Use D3 to select element, change color and size
     if(dataType === elemTypes.linepoint){
-      d3.select(this)
+      circle
         .style("opacity", 1);
       textArr = getLapTextArray(raceData,d);
     }else if(dataType === elemTypes.pitstoppoint){
-      d3.select(this)
+      circle
         .attr("r", linePointSize * 2);
       textArr = getPitStopTextArray(raceData,d);
     }else if(dataType === elemTypes.endpoint){
@@ -249,18 +268,21 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOutLinePoint(d, i) {
+
     var dataType = d3.select(this).attr("data-elemtype");
     //depending on Pitstop and lap different Texts
     var textArr = [];
+    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
+    var circle = d3.select("#" + circleId);
 
     // Use D3 to select element, change color back to normal
     if(dataType === elemTypes.linepoint){
-      d3.select(this)
+      circle
         .attr("r", linePointSize)
         .style("opacity", 0);
       textArr = getLapTextArray(raceData,d);
     }else if(dataType === elemTypes.pitstoppoint){
-      d3.select(this)
+      circle
         .attr("r", linePointSize);
       textArr = getPitStopTextArray(raceData,d);
     }else if(dataType === elemTypes.endpoint){