Move preprocessing code into its own file

index.html

@@ -59,7 +59,7 @@
     <div id="loading-dialog" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:visible;">
       <div class="modal-dialog modal-m">
         <div class="modal-content">
-          <div class="modal-header">Denkpause ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
+          <div class="modal-header">Wir bereiten gerade alles vor ...<br>Bitte haben Sie einen Augenblick Geduld.</div>
           <div class="modal-body">
             <div class="progress" style="margin-bottom:0;">
               <div class="progress-bar progress-bar-striped progress-bar-animated active" style="width:100%"></div>
@@ -79,6 +79,7 @@
     ================================================== -->
     <script type="text/javascript" src="js/d3/d3.min.js"></script>
     <script type="text/javascript" src="js/util.js"></script>
+    <script type="text/javascript" src="js/preprocessor.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
   </body>
 </html>

js/main.js

@@ -4,252 +4,6 @@
  * This file contains the main control flow.
  */
 
-/* Globally define the places where the preprocessed data is stored for READ ONLY ACCESS. */
-
-var f1Data = {
-  circuits: null,
-  constructorResults: null,
-  constructors: null,
-  constructorStandings: null,
-  drivers: null,
-  driverStandings: null,
-  lapTimes: null,
-  pitStops: null,
-  qualifying: null,
-  races: null,
-  results: null,
-  seasons: null
-};
-
-/* Define the functions responsible for fetching+preprocessing data */
-
-// data/circuits.csv
-function fetchCircuits(callback) {
-  d3.csv('data/circuits.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["circuitId"] = parseInt(d["circuitId"]);
-      d["lat"] = parseFloat(d["lat"]);
-      d["lng"] = parseFloat(d["lng"]);
-      d["alt"] = parseInt(d["alt"]);
-    });
-    f1Data.circuits = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/constructorResults.csv
-function fetchConstructorResults(callback) {
-  d3.csv('data/constructorResults.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["constructorId"] = parseInt(d["constructorId"]);
-      d["constructorResultsId"] = parseInt(d["constructorResultsId"]);
-      d["points"] = parseInt(d["points"]);
-      d["raceId"] = parseInt(d["raceId"]);
-      d["status"] = parseInt(d["status"]);
-    });
-    f1Data.constructorResults = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/constructors.csv
-function fetchConstructors(callback) {
-  d3.csv('data/constructors.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["constructorId"] = parseInt(d["constructorId"]);
-    });
-    f1Data.constructors = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/constructorStandings.csv
-function fetchConstructorStandings(callback) {
-  d3.csv('data/constructorStandings.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["constructorId"] = parseInt(d["constructorId"]);
-      d["constructorStandingsId"] = parseInt(d["constructorStandingsId"]);
-      d["points"] = parseInt(d["points"]);
-      d["position"] = parseInt(d["position"]);
-      d["raceId"] = parseInt(d["raceId"]);
-      d["wins"] = parseInt(d["wins"]);
-    });
-    f1Data.constructorStandings = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/drivers.csv
-function fetchDrivers(callback) {
-  d3.csv('data/drivers.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["dob"] = new Date(d["dob"]);
-      d["driverId"] = parseInt(d["driverId"]);
-      d["number"] = parseInt(d["number"]);
-    });
-    f1Data.drivers = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/driverStandings.csv
-function fetchDriverStandings(callback) {
-  d3.csv('data/driverStandings.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["driverId"] = parseInt(d["driverId"]);
-      d["driverStandingsId"] = parseInt(d["driverStandingsId"]);
-      d["points"] = parseInt(d["points"]);
-      d["position"] = parseInt(d["position"]);
-      d["raceID"] = parseInt(d["raceId"]);
-      d["wins"] = parseInt(d["wins"]);
-    });
-    f1Data.driverStandings = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/lapTimes.csv
-function fetchLapTimes(callback) {
-  d3.csv('data/lapTimes.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["driverId"] = parseInt(d["driverId"]);
-      d["lap"] = parseInt(d["lap"]);
-      d["milliseconds"] = parseInt(d["milliseconds"]);
-      d["position"] = parseInt(d["position"]);
-      d["raceId"] = parseInt(d["raceId"]);
-    });
-    f1Data.lapTimes = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/pitStops.csv
-function fetchPitStops(callback) {
-  d3.csv('data/pitStops.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["driverId"] = parseInt(d["driverId"]);
-      d["duration"] = parseFloat(d["duration"]);
-      d["lap"] = parseInt(d["lap"]);
-      d["milliseconds"] = parseInt(d["milliseconds"]);
-      d["raceId"] = parseInt(d["raceId"]);
-      d["stop"] = parseInt(d["stop"]);
-    });
-    f1Data.pitStops = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/qualifying.csv
-function fetchQualifying(callback) {
-  d3.csv('data/qualifying.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["constructorId"] = parseInt(d["constructorId"]);
-      d["driverId"] = parseInt(d["driverId"]);
-      d["number"] = parseInt(d["number"]);
-      d["position"] = parseInt(d["position"]);
-      d["q1"] = new Date(d["q1"]);
-      d["q2"] = new Date(d["q2"]);
-      d["q3"] = new Date(d["q3"]);
-      d["qualifyId"] = parseInt(d["qualifyId"]);
-      d["raceId"] = parseInt(d["raceId"]);
-    });
-    f1Data.qualifying = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/races.csv
-function fetchRaces(callback) {
-  d3.csv('data/races.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["circuitId"] = parseInt(d["circuitId"]);
-      d["date"] = new Date(d["date"]);
-      d["raceId"] = parseInt(d["raceId"]);
-      d["round"] = parseInt(d["round"]);
-      d["time"] = new Date(d["time"]);
-      d["year"] = parseInt(d["year"]);
-    });
-    f1Data.races = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/results.csv
-function fetchResults(callback) {
-  d3.csv('data/results.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["constructorId"] = parseInt(d["constructorId"]);
-      d["driverId"] = parseInt(d["driverId"]);
-      d["fastestLap"] = parseInt(d["fastestLap"]);
-      d["fastestLapSpeed"] = parseFloat(d["fastestLapSpeed"]);
-      d["fastestLapTime"] = new Date(d["fastestLapTime"]);
-      d["grid"] = parseInt(d["grid"]);
-      d["laps"] = parseInt(d["laps"]);
-      d["milliseconds"] = parseInt(d["milliseconds"]);
-      d["number"] = parseInt(d["number"]);
-      d["points"] = parseInt(d["points"]);
-      d["position"] = parseInt(d["position"]);
-      d["positionOrder"] = parseInt(d["positionOrder"]);
-      d["raceId"] = parseInt(d["raceId"]);
-      d["rank"] = parseInt(d["rank"]);
-      d["resultId"] = parseInt(d["resultId"]);
-      d["statusId"] = parseInt(d["statusId"]);
-      d["time"] = new Date(d["time"]);
-    });
-    f1Data.results = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/seasons.csv
-function fetchSeasons(callback) {
-  d3.csv('data/seasons.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["year"] = parseInt(d["year"]);
-    });
-    f1Data.seasons = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-// data/status.csv
-function fetchStatus(callback) {
-  d3.csv('data/status.csv', function(data) {
-    // preprocess data
-    data.forEach(function(d, i) {
-      d["statusId"] = parseInt(d["statusId"]);
-    });
-    f1Data.status = data; // Store results
-    loadingDialog.itemFinished(); // Update loading dialog progress bar
-    callback(null); // Tell the queue we're done.
-  });
-}
-
-/* This is where the actual control flow is defined */
 console.log("Let's load and preprocess all data properly.");
 
 // Show loading dialog
