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) + diff --git a/js/diagrams.js b/js/diagrams.js index 2b52196..eb0b00e 100644 --- a/js/diagrams.js +++ b/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){