From 4fcd836cbb658db3d44bd0bb6508fea2e5dd7bb3 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sat, 18 Nov 2017 12:49:33 +0100
Subject: [PATCH] Add a first example query to fetch driver nationality numbers

---
 css/main.css   | 17 +++++++++++++++++
 index.html     |  1 +
 js/diagrams.js | 19 ++++++++++++-------
 js/main.js     | 16 +---------------
 js/queries.js  | 36 ++++++++++++++++++++++++++++++++++++
 5 files changed, 67 insertions(+), 22 deletions(-)
 create mode 100644 js/queries.js

diff --git a/css/main.css b/css/main.css
index d2eda33..f827c5d 100644
--- a/css/main.css
+++ b/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;
+}
diff --git a/index.html b/index.html
index 30dc61b..344f895 100644
--- a/index.html
+++ b/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>
diff --git a/js/diagrams.js b/js/diagrams.js
index f0c921c..dfd5517 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -5,18 +5,23 @@
  */
 
 function createTestPieChart(containerId, dataset) {
-  var width = 360;
-  var height = 360;
-  var radius = Math.min(width, height) / 2;
-  var color = d3.scaleOrdinal(d3.schemeCategory20b);
-
+  var width = 100;
+  var height = 100;
+  // Build the basic container for the chart
   var svg = d3.select(containerId)
+    .append("div")
+    .classed("svg-container", true)
     .append("svg")
-    .attr("width", width)
-    .attr("height", height)
+    .attr("preserveAspectRatio", "xMinYMin meet")
+    .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);
diff --git a/js/main.js b/js/main.js
index 20d8bc5..71b0ea0 100644
--- a/js/main.js
+++ b/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
-  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);
+  createTestPieChart("#testchartbox", queries.getDriversByNationality());
 
 });
diff --git a/js/queries.js b/js/queries.js
new file mode 100644
index 0000000..177058a
--- /dev/null
+++ b/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;
+  },
+
+};