@@ -257,19 +11,19 @@ loadingDialog.show(13);
 
 // Create a queue, add all the fetch&process functions and await their results
 d3.queue()
-  .defer(fetchCircuits)
+  .defer(preprocessor.fetchCircuits)
-  .defer(fetchConstructorResults)
+  .defer(preprocessor.fetchConstructorResults)
-  .defer(fetchConstructors)
+  .defer(preprocessor.fetchConstructors)
-  .defer(fetchConstructorStandings)
+  .defer(preprocessor.fetchConstructorStandings)
-  .defer(fetchDrivers)
+  .defer(preprocessor.fetchDrivers)
-  .defer(fetchDriverStandings)
+  .defer(preprocessor.fetchDriverStandings)
-  .defer(fetchLapTimes)
+  .defer(preprocessor.fetchLapTimes)
-  .defer(fetchPitStops)
+  .defer(preprocessor.fetchPitStops)
-  .defer(fetchQualifying)
+  .defer(preprocessor.fetchQualifying)
-  .defer(fetchRaces)
+  .defer(preprocessor.fetchRaces)
-  .defer(fetchResults)
+  .defer(preprocessor.fetchResults)
-  .defer(fetchSeasons)
+  .defer(preprocessor.fetchSeasons)
-  .defer(fetchStatus)
+  .defer(preprocessor.fetchStatus)
   .awaitAll(function(error) {
     // All data loaded by the deferred functions, now we're ready for business
     // (call more functions :D)
@@ -279,4 +33,3 @@ d3.queue()
     // Hide the loading dialog
     loadingDialog.hide();
   });
