Merge branch 'master' of https://github.com/F1Vis/f1vis

Added loading Screen

css/main.css

@@ -90,11 +90,6 @@ body {
   padding-left: 1.25rem;
 }
 
-.area {
-  fill: steelblue;
-  clip-path: url(#clip);
-}
-
 .zoom {
   cursor: move;
   fill: none;

js/diagrams.js

@@ -1,6 +1,7 @@
 "use strict";
 
 // https://bl.ocks.org/mbostock/3884955
+// https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
 function createLineGraph(containerId, raceData){
 
   // Rough input validation
@@ -86,23 +87,17 @@ function createLineGraph(containerId, raceData){
       .attr("height", svgHeight);
 
   //----------------------------------------------------------------------
-  /*svg.append("rect")
+  // make sure we have no overlapping
-      .attr("class", "zoom")
-      .attr("width", graphPosWidth.width)
-      .attr("height", graphPosWidth.height)
-      .attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")")
-      .call(zoom);*/
-
   svg.append("defs").append("clipPath")
     .attr("id", "clip")
     .append("rect")
       .attr("width", graphPosWidth.width)
       .attr("height", graphPosWidth.height);
-
+	  
   var focus = svg.append("g")
       .attr("class", "focus")
       .attr("transform", "translate(" + graphPosWidth.posX + "," + graphPosWidth.posY + ")");
-
+	  
   var context = svg.append("g")
       .attr("class", "context")
       .attr("height", smallGraphPosWidth.height)
@@ -110,10 +105,11 @@ function createLineGraph(containerId, raceData){
 
   // -----------------------------------------------------------------------
 
+  var contextXAxis = d3.axisBottom(x2).tickValues(0);
   context.append("g")
       .attr("class", "axis axis--x")
       .attr("transform", "translate(0," + smallGraphPosWidth.height + ")")
-      .call(d3.axisBottom(x2));
+      .call(contextXAxis);
 
   context.append("g")
       .attr("class", "brush")
@@ -138,7 +134,8 @@ function createLineGraph(containerId, raceData){
       focus.append("path")
           .data([driverLapData.laps])
           .attr("class", "line pathLines")
-          .attr("data-line", driverLapData.driver.driverId) // custom data to specify the line
+	  .attr("clip-path","url(#clip)")
+          .attr("data-line", driverLapData.driver.driverId) // custom data to specify the line		  
           .attr("data-opacitychange", 1)
           .attr("data-highlighted", 0)
           .attr("data-elemtype", elemTypes.line)
@@ -163,6 +160,7 @@ function createLineGraph(containerId, raceData){
               .data([singleLap])
               .enter().append("circle") // Uses the enter().append() method
               .attr("class", "pitstopdot") // Assign a class for styling
+			  .attr("clip-path","url(#clip)")
               .attr("data-line", driverLapData.driver.driverId)
               .attr("data-opacitychange", 1)
               .attr("data-highlighted", 0)
@@ -198,6 +196,7 @@ function createLineGraph(containerId, raceData){
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
           .attr("class", "linedot") // Assign a class for styling
+		  .attr("clip-path","url(#clip)")
           .attr("id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
           .attr("data-line", driverLapData.driver.driverId)
           .attr("data-opacitychange", 0)
@@ -214,6 +213,7 @@ function createLineGraph(containerId, raceData){
           .data(driverLapData.laps)
           .enter().append("circle") // Uses the enter().append() method
           .attr("class", "linedot") // Assign a class for styling
+		  .attr("clip-path","url(#clip)")
           .attr("circle-id", function(d, i) { return "circle-linepoint-" + d.lap + "-" + d.driverId; })
           .attr("data-line", driverLapData.driver.driverId)
           .attr("data-opacitychange", 0)
@@ -240,6 +240,7 @@ function createLineGraph(containerId, raceData){
             .data([driverLapData.laps[driverLapData.laps.length - 1]])
             .enter().append("rect") // Uses the enter().append() method
             .attr("class", "endpointdot") // Assign a class for styling
+			.attr("clip-path","url(#clip)")
             .attr("data-line", driverLapData.driver.driverId)
             .attr("data-opacitychange", 1)
             .attr("data-highlighted", 0)
@@ -257,7 +258,7 @@ function createLineGraph(containerId, raceData){
             .data([driverLapData.laps[driverLapData.laps.length - 1]])
             .enter().append("rect") // Uses the enter().append() method
             //.attr("class", "endpoint") // Assign a class for styling
-            .attr("class", "zoomable")
+            .attr("class", "zoomable")			
             .attr("data-line", driverLapData.driver.driverId)
             .attr("data-opacitychange", 1)
             .attr("data-highlighted", 0)
@@ -286,6 +287,7 @@ function createLineGraph(containerId, raceData){
   focus.append("g")
     .attr("class", "axis axis--x")
     .attr("transform", "translate(0," + graphPosWidth.height + ")")
+    .attr("clip-path","url(#clip)")
     .call(xAxis);
 
   // Add the Y Axis on both sides