From 4c99a50153bb114d4571e6964cc04b3e324e5114 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Fri, 29 Dec 2017 13:16:33 +0100
Subject: [PATCH 1/2] Add CORS capable webserver

---
 cors_webserver.py | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 cors_webserver.py

diff --git a/cors_webserver.py b/cors_webserver.py
new file mode 100644
index 0000000..e8cd308
--- /dev/null
+++ b/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)
+

From bbd92e3bdacc490129449cc83a3639861fb63a97 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Fri, 29 Dec 2017 16:28:34 +0100
Subject: [PATCH 2/2] Enhance mouse experience

---
 js/diagrams.js | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/js/diagrams.js b/js/diagrams.js
index 0fc9488..7116e8f 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -69,6 +69,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)
@@ -76,6 +77,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)
@@ -194,13 +210,16 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOverLinePoint(d, i) {
+    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(!d.pitStop){
-      d3.select(this)
+      circle
         .style("opacity", 1);
     }else{
-      d3.select(this)
+      circle
         .attr("r", linePointSize * 2);
     }
 
@@ -228,13 +247,15 @@ function createLineGraph(containerId, raceData){
   }
 
   function handleMouseOutLinePoint(d, i) {
+    var circleId = "circle-linepoint-" + d.lap + "-" + d.driverId;
+    var circle = d3.select("#" + circleId);
     // Use D3 to select element, change color back to normal
     if(!d.pitStop){
-      d3.select(this)
+      circle
         .attr("r", linePointSize)
         .style("opacity", 0);
     }else{
-      d3.select(this)
+      circle
         .attr("r", linePointSize);
     }