Hochschulprojekte/f1vis
0
0
Fork 0
Code Issues Pull Requests Activity

Merge branch 'master' into flo_branch

Browse Source
This commit is contained in:
Flo 2017-12-29 16:51:55 +01:00 committed by GitHub
commit 0846729561
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
cors_webserver.py Normal file
View File

@ -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)

32
js/diagrams.js
View File

@ -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){