Added Start Positions and Colors

css/main.css

@@ -34,6 +34,5 @@ body {
 
 .line {
   fill: none;
-  stroke: steelblue;
+  stroke-width: 4px;
-  stroke-width: 2px;
 }

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);
   });
 

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;
+    }
+  },
+
 };

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% )";
+}