Skip to content

Commit

Permalink
Added loading transitions w/ icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@huyen-nguyen
huyen-nguyen committed Aug 12, 2022
1 parent dec725a commit bbdc6a1
Show file tree
Hide file tree
Showing 9 changed files with 256 additions and 121 deletions.
38 changes: 0 additions & 38 deletions assets/Eclipse-1s-200px.html
View file

This file was deleted.

6 changes: 0 additions & 6 deletions assets/Eclipse-1s-200px.svg
View file

This file was deleted.

Binary file modified assets/favicon.ico
View file
Binary file not shown.
Binary file added assets/favicon1.ico
View file
Binary file not shown.
107 changes: 107 additions & 0 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ table td, table th{
font-size: 0.9rem;
}

/* USE CSS for loading icon */
/* loading icon */
#loading{
max-height:100%; max-width:100%;
Expand Down Expand Up @@ -56,6 +57,101 @@ table td, table th{
.ldio-81lvt7kt8nr div { box-sizing: content-box; }
/* generated by https://loading.io/ */

/* WS loader */
@keyframes ldio-6pd26u1x99x {
0% { transform: rotate(0) }
100% { transform: rotate(360deg) }
}
.ldio-6pd26u1x99x div { box-sizing: border-box!important }
.ldio-6pd26u1x99x > div {
position: absolute;
width: 146.88px;
height: 146.88px;
top: 28.560000000000002px;
left: 28.560000000000002px;
border-radius: 50%;
border: 4.08px solid #000;
border-color: #014c86 transparent #014c86 transparent;
animation: ldio-6pd26u1x99x 1.8518518518518516s linear infinite;
}

.ldio-6pd26u1x99x > div:nth-child(2), .ldio-6pd26u1x99x > div:nth-child(4) {
width: 134.64000000000001px;
height: 134.64000000000001px;
top: 34.68px;
left: 34.68px;
animation: ldio-6pd26u1x99x 1.8518518518518516s linear infinite reverse;
}
.ldio-6pd26u1x99x > div:nth-child(2) {
border-color: transparent #00a950 transparent #00a950
}
.ldio-6pd26u1x99x > div:nth-child(3) { border-color: transparent }
.ldio-6pd26u1x99x > div:nth-child(3) div {
position: absolute;
width: 100%;
height: 100%;
transform: rotate(45deg);
}
.ldio-6pd26u1x99x > div:nth-child(3) div:before, .ldio-6pd26u1x99x > div:nth-child(3) div:after {
content: "";
display: block;
position: absolute;
width: 4.08px;
height: 4.08px;
top: -4.08px;
left: 67.32000000000001px;
background: #014c86;
border-radius: 50%;
box-shadow: 0 142.8px 0 0 #014c86;
}
.ldio-6pd26u1x99x > div:nth-child(3) div:after {
left: -4.08px;
top: 67.32000000000001px;
box-shadow: 142.8px 0 0 0 #014c86;
}

.ldio-6pd26u1x99x > div:nth-child(4) { border-color: transparent; }
.ldio-6pd26u1x99x > div:nth-child(4) div {
position: absolute;
width: 100%;
height: 100%;
transform: rotate(45deg);
}
.ldio-6pd26u1x99x > div:nth-child(4) div:before, .ldio-6pd26u1x99x > div:nth-child(4) div:after {
content: "";
display: block;
position: absolute;
width: 4.08px;
height: 4.08px;
top: -4.08px;
left: 61.2px;
background: #00a950;
border-radius: 50%;
box-shadow: 0 130.56px 0 0 #00a950;
}
.ldio-6pd26u1x99x > div:nth-child(4) div:after {
left: -4.08px;
top: 61.2px;
box-shadow: 130.56px 0 0 0 #00a950;
}
.loadingio-spinner-double-ring-4dols36ufwg {
width: 204px;
height: 204px;
display: inline-block;
overflow: hidden;
background: none;
}
.ldio-6pd26u1x99x {
width: 100%;
height: 100%;
position: relative;
transform: translateZ(0) scale(1);
backface-visibility: hidden;
transform-origin: 0 0; /* see note above */
}
.ldio-6pd26u1x99x div { box-sizing: content-box; }
/* generated by https://loading.io/ */

/* text in selection */
.or-text{
padding-left: 0;
Expand Down Expand Up @@ -155,3 +251,14 @@ table td, table th{
code{
color: #fb3698;
}

#ws-loading{
text-align: center;
display: none;
}
#loading-container{
/*text-align: center;*/
position: absolute;
left: 44%;
}

16 changes: 11 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,6 @@
<img src="assets/Mellow.png" style="margin-left: -180px" width="310"/>
<h1 class="display-5 fw-bolder text-white mb-1">Visualization for
Topic Evolution</h1>
<!-- <p class="lead fw-normal text-white-50 my-4">Make sure your data file has columns-->
<!-- named <code>Time</code> and <code>Text</code>!</p>-->

<div class="d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start">
<input accept=".csv, .tsv" id="fileElem" style="display:none" type="file">
</div>
Expand Down Expand Up @@ -99,7 +96,7 @@ <h1 class="display-5 fw-bolder text-white mb-1">Visualization for

</div>

<a class="btn button button12 px-4" id="vis-trigger"><p>Visualize!</p></a>
<a class="btn button button12 px-4" id="vis-trigger" ><p>Visualize!</p></a>
<div class="pt-3 text-white" id="alert-file">
<span class="text-warning" id="first-row">&zwnj;</span>
<br>
Expand Down Expand Up @@ -134,6 +131,15 @@ <h1 class="display-5 fw-bolder text-white mb-1">Visualization for
<div class="container px-5 my-5" id="stage-2">
<div class="row gx-5">
<div class="col-lg-2 mb-5 mb-lg-3"><h2 class="fw-bolder mb-3">WordStream</h2></div>
<div id="loading-container">
<div class="loadingio-spinner-double-ring-4dols36ufwg" id="ws-loading">
<div class="ldio-6pd26u1x99x">
<div></div>
<div></div>
<div><div></div></div>
<div><div></div></div>
</div></div>
</div>
<div class="col-lg-10" id="canvasContainer">
<div id="canvas">
</div>
Expand Down Expand Up @@ -176,7 +182,7 @@ <h5 class="mb-4">Representation metrics</h5>
</div>
</section>
<!-- Testimonial section-->
<div class="py-5 bg-light">
<div class="py-5 my-5 bg-light">
<div class="container px-5 my-5">
<div class="row gx-5 justify-content-center">
<div class="col-lg-10 col-xl-7">
Expand Down
82 changes: 57 additions & 25 deletions src/data-loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ const firstRow = document.getElementById('first-row'), secondRow = document.getE
const fileInfo = document.getElementById('file-info');
const previewData = document.getElementById('preview-data');
const loading = d3.select("#loading");
const wsLoading = d3.select("#ws-loading");
const alertField = d3.select("#alert-field");
const sample_fries = d3.select("#pathway")
.on("click", function () {
Expand All @@ -65,33 +66,64 @@ d3.select("#education")

filepicker.addEventListener("change", handleFiles, false);

visTrigger.addEventListener("click", () => {
let result = checkInput();
if (!!result){
timeCol = result.Time;
textCol = result.Text;

if (sampleFlag){
dataForNLP = dataForRender.map(d => {
return {
Time: d[timeCol],
Text: d[textCol],
}
});
d3.select("#vis-trigger")
.on("click", () => {
let result = checkInput();
if (!!result){
timeCol = result.Time;
textCol = result.Text;

if (sampleFlag){
dataForNLP = dataForRender.map(d => {
return {
Time: d[timeCol],
Text: d[textCol],
}
});
}
else {
dataForNLP = window[type + 'Read'](dataForRender, false); // retrieve time and text columns out of that data
}
showLoader()
const myTimeout = setTimeout(myGreeting, 100);
visTrigger.setAttribute("href", "#wordstream");
function myGreeting() {
dataForVis = textProcessing(dataForNLP);
visualize(dataForVis);
}
}
else {
dataForNLP = window[type + 'Read'](dataForRender, false); // retrieve time and text columns out of that data
else{
visTrigger.setAttribute("href", "#");
}
showVis()
visTrigger.setAttribute("href", "#wordstream");
dataForVis = textProcessing(dataForNLP);
visualize(dataForVis);
}
else{
hideVis()
visTrigger.setAttribute("href", "#");
}
})
})

// visTrigger.addEventListener("click", () => {
// let result = checkInput();
// if (!!result){
// timeCol = result.Time;
// textCol = result.Text;
//
// if (sampleFlag){
// dataForNLP = dataForRender.map(d => {
// return {
// Time: d[timeCol],
// Text: d[textCol],
// }
// });
// }
// else {
// dataForNLP = window[type + 'Read'](dataForRender, false); // retrieve time and text columns out of that data
// }
// showVis()
// showLoader();console.log(new Date);
// visTrigger.setAttribute("href", "#wordstream");
// dataForVis = textProcessing(dataForNLP);
// visualize(dataForVis);
// }
// else{
// visTrigger.setAttribute("href", "#");
// }
// })

d3.select("#textColName").on("change", function () {
hideVis()
Expand Down
1 change: 1 addition & 0 deletions src/nl-processing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function textProcessing(dataForNLP) {
doc.compute('tfidf')
const terms = doc.terms().json()

// based on category type: POS or NER
eval(categoryType + "Categories").forEach(category => {
obj.words[category] = d3.nest().key(d => (d.terms[0].root || d.terms[0].normal))
.entries(terms
Expand Down
Loading

0 comments on commit bbdc6a1

Please sign in to comment.