- (temporarily) disabled the loading window (until it's working properly..)

- changed the dimensons of the diagram. Now all mouseover text fit in
- Only show years with lapData.
- return arrays instead of objects in the preprocessor for the races and seaons

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

@@ -6,11 +6,11 @@ function createLineGraph(containerId, raceData){
 
   console.log(raceData);
 
-  var height = 1000;
+  var height = 720;
-  var width = 1000;
+  var width = 1080;
 
   // 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;
 

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

@@ -79,6 +79,16 @@ var processor = {
   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

@@ -128,6 +128,25 @@ var queries = {
 
     return races;
 
+  },
+  
+   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) {

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;