load webcomponents-lite polyfills for non-chrome browsers then load visualization code in correct order after web components ready

Author: jameswex

index.html

@@ -40,6 +40,7 @@
 
   <!-- JS includes -->
 
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>
   <link rel="import" href="facets.html" >
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
@@ -130,7 +131,6 @@ <h2><span class='focus-word'>Overview</span> takes input feature data from any n
     </div>
 
     <div class="facets-ov-demo">
-      <facets-overview id="foelem"></facets-overview>
     </div>
 
 
@@ -168,7 +168,6 @@ <h2><span class='focus-word'>Dive</span> is a tool for interactively exploring l
     </div>
 
     <div class="facets-dive-demo">
-      <facets-dive id="fdelem"></facets-dive>
     </div>
 
      <div class="demo-desc-box facets-dive">
@@ -220,81 +219,83 @@ <h2>FACETS DIVE x QUICK, DRAW!</h2>
   <!-- Other scripts -->
 
   <script>
-  var fileupload = $("#fileupload")[0];
-  $("#uploadbutton1")[0].onclick = function() {
-      fileupload.click();
-  };
-  $("#uploadbutton2")[0].onclick = function() {
-      fileupload.click();
-  };
-  var readFiles = function () {
-    var count = fileupload.files.length;
-    var datasetsList = [];
-
-    var whendone = function() {
-      var overview = $("#foelem")[0];
-      var dive = $("#fdelem")[0];
-      var proto = overview.getStatsProto(datasetsList);
-      overview.protoInput = proto;
-      if (datasetsList.length < 2) {
-        dive.data = datasetsList[0].data;
-      } else {
-        var newFeatureForDive = 'csv-source';
-        var columns = datasetsList.length > 0 ? datasetsList[0].data.columns : [];
-        while (columns.indexOf(newFeatureForDive) > -1) {
-          newFeatureForDive = newFeatureForDive + newFeatureForDive;
-        }
-        datasetsList.forEach(function(dataset) {
-          dataset.data.forEach(function(datapoint) {
-            datapoint[newFeatureForDive] = dataset.name;
+  function setupVis() {
+    var fileupload = $("#fileupload")[0];
+    $("#uploadbutton1")[0].onclick = function() {
+        fileupload.click();
+    };
+    $("#uploadbutton2")[0].onclick = function() {
+        fileupload.click();
+    };
+    var readFiles = function () {
+      var count = fileupload.files.length;
+      var datasetsList = [];
+
+      var whendone = function() {
+        var overview = $("#foelem")[0];
+        var dive = $("#fdelem")[0];
+        var proto = overview.getStatsProto(datasetsList);
+        overview.protoInput = proto;
+        if (datasetsList.length < 2) {
+          dive.data = datasetsList[0].data;
+        } else {
+          var newFeatureForDive = 'csv-source';
+          var columns = datasetsList.length > 0 ? datasetsList[0].data.columns : [];
+          while (columns.indexOf(newFeatureForDive) > -1) {
+            newFeatureForDive = newFeatureForDive + newFeatureForDive;
+          }
+          datasetsList.forEach(function(dataset) {
+            dataset.data.forEach(function(datapoint) {
+              datapoint[newFeatureForDive] = dataset.name;
+            });
           });
-        });
-        var alldata = datasetsList.reduce(function(a, b){
-          return a.concat(b.data);
-        }, []);
-        dive.data = alldata;
-        dive.colorBy = newFeatureForDive;
+          var alldata = datasetsList.reduce(function(a, b){
+            return a.concat(b.data);
+          }, []);
+          dive.data = alldata;
+          dive.colorBy = newFeatureForDive;
+        }
       }
-    }
-    var readFile = function(file) {
-      var reader = new FileReader();
-      reader.onload = function() {
-        var parsedData = d3.csvParse(reader.result);
-        parsedData.forEach(function(row) {
-          parsedData.columns.forEach(function(column) {
-            var coercedNum = +row[column];
-            if (!isNaN(coercedNum)) {
-              row[column] = coercedNum;
-            }
+      var readFile = function(file) {
+        var reader = new FileReader();
+        reader.onload = function() {
+          var parsedData = d3.csvParse(reader.result);
+          parsedData.forEach(function(row) {
+            parsedData.columns.forEach(function(column) {
+              var coercedNum = +row[column];
+              if (!isNaN(coercedNum)) {
+                row[column] = coercedNum;
+              }
+            });
           });
-        });
-        datasetsList.push({data: parsedData, name: file.name});
-        if (!--count) {
-          whendone();
+          datasetsList.push({data: parsedData, name: file.name});
+          if (!--count) {
+            whendone();
+          }
         }
+        reader.readAsBinaryString(file);
+      };
+
+      for (var i = 0; i < count; i++) {
+        readFile(fileupload.files[i]);
       }
-      reader.readAsBinaryString(file);
-    };
+    }
+    fileupload.addEventListener('change', readFiles);
+    $.when(trainAjax(), testAjax()).done(function(trainAjax, testAjax) {
+      var overview = $("#foelem")[0];
+      var proto = overview.getStatsProto([
+        {data: trainAjax[0], name: "train"},
+        {data: testAjax[0], name: "test"}]);
+      overview.protoInput = proto;
 
-    for (var i = 0; i < count; i++) {
-      readFile(fileupload.files[i]);
+      $("#fdelem")[0].data = testAjax[0];
+    });
+    function trainAjax() {
+      return $.getJSON({url: "train.json"});
+    }
+    function testAjax() {
+      return $.getJSON({url: "test.json"});
     }
-  }
-  fileupload.addEventListener('change', readFiles);
-  $.when(trainAjax(), testAjax()).done(function(trainAjax, testAjax) {
-    var overview = $("#foelem")[0];
-    var proto = overview.getStatsProto([
-      {data: trainAjax[0], name: "train"},
-      {data: testAjax[0], name: "test"}]);
-    overview.protoInput = proto;
-
-    $("#fdelem")[0].data = testAjax[0];
-  });
-  function trainAjax() {
-    return $.getJSON({url: "train.json"});
-  }
-  function testAjax() {
-    return $.getJSON({url: "test.json"});
   }
   $(document).on('click', 'a[href*=\\#]', function(event){
     event.preventDefault();
@@ -303,6 +304,23 @@ <h2>FACETS DIVE x QUICK, DRAW!</h2>
     }, 500);
   });
   </script>
+  <script>
+  window.addEventListener('WebComponentsReady', function() {
+    var link = document.createElement("link");
+    link.rel = "import";
+    link.href = "facets.html";
+    link.onload= function() {
+      var dive = document.createElement("facets-dive");
+      dive.id = "fdelem";
+      $(".facets-dive-demo")[0].appendChild(dive);
+      var overview = document.createElement("facets-overview");
+      overview.id = "foelem";
+      $(".facets-ov-demo")[0].appendChild(overview);
+      setupVis();
+    };
+    document.head.appendChild(link);
+  });
+</script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

quickdraw.html

@@ -18,7 +18,26 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <link rel="import" href="facets.html" >
+  <script>
+  window.addEventListener('WebComponentsReady', function() {
+    var link = document.createElement('link');
+    link.rel = "import";
+    link.href = "facets.html";
+    link.onload= function() {
+      var dive = document.createElement('facets-dive');
+      dive.crossOrigin = "anonymous";
+      dive.spriteImageWidth = "40";
+      dive.spriteImageHeight = "40";
+      document.body.appendChild(dive);
+      var script = document.createElement('script');
+      script.async = true;
+      script.src = 'quickdraw.js';
+      document.head.appendChild(script);
+    }
+    document.head.appendChild(link);
+  });
+</script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>
 <style>
 body, html {
   height: 100%;
@@ -78,11 +97,5 @@
       <select class="presets"></select>
     </label>
   </div>
-  <facets-dive
-      cross-origin="anonymous"
-      sprite-image-width="40"
-      sprite-image-height="40"
-  ></facets-dive>
-  <script src="quickdraw.js"></script>
 </body>
 </html>