Resolved Merge Conflict

index.html

@@ -36,8 +36,7 @@
 
 
     <main role="main" class="container">
-
+      <div class="content-box">
-      <div class="container">
         <form>
           <div class="form-group">
             <label for="seasonByYearSelector">Wähle ein Jahr aus!</label>
@@ -48,26 +47,10 @@
         </form>
       </div>
 
-
-      <div class="content-box">
-        <h1>Rennen, Brumm, Brumm!</h1>
-        <p class="lead">
-         Eingerückt wird mit 2 Leerzeichen pro Einrückungsebene.<br>
-         Charset ist UTF-8.<br>
-         TODO
-        </p>
-      </div>
-
       <div class="content-box chart-box">
-        <p>Hier erscheint gleich ein Diagramm.</p>
         <div id="lineGraphBox"></div>
       </div>
 
-      <div class="content-box chart-box">
-        <p>Hier erscheint gleich ein Test-Diagramm.</p>
-        <div id="testchartbox"></div>
-      </div>
-
     </main><!-- /.container -->
 
 

js/diagrams.js

@@ -2,6 +2,8 @@
 
 // https://bl.ocks.org/mbostock/3884955
 function createLineGraph(containerId, raceData){
+  var linePointSize = 4;
+
   console.log(raceData);
 
   var height = 1000;
@@ -10,7 +12,7 @@ function createLineGraph(containerId, raceData){
   var amountClickedLines = 0;
 
   // set the dimensions and margins of the graph
-  var margin = {top: 20, right: 20, bottom: 30, left: 50},
+  var margin = {top: 50, right: 100, bottom: 50, left: 100},
       width = width - margin.left - margin.right,
       height = height - margin.top - margin.bottom;
 
@@ -42,13 +44,10 @@ function createLineGraph(containerId, raceData){
 
   // Adds all lines
   enhancedLapData.forEach((driverLapData, driverIndex) => {
-    //console.log(driverLapData);
+    console.log(driverLapData);
       svg.append("path")
           .data([driverLapData.laps])
           .attr("class", "line")
-          .attr("data-line", driverLapData.driver.driverId)// custom data to Specify the line
-          .attr("data-highlightable", 1)
-          .attr("data-highlighted", 0)
           .attr("stroke", getColorValue(driverIndex, enhancedLapData.length) )
           .attr("d", lineDataDefinition);
 
@@ -56,15 +55,11 @@ function createLineGraph(containerId, raceData){
       svg.selectAll(".linepoint")
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
-          .attr("class", "dot linedot") // Assign a class for styling
+          .attr("class", "dot") // Assign a class for styling
-          .attr("data-line", driverLapData.driver.driverId)
-          .attr("data-highlightable", 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)
-          .on("click", handleClickOnPoint)
           .on("mouseover", handleMouseOverLinePoint)
           .on("mouseout", handleMouseOutLinePoint)
           .style("opacity", 0);
@@ -75,15 +70,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") // Assign a class for styling
-              .attr("data-line", driverLapData.driver.driverId)
-              .attr("data-highlightable", 1)
-              .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 * 1.2)
-              .on("click", handleClickOnPoint)
               .on("mouseover", handleMouseOverLinePoint)
               .on("mouseout", handleMouseOutLinePoint);
         }
@@ -103,35 +94,6 @@ function createLineGraph(containerId, raceData){
       .call(d3.axisRight(y))
       .attr("transform", "translate( " + (width) + ", 0 )");
 
-  function handleClickOnPoint(d,i){
-      console.log(this);
-      //select elements that are highlightable but are not highlighted
-      d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']")
-        .style("opacity", 0.3);
-
-      // if clicked on already highlighted line, remove highlight
-      if(this.getAttribute("data-highlighted") == 1){
-        d3.selectAll("[data-line='" +  d.driverId  +"'][data-highlightable='" + 1 +"']")
-          .attr("data-highlighted", 0)
-          .style("opacity", 0.3);
-      }else{
-        //select elements that belong to line and are highlightable
-        d3.selectAll("[data-line='" +  d.driverId  +"'][data-highlightable='" + 1 +"']")
-          .attr("data-highlighted", 1)
-          .style("opacity", 1);
-      }
-
-      // if no element highlighted, then everything normal again
-      var highlightedElements = d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 1 +"']");
-      console.log(highlightedElements);
-      if(highlightedElements.size() == 0){
-        //select elements that are highlightable but are not highlighted
-        d3.selectAll("[data-highlightable='" + 1 +"'][data-highlighted='" + 0 +"']")
-          .style("opacity", 1);
-      }
-
-  }
-
   function handleMouseOverLinePoint(d, i) {
     // Add interactivity
     // Use D3 to select element, change color and size

js/main.js

@@ -7,8 +7,8 @@
 preprocessor.load(function(data) {
   // Some sample code for a year selector - TODO: Improve a lot and move somewhere else
   var yearSelector = $("#seasonByYearSelector");
-  var seasons = preprocessor.getResults().seasons;
+  var seasons = processor.getSeasonsWithLapData();
-  for(var year in seasons) yearSelector.append("<option>" + year + "</option>");
+  for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
 
   createLineGraph("#lineGraphBox", processor.getRace(970));
 });

js/preprocessor.js

@@ -201,7 +201,6 @@ var preprocessor = {
   // data/races.csv
   fetchRaces: function (callback) {
     d3.csv('data/races.csv', function(data) {
-      var result = {};
       // preprocess data
       data.forEach(function(d, i) {
         d["circuitId"] = parseInt(d["circuitId"]);
@@ -210,10 +209,8 @@ var preprocessor = {
         d["round"] = parseInt(d["round"]);
         d["time"] = new Date(d["time"]);
         d["year"] = parseInt(d["year"]);
-        // store processed data by its primary key in an object
-        result[d["raceId"]] = d;
       });
-      preprocessor.results.races = result; // Store results
+      preprocessor.results.races = data; // Store results
       loadingDialog.itemFinished(); // Update loading dialog progress bar
       callback(null); // Tell the queue we're done.
     });
@@ -254,14 +251,11 @@ var preprocessor = {
   // data/seasons.csv
   fetchSeasons: function (callback) {
     d3.csv('data/seasons.csv', function(data) {
-      var result = {};
       // preprocess data
       data.forEach(function(d, i) {
         d["year"] = parseInt(d["year"]);
-        // store processed data by its primary key in an object
-        result[d["year"]] = d;
       });
-      preprocessor.results.seasons = result; // Store results
+      preprocessor.results.seasons = data; // Store results
       loadingDialog.itemFinished(); // Update loading dialog progress bar
       callback(null); // Tell the queue we're done.
     });

js/processor.js

@@ -23,7 +23,7 @@ var processor = {
     return race;
   },
 
-getEnhancedLapDataPerDriver: function(raceData) {
+  getEnhancedLapDataPerDriver: function(raceData) {
     var result = [];
     raceData.drivers.forEach((driver) => {
       var lapData = {
@@ -34,14 +34,23 @@ getEnhancedLapDataPerDriver: function(raceData) {
       //Attach Qualifying Data
       lapData.qualifying = processor.getQualifyingForDriver(raceData, driver);
       //add Qualifying Data to the Laps
-                lapData.laps.push({'driverId': driver.driverId, 'lap': 0, 'position': lapData.qualifying.position})
+      var lap0 = {'driverId': driver.driverId, 'lap': 0, 'position': lapData.qualifying.position};                
+      var endResult = raceData.results.filter(res => res.driverId == driver.driverId && res.laps == 0);
+      if(endResult.length > 0){
+        lap0.finished = endResult[0];
+      }
+      lapData.laps.push(lap0);
       raceData.lapTimes.forEach(lap => {
         lap.forEach(curLap => {
           if( curLap.driverId == driver.driverId ){
             var pitstop = raceData.pitStops.filter(pitstop => pitstop.driverId == driver.driverId && pitstop.lap == curLap.lap);
+            var endResult = raceData.results.filter(res => res.driverId == driver.driverId && res.laps == curLap.lap);
             if(pitstop.length > 0){
               curLap.pitStop = pitstop[0];
             }
+            if(endResult.length > 0){
+              curLap.finished = endResult[0];
+            }
             lapData.laps.push(curLap);
           }
         });
@@ -70,6 +79,16 @@ getEnhancedLapDataPerDriver: function(raceData) {
   getQualifyingForDriver: function(raceData, driver){
     var qualData = raceData.qualifying.filter( qualData => qualData.driverId == driver.driverId);
     return qualData[0];
+  },
+  
+  getSeasonsWithLapData: function(){
+    var seasons = queries.getSeasons();
+    var raceIds = queries.getRaceIdWithLapTimes();
+    var races = queries.getRaces().filter(race => raceIds.includes(race.raceId));
+    
+    var seasonsWithLapData = seasons.filter((season) => races.filter(race => race.year == season.year).length > 0).reduce(removeDuplicates,[]);
+    seasonsWithLapData.sort((o1,o2) => o1["year"] - o2["year"]);
+    return seasonsWithLapData;
   }
 
 };

js/queries.js

@@ -130,6 +130,25 @@ var queries = {
 
   },
   
+   getSeasons: function(){
+    var rawData = preprocessor.getResults();
+    return rawData.seasons;
+  },
+  
+  getLapTimes: function(){
+    var rawData = preprocessor.getResults();
+    return rawData.lapTimes;
+  },
+  
+  getRaces: function(){
+    var rawData = preprocessor.getResults();   
+    return rawData.races;
+  },
+  
+  getRaceIdWithLapTimes: function(){
+    return queries.getLapTimes().map(time => time.raceId).reduce(removeDuplicates,[]);
+  },
+
   getQualifingDataByRaceId: function(raceId) {
     var rawData = preprocessor.getResults();
 

js/util.js

@@ -16,7 +16,7 @@ var loadingDialog = {
     this.progressItems = progressItems;
     this.progressItemsDone = 0;
     this._updateProgressBar();
-    $(this.id).modal('show');
+    //$(this.id).modal('show');
   },
   // Function to signal that another item was progressed
   itemFinished: function() {
@@ -27,7 +27,7 @@ var loadingDialog = {
   // Hide the dialog
   hide: function() {
     console.log("hide");
-    $(this.id).modal('hide');
+    //$(this.id).modal('hide');
   },
   // Private function to update the progress bar shown
   _updateProgressBar: function() {
@@ -90,6 +90,11 @@ function getDriverCodeById(raceData,driverId){
   return raceData.drivers.filter(driv=> driv.driverId == driverId)[0].code;
 }
 
+function removeDuplicates(result,obj){ 
+  if (result.indexOf(obj) < 0 ) result.push(obj);
+  return result;
+}
+
 function getColorValue(index, all){
   var r = 0;
   var g = 0;

python3_run.bat

@@ -0,0 +1 @@
+python -m http.server