Add a first example query to fetch driver nationality numbers

css/main.css

@@ -10,3 +10,20 @@ body {
 .chart-box {
   border: 1px solid grey;
 }
+
+/* This container will allow scaling svg, so we don't need to care about it in d3.js */
+.svg-container {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%; /* aspect ratio */
+  vertical-align: top;
+  overflow: hidden;
+}
+
+.svg-content-responsive {
+  display: inline-block;
+  position: absolute;
+  top: 0; /* not 10px, but 0 instead */
+  left: 0;
+}

index.html

@@ -85,6 +85,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/queries.js"></script>
     <script type="text/javascript" src="js/diagrams.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
   </body>

js/diagrams.js

@@ -5,18 +5,23 @@
  */
 
 function createTestPieChart(containerId, dataset) {
-  var width = 360;
+  var width = 100;
-  var height = 360;
+  var height = 100;
-  var radius = Math.min(width, height) / 2;
+  // Build the basic container for the chart
-  var color = d3.scaleOrdinal(d3.schemeCategory20b);
-
   var svg = d3.select(containerId)
+    .append("div")
+    .classed("svg-container", true)
     .append("svg")
-    .attr("width", width)
+    .attr("preserveAspectRatio", "xMinYMin meet")
-    .attr("height", height)
+    .attr("viewBox", "0 0 " + width + " " + height + "")
+    .classed("svg-content-responsive", true)
     .append("g")
     .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
 
+  // Preparations are done, now let's build the pie chart
+  var radius = Math.min(width, height) / 2;
+  var color = d3.scaleOrdinal(d3.schemeCategory10);
+
   var arc = d3.arc()
     .innerRadius(0)
     .outerRadius(radius);

js/main.js

@@ -4,22 +4,8 @@
  * This file contains the main control flow.
  */
 
-console.log("Let's load and preprocess all data properly.");
-
 preprocessor.load(function(data) {
-  console.log("Results are in!");
-  console.log(data);
 
-  // Create a very basic dataset for a chart
+  createTestPieChart("#testchartbox", queries.getDriversByNationality());
-  var dataset = [
-    { label: "SPD", count: 25 },
-    { label: "CDU", count: 30 },
-    { label: "Die Grünen", count: 40 },
-    { label: "Die Linken", count: 15 },
-    { label: "Die Rechten", count: 20 },
-    { label: "Die Partei", count: 5 },
-  ];
-  // Pass the dataset to the chart function
-  createTestPieChart("#testchartbox", dataset);
 
 });

js/queries.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var queries = {
+
+  /*
+   * Count drivers belonging to nationalities
+   */
+  getDriversByNationality: function() {
+    var rawData = preprocessor.getResults();
+ 
+    // Extract interesting data from raw data.
+    var nationalities = {};
+    rawData.drivers.forEach(function(d, i) {
+      var nationality = d["nationality"];
+      if(nationalities[nationality] === undefined) {
+        nationalities[nationality] = 1;
+      } else {
+        nationalities[nationality] += 1;
+      }
+    });
+
+    // Transform into d3 dataset format
+    var dataset = [];
+    var n;
+    for(n in nationalities) {
+      dataset.push({
+        label: n,
+        count: nationalities[n]
+      });
+    }
+
+    // Return d3 dataset
+    return dataset;
+  },
+
+};