Skip to content
This repository has been archived by the owner on Jul 27, 2024. It is now read-only.

Commit

Permalink
load webcomponents-lite polyfills for non-chrome browsers then load v…
Browse files Browse the repository at this point in the history 
…isualization code in correct order after web components ready
  • Loading branch information
@jameswex
jameswex committed Jul 19, 2017
1 parent 94b3191 commit c436483
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 77 deletions.
158 changes: 88 additions & 70 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>


Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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();
Expand All @@ -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),
Expand Down
27 changes: 20 additions & 7 deletions quickdraw.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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>

0 comments on commit c436483

Please sign in to comment.