diff --git a/css/main.css b/css/main.css index ce06fc0..cb71753 100644 --- a/css/main.css +++ b/css/main.css @@ -34,6 +34,5 @@ body { .line { fill: none; - stroke: steelblue; - stroke-width: 2px; + stroke-width: 4px; } diff --git a/js/diagrams.js b/js/diagrams.js index 9776cba..d8eb4e2 100644 --- a/js/diagrams.js +++ b/js/diagrams.js @@ -15,7 +15,7 @@ function createLineGraph(containerId, raceData){ var x = d3.scaleLinear().range([0, width]); var y = d3.scaleLinear().range([height, 0]); - var allLineData = raceDataToLineData(raceData); + var allLineData = transformRaceDataToLineData(raceData); // defines how the passed in Data, at "svg.append" shall be interpreted var lineDataDefinition = d3.line() @@ -37,10 +37,11 @@ function createLineGraph(containerId, raceData){ y.domain([raceData.drivers.length, 1]); // Adds all lines - allLineData.forEach((singleLineData) => { + allLineData.forEach((singleLineData, i) => { svg.append("path") .data([singleLineData]) .attr("class", "line") + .attr("stroke", getColorValue(i, allLineData.length) ) .attr("d", lineDataDefinition); }); diff --git a/js/processor.js b/js/processor.js index d08fbe8..1fb68d2 100644 --- a/js/processor.js +++ b/js/processor.js @@ -4,14 +4,14 @@ var processor = { getRace: function(raceId) { var race = { - drivers: null, + drivers: null, lapTimes: null, pitStops: null, qualifying: null, results: null, raceInfo: null }; - + race.drivers = queries.getDriversByRaceId(raceId); race.lapTimes = queries.getLapDataByRaceId(raceId); race.qualifying = queries.getQualifingDataByRaceId(raceId); @@ -25,5 +25,16 @@ var processor = { getRacesByYear: function(year) { var races = queries.getRacesByYear(year); return races.map(race => processor.getRace(race.raceId)); - } + }, + + //Gets the position of Driver with driverid in specific lap + getPositionOfDriver: function(driver, lap, defaultReturn){ + var lapEntryWithDrivId =lap.filter( drivLap => drivLap.driverId == driver.driverId ); + if(lapEntryWithDrivId.length > 0){ + return lapEntryWithDrivId[0].position; + }else{ + return defaultReturn; + } + }, + }; diff --git a/js/util.js b/js/util.js index 0664f04..db4dcae 100644 --- a/js/util.js +++ b/js/util.js @@ -38,27 +38,37 @@ var loadingDialog = { }, }; -//Gets the position of Driver with driverid in specific lap -function getPositionOfDriver(driver, lap, defaultReturn){ - var lapEntryWithDrivId =lap.filter( drivLap => drivLap.driverId == driver.driverId ); - if(lapEntryWithDrivId.length > 0){ - return lapEntryWithDrivId[0].position; - }else{ - return defaultReturn; - } -} - // transforms the raceData to a format, with which lineDataDefinition can work -function raceDataToLineData(raceData){ +function transformRaceDataToLineData(raceData){ // define the lines var lineData = []; raceData.drivers.forEach((driver, drivIn)=>{ lineData.push(); var lapsOfDriverInLineDataFormat = []; + lapsOfDriverInLineDataFormat.push({'lap': 0, 'position': getPositionOfQualifying(raceData, driver) }); raceData.lapTimes.forEach((lap, lapIn) => { - lapsOfDriverInLineDataFormat.push({ 'lap': lapIn, 'position': getPositionOfDriver(driver, lap, raceData.drivers.length)}); + var drivPos = processor.getPositionOfDriver(driver, lap, raceData.drivers.length + 1 ); + if( drivPos < raceData.drivers.length + 1 ){ + lapsOfDriverInLineDataFormat.push({ 'lap': lapIn, 'position': processor.getPositionOfDriver(driver, lap, raceData.drivers.length + 1 )}); + } }); lineData.splice(drivIn, 0, lapsOfDriverInLineDataFormat); }); return lineData; } + +function getPositionOfQualifying(raceData, driver){ + var qualData = raceData.qualifying.filter( qualData => qualData.driverId == driver.driverId); + return qualData[0].position; +} + +function getColorValue(index, all){ + var r = 0; + var g = 0; + var b = 0; + + var step = 255*3 / all; + var colorValue = index * step; + + return "hsl(" + colorValue + ", " + 100 + "%, 35% )"; +}