-

js/preprocessor.js

@@ -0,0 +1,251 @@
+"use strict";
+
+/*
+ * In this file, functions for loading and preprocessing the data are defined.
+ */
+
+/* Define the functions responsible for fetching+preprocessing data in a preprocessor object */
+var preprocessor = {
+  // Structure that gets filled with results
+  results: {
+    circuits: null,
+    constructorResults: null,
+    constructors: null,
+    constructorStandings: null,
+    drivers: null,
+    driverStandings: null,
+    lapTimes: null,
+    pitStops: null,
+    qualifying: null,
+    races: null,
+    results: null,
+    seasons: null
+  },
+
+  // data/circuits.csv
+  fetchCircuits: function (callback) {
+    d3.csv('data/circuits.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["circuitId"] = parseInt(d["circuitId"]);
+        d["lat"] = parseFloat(d["lat"]);
+        d["lng"] = parseFloat(d["lng"]);
+        d["alt"] = parseInt(d["alt"]);
+      });
+      preprocessor.results.circuits = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/constructorResults.csv
+  fetchConstructorResults: function (callback) {
+    d3.csv('data/constructorResults.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["constructorId"] = parseInt(d["constructorId"]);
+        d["constructorResultsId"] = parseInt(d["constructorResultsId"]);
+        d["points"] = parseInt(d["points"]);
+        d["raceId"] = parseInt(d["raceId"]);
+        d["status"] = parseInt(d["status"]);
+      });
+      preprocessor.results.constructorResults = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/constructors.csv
+  fetchConstructors: function (callback) {
+    d3.csv('data/constructors.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["constructorId"] = parseInt(d["constructorId"]);
+      });
+      preprocessor.results.constructors = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/constructorStandings.csv
+  fetchConstructorStandings: function (callback) {
+    d3.csv('data/constructorStandings.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["constructorId"] = parseInt(d["constructorId"]);
+        d["constructorStandingsId"] = parseInt(d["constructorStandingsId"]);
+        d["points"] = parseInt(d["points"]);
+        d["position"] = parseInt(d["position"]);
+        d["raceId"] = parseInt(d["raceId"]);
+        d["wins"] = parseInt(d["wins"]);
+      });
+      preprocessor.results.constructorStandings = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/drivers.csv
+  fetchDrivers: function (callback) {
+    d3.csv('data/drivers.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["dob"] = new Date(d["dob"]);
+        d["driverId"] = parseInt(d["driverId"]);
+        d["number"] = parseInt(d["number"]);
+      });
+      preprocessor.results.drivers = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/driverStandings.csv
+  fetchDriverStandings: function (callback) {
+    d3.csv('data/driverStandings.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["driverId"] = parseInt(d["driverId"]);
+        d["driverStandingsId"] = parseInt(d["driverStandingsId"]);
+        d["points"] = parseInt(d["points"]);
+        d["position"] = parseInt(d["position"]);
+        d["raceID"] = parseInt(d["raceId"]);
+        d["wins"] = parseInt(d["wins"]);
+      });
+      preprocessor.results.driverStandings = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/lapTimes.csv
+  fetchLapTimes: function (callback) {
+    d3.csv('data/lapTimes.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["driverId"] = parseInt(d["driverId"]);
+        d["lap"] = parseInt(d["lap"]);
+        d["milliseconds"] = parseInt(d["milliseconds"]);
+        d["position"] = parseInt(d["position"]);
+        d["raceId"] = parseInt(d["raceId"]);
+      });
+      preprocessor.results.lapTimes = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/pitStops.csv
+  fetchPitStops: function (callback) {
+    d3.csv('data/pitStops.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["driverId"] = parseInt(d["driverId"]);
+        d["duration"] = parseFloat(d["duration"]);
+        d["lap"] = parseInt(d["lap"]);
+        d["milliseconds"] = parseInt(d["milliseconds"]);
+        d["raceId"] = parseInt(d["raceId"]);
+        d["stop"] = parseInt(d["stop"]);
+      });
+      preprocessor.results.pitStops = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/qualifying.csv
+  fetchQualifying: function (callback) {
+    d3.csv('data/qualifying.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["constructorId"] = parseInt(d["constructorId"]);
+        d["driverId"] = parseInt(d["driverId"]);
+        d["number"] = parseInt(d["number"]);
+        d["position"] = parseInt(d["position"]);
+        d["q1"] = new Date(d["q1"]);
+        d["q2"] = new Date(d["q2"]); // Is this okay?
+        d["q3"] = new Date(d["q3"]);
+        d["qualifyId"] = parseInt(d["qualifyId"]);
+        d["raceId"] = parseInt(d["raceId"]);
+      });
+      preprocessor.results.qualifying = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/races.csv
+  fetchRaces: function (callback) {
+    d3.csv('data/races.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["circuitId"] = parseInt(d["circuitId"]);
+        d["date"] = new Date(d["date"]);
+        d["raceId"] = parseInt(d["raceId"]);
+        d["round"] = parseInt(d["round"]);
+        d["time"] = new Date(d["time"]);
+        d["year"] = parseInt(d["year"]);
+      });
+      preprocessor.results.races = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/results.csv
+  fetchResults: function (callback) {
+    d3.csv('data/results.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["constructorId"] = parseInt(d["constructorId"]);
+        d["driverId"] = parseInt(d["driverId"]);
+        d["fastestLap"] = parseInt(d["fastestLap"]);
+        d["fastestLapSpeed"] = parseFloat(d["fastestLapSpeed"]);
+        d["fastestLapTime"] = new Date(d["fastestLapTime"]);
+        d["grid"] = parseInt(d["grid"]);
+        d["laps"] = parseInt(d["laps"]);
+        d["milliseconds"] = parseInt(d["milliseconds"]);
+        d["number"] = parseInt(d["number"]);
+        d["points"] = parseInt(d["points"]);
+        d["position"] = parseInt(d["position"]);
+        d["positionOrder"] = parseInt(d["positionOrder"]);
+        d["raceId"] = parseInt(d["raceId"]);
+        d["rank"] = parseInt(d["rank"]);
+        d["resultId"] = parseInt(d["resultId"]);
+        d["statusId"] = parseInt(d["statusId"]);
+        d["time"] = new Date(d["time"]);
+      });
+      preprocessor.results.results = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/seasons.csv
+  fetchSeasons: function (callback) {
+    d3.csv('data/seasons.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["year"] = parseInt(d["year"]);
+      });
+      preprocessor.results.seasons = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+  // data/status.csv
+  fetchStatus: function (callback) {
+    d3.csv('data/status.csv', function(data) {
+      // preprocess data
+      data.forEach(function(d, i) {
+        d["statusId"] = parseInt(d["statusId"]);
+      });
+      preprocessor.results.status = data; // Store results
+      loadingDialog.itemFinished(); // Update loading dialog progress bar
+      callback(null); // Tell the queue we're done.
+    });
+  },
+
+}