From 6b2e74f29253586efd773212a68532acaac92f7d Mon Sep 17 00:00:00 2001 From: sirsandmann Date: Fri, 29 Dec 2017 14:20:58 +0100 Subject: [PATCH 1/3] Added right Y-Axis names for driver ended race 1 round after first --- js/diagrams.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/js/diagrams.js b/js/diagrams.js index 0fc9488..4fa5deb 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -104,9 +104,7 @@ function createLineGraph(containerId, raceData){ // in case the driver ended the race too early, get the status why he quit /*TODO: Mouseover for Rectangle*/ var resultOfDriver = raceData.results.filter((result) => { return result.driverId == driverLapData.driver.driverId; }); - console.log(resultOfDriver); if(resultOfDriver.length > 0 && getValidEndingStatusIds().indexOf(resultOfDriver[0].statusId) < 0){ - console.log("not ended properly"); var triangle = d3.symbol() .type(d3.symbolTriangle) .size(25); @@ -157,7 +155,13 @@ function createLineGraph(containerId, raceData){ d3.axisRight(y) .ticks(raceData.drivers.length) .tickFormat(function(d) { - return d + " " + getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) ; + var driverCode = ""; + if(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d)){ + driverCode = getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d); + }else{ + driverCode = getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size - 1, d); + } + return d + " " + driverCode ; }) ) .attr("transform", "translate( " + (width) + ", 0 )"); @@ -279,7 +283,9 @@ function createLineGraph(containerId, raceData){ driverCode = getDriverCodeById(raceData,raceData.results[pos -1].driverId); } }else{ - //TODO hier Adden + if(raceData.lapTimes.get(lapNr)[pos-1]){ + driverCode = getDriverCodeById(raceData, raceData.lapTimes.get(lapNr)[pos-1].driverId); + } } return driverCode; } From bbd92e3bdacc490129449cc83a3639861fb63a97 Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Fri, 29 Dec 2017 16:28:34 +0100 Subject: [PATCH 2/3] 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); } From 5d5e0d3d52ebc6dbfd0391a570d196c9350639b3 Mon Sep 17 00:00:00 2001 From: sirsandmann Date: Fri, 29 Dec 2017 16:42:41 +0100 Subject: [PATCH 3/3] Added Rectangle Text for Endpoints --- js/diagrams.js | 94 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 66 insertions(+), 28 deletions(-) diff --git a/js/diagrams.js b/js/diagrams.js index 4fa5deb..2b52196 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -13,7 +13,6 @@ function createLineGraph(containerId, raceData){ var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData); - // Configuration var height = 720; var width = 1080; @@ -21,6 +20,14 @@ function createLineGraph(containerId, raceData){ var rectSize = 10; var amountClickedLines = 0; + //ElemTypes of this graph + var elemTypes = { + line: "line", + linepoint: "linepoint", + pitstoppoint: "pitstoppoint", + endpoint: "endpoint" + }; + // set the dimensions and margins of the graph var margin = {top: 50, right: 100, bottom: 50, left: 100}, width = width - margin.left - margin.right, @@ -61,6 +68,7 @@ function createLineGraph(containerId, raceData){ .attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line .attr("data-opacitychange", 1) .attr("data-highlighted", 0) + .attr("data-elemtype", elemTypes.line) .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) ) .attr("d", lineDataDefinition); @@ -72,6 +80,7 @@ function createLineGraph(containerId, raceData){ .attr("data-line", driverLapData.driver.driverId) .attr("data-opacitychange", 0) .attr("data-highlighted", 0) + .attr("data-elemtype", elemTypes.linepoint) .attr("fill", getColorValue(driverIndex, enhancedLapData.length)) .attr("cx", function(d, i) {return x(d.lap) }) .attr("cy", function(d, i) { return y(d.position) }) @@ -87,10 +96,11 @@ function createLineGraph(containerId, raceData){ svg.selectAll(".pitstoppoint") .data([singleLap]) .enter().append("circle") // Uses the enter().append() method - .attr("class", "dot pitstopdot") // Assign a class for styling + .attr("class", "dot pitstoppoint") // Assign a class for styling .attr("data-line", driverLapData.driver.driverId) .attr("data-opacitychange", 1) .attr("data-highlighted", 0) + .attr("data-elemtype", elemTypes.pitstoppoint) .attr("fill", getColorValue(driverIndex, enhancedLapData.length)) .attr("cx", function(d, i) {return x(d.lap) }) .attr("cy", function(d, i) { return y(d.position) }) @@ -112,15 +122,19 @@ function createLineGraph(containerId, raceData){ svg.selectAll(".endpoint") .data([driverLapData.laps[driverLapData.laps.length - 1]]) .enter().append("rect") // Uses the enter().append() method - .attr("class", "dot pitstopdot") // Assign a class for styling + //.attr("class", "endpoint") // Assign a class for styling .attr("data-line", driverLapData.driver.driverId) .attr("data-opacitychange", 1) .attr("data-highlighted", 0) + .attr("data-elemtype", elemTypes.endpoint) .attr("fill", getColorValue(driverIndex, enhancedLapData.length)) .attr("x", function(d, i) {return x(d.lap) - rectSize * 1/2 }) .attr("y", function(d, i) { return y(d.position) - rectSize * 1/2 }) .attr("height", rectSize) - .attr("width", rectSize); + .attr("width", rectSize) + .on("click", handleClickOnPoint) + .on("mouseover", handleMouseOverLinePoint) + .on("mouseout", handleMouseOutLinePoint); /* tried with Cross, didn't work, don't know why svg.selectAll(".endpoint") @@ -167,7 +181,7 @@ function createLineGraph(containerId, raceData){ .attr("transform", "translate( " + (width) + ", 0 )"); function handleClickOnPoint(d,i){ - + console.log(d); //select elements that are highlightable but are not highlighted d3.selectAll("[data-opacitychange='" + 1 +"'][data-highlighted='" + 0 +"']") .style("opacity", 0.3); @@ -198,22 +212,25 @@ function createLineGraph(containerId, raceData){ } function handleMouseOverLinePoint(d, i) { - // Add interactivity - // Use D3 to select element, change color and size - if(!d.pitStop){ - d3.select(this) - .style("opacity", 1); - }else{ - d3.select(this) - .attr("r", linePointSize * 2); - } - + var dataType = d3.select(this).attr("data-elemtype"); //depending on Pitstop and lap different Texts var textArr = []; - if(d.pitStop){ - textArr = getPitStopTextArray(raceData,d); - }else{ + + // Add interactivity + // Use D3 to select element, change color and size + if(dataType === elemTypes.linepoint){ + d3.select(this) + .style("opacity", 1); textArr = getLapTextArray(raceData,d); + }else if(dataType === elemTypes.pitstoppoint){ + d3.select(this) + .attr("r", linePointSize * 2); + textArr = getPitStopTextArray(raceData,d); + }else if(dataType === elemTypes.endpoint){ + d3.select(this) + .attr("height", rectSize * 1.3) + .attr("width", rectSize * 1.3); + textArr = getEndPointTextArray(raceData,d); } //Necessary to add Text for each Line @@ -232,22 +249,25 @@ 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 = []; + // Use D3 to select element, change color back to normal - if(!d.pitStop){ + if(dataType === elemTypes.linepoint){ d3.select(this) .attr("r", linePointSize) .style("opacity", 0); - }else{ + textArr = getLapTextArray(raceData,d); + }else if(dataType === elemTypes.pitstoppoint){ d3.select(this) .attr("r", linePointSize); - } - - //depending on Pitstop and lap different Texts - var textArr = []; - if(d.pitStop){ textArr = getPitStopTextArray(raceData,d); - }else{ - textArr = getLapTextArray(raceData,d); + }else if(dataType === elemTypes.endpoint){ + d3.select(this) + .attr("height", rectSize) + .attr("width", rectSize); + textArr = getEndPointTextArray(raceData,d); } textArr.forEach((text, textIndex)=> { @@ -257,7 +277,7 @@ function createLineGraph(containerId, raceData){ } function getLapTextArray(raceData, d){ - var driverText = getDriverCodeById(raceData,d.driverId) + var driverText = getDriverCodeById(raceData,d.driverId); var lapText = "Lap: " + d.lap; var posText = "Pos: " + d.position; var timeText = "Time: " + d.time; @@ -271,6 +291,24 @@ function createLineGraph(containerId, raceData){ return lapTextArr; } + function getEndPointTextArray(raceData, d){ + var status = ""; + var endTextArr = getLapTextArray(raceData,d); + var allStatus = queries.getStatus(); + + for(var key in allStatus){ + if(key === undefined) continue; + if(allStatus[key].statusId === d.finished.statusId){ + status = allStatus[key].status; + } + } + + + endTextArr.push("Reason: " + status); + + return endTextArr; + } + function getDriverCodeFromPosAndLap(raceData, lapNr, pos){ var driverCode = ""; if(lapNr == 0){