-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
beautify, add place holder for input
- Loading branch information
1 parent
4665e50
commit 956cb85
Showing
3 changed files
with
120 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> | ||
| <meta name="description" content="WordStream Maker" /> | ||
| <meta name="author" content="Huyen Nguyen" /> | ||
| <meta charset="utf-8"/> | ||
| <meta content="ie=edge" http-equiv="X-UA-Compatible"> | ||
| <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/> | ||
| <meta content="WordStream Maker" name="description"/> | ||
| <meta content="Huyen Nguyen" name="author"/> | ||
| <title>WordStream Maker</title> | ||
| <!-- Favicon--> | ||
| <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> | ||
| <link href="assets/favicon.ico" rel="icon" type="image/x-icon"/> | ||
| <!-- Bootstrap icons--> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" /> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet"/> | ||
| <!-- Core theme CSS (includes Bootstrap)--> | ||
| <link href="css/template.css" rel="stylesheet" /> | ||
| <link href="css/styles.css" rel="stylesheet" /> | ||
| <link href="css/template.css" rel="stylesheet"/> | ||
| <link href="css/styles.css" rel="stylesheet"/> | ||
| <!-- Libraries --> | ||
| <script src="https://d3js.org/d3.v4.min.js"></script> | ||
| <script src='https://unpkg.com/compromise'></script> | ||
| <script src='https://unpkg.com/compromise-stats'></script> | ||
| <script defer src='lib/bundle.js'></script> | ||
| <script src="https://unpkg.com/compromise"></script> | ||
| <script src="https://unpkg.com/compromise-stats"></script> | ||
| <script defer src="lib/bundle.js"></script> | ||
| <script src="lib/wordstream.js"></script> | ||
| <script src="src/const.js"></script> | ||
| </head> | ||
|
|
@@ -28,11 +28,15 @@ | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> | ||
| <div class="container px-5"> | ||
| <a class="navbar-brand" href="index.html">WordStream Maker</a> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> | ||
| <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" | ||
| class="navbar-toggler" data-bs-target="#navbarSupportedContent" | ||
| data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse navbar-collapse" id="navbarSupportedContent"> | ||
| <ul class="navbar-nav ms-auto mb-2 mb-lg-0"> | ||
| <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li> | ||
| <li class="nav-item"><a class="nav-link" href="https://github.com/huyen-nguyen/maker" target="_blank">GitHub</a></li> | ||
| <li class="nav-item"><a class="nav-link" href="https://github.com/huyen-nguyen/maker" | ||
| target="_blank">GitHub</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
@@ -44,33 +48,38 @@ | |
| <div class="row gx-5 align-items-center justify-content-center"> | ||
| <div class="col-lg-8 col-xl-4 col-xxl-4"> | ||
| <div class="my-5 text-center text-xl-start"> | ||
| <img src="assets/Mellow.png" width="310" style="margin-left: -180px"/> | ||
| <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>--> | ||
| <!-- <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 type="file" id="fileElem" style="display:none" accept=".csv, .tsv"> | ||
| <input accept=".csv, .tsv" id="fileElem" style="display:none" type="file"> | ||
| </div> | ||
|
|
||
| <div class="p-3 mt-4" id="outer-box"> | ||
| <div class="pt-1" style="padding-left: 0.35rem"> | ||
| <div class="btn-toolbar d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start" role="toolbar" aria-label="Toolbar with button groups"> | ||
| <div class="btn-group mr-2" role="group" aria-label="First group"> | ||
| <div aria-label="Toolbar with button groups" | ||
| class="btn-toolbar d-grid gap-3 d-sm-flex justify-content-sm-center justify-content-xl-start" | ||
| role="toolbar"> | ||
| <div aria-label="First group" class="btn-group mr-2" role="group"> | ||
| <a class="btn btn-primary btn-lg px-3" id="fileSelect">Upload file</a> | ||
| </div> | ||
| <div class="btn-group text-light" role="group" aria-label="middle group"> | ||
| <div aria-label="middle group" class="btn-group text-light" role="group"> | ||
| <div class="btn btn-dark btn-lg or-text">or</div> | ||
| </div> | ||
| <div class="btn-group mr-2" role="group" aria-label="Second group"> | ||
| <div aria-label="Second group" class="btn-group mr-2" role="group"> | ||
| <div class="dropdown"> | ||
| <a class="btn btn-secondary dropdown-toggle" type="button" | ||
| id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | ||
| <a aria-expanded="false" aria-haspopup="true" | ||
| class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" | ||
| id="dropdownMenuButton" | ||
| type="button"> | ||
| Try data samples | ||
| </a> | ||
| <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> | ||
| <a class="dropdown-item" href="#" id="education">Education Assessment</a> | ||
| <div aria-labelledby="dropdownMenuButton" class="dropdown-menu"> | ||
| <a class="dropdown-item" href="#" id="education">Education | ||
| Assessment</a> | ||
| <a class="dropdown-item" href="#" id="pathway">Protein Pathway</a> | ||
| </div> | ||
| </div> | ||
|
|
@@ -79,27 +88,30 @@ <h1 class="display-5 fw-bolder text-white mb-1">Visualization for | |
| <div class="text-light my-3" id="naming-box"> | ||
| <div class="my-2"> | ||
| <label>Name of <code>time</code> column: </label> | ||
| <input class="col-name" id="timeColName" type="text" value="time"> | ||
| <input class="col-name" id="timeColName" placeholder="time" | ||
| type="text"> | ||
| </div> | ||
| <div class="my-2"> | ||
| <label>Name of <code>text</code> column: </label> | ||
| <input class="col-name" id="textColName" type="text" value="text"> | ||
| <input class="col-name" id="textColName" placeholder="time" type="text"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <a class="btn button button12 px-4" id="vis-trigger"><p>Visualize!</p></a> | ||
| <div id="alert-file" class="pt-3 text-white"><span>‌<br>‌</span></div> | ||
| <div class="pt-3 text-white" id="alert-file"><span>‌<br>‌</span></div> | ||
| </div> | ||
| </div> | ||
| <div class="col-xl-8 col-xxl-8 d-none d-xl-block text-center"> | ||
| <div class="bg-white img-fluid rounded-3 mt-3 mb-3"> | ||
| <div id="preview-data"> | ||
| <div class="loadingio-spinner-eclipse-tkisngtn2" id="loading"><div class="ldio-81lvt7kt8nr"> | ||
| <div></div> | ||
| </div></div> | ||
| <div class="loadingio-spinner-eclipse-tkisngtn2" id="loading"> | ||
| <div class="ldio-81lvt7kt8nr"> | ||
| <div></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="p-2 bg-warning rounded-3" id="alert-field"></div> | ||
| </div> | ||
|
|
@@ -111,7 +123,7 @@ <h1 class="display-5 fw-bolder text-white mb-1">Visualization for | |
| <!-- Features section--> | ||
| <section class="py-5" id="wordstream"> | ||
| <div class="container px-5 my-5" id="stage-2"> | ||
| <div class="row gx-5" > | ||
| <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 class="col-lg-10" id="canvasContainer"> | ||
| <div id="canvas"> | ||
|
|
@@ -125,13 +137,13 @@ <h5 class="mb-4">Visualization options</h5> | |
| <div class="col-sm panel" id="panel-2" style="display: none"> | ||
| <h5 class="mb-4">Natural Language Processing options</h5> | ||
| <form id="form"> | ||
| <input type="radio" name="stack" value="pos" checked="checked"> Part-of-speech (POS) Tags<br> | ||
| <input checked="checked" name="stack" type="radio" value="pos"> Part-of-speech (POS) Tags<br> | ||
| <ul> | ||
| <li>Noun</li> | ||
| <li>Verb</li> | ||
| <li>Adjective</li> | ||
| </ul> | ||
| <input type="radio" name="stack" value="ner"> Named-entity Recognition (NER)<br> | ||
| <input name="stack" type="radio" value="ner"> Named-entity Recognition (NER)<br> | ||
| <ul> | ||
| <li>Person</li> | ||
| <li>Place</li> | ||
|
|
@@ -142,11 +154,12 @@ <h5 class="mb-4">Natural Language Processing options</h5> | |
| <div class="col-sm panel" id="panel-3" style="display: none"> | ||
| <h5 class="mb-4">Representation metrics</h5> | ||
| <form id="form2"> | ||
| <input class="mb-3" type="radio" name="metric" value="frequency" checked="checked"> Frequency<br> | ||
| <input checked="checked" class="mb-3" name="metric" type="radio" value="frequency"> | ||
| Frequency<br> | ||
|
|
||
| <input class="mb-3" type="radio" name="metric" value="sudden"> Sudden Attention<br> | ||
| <input class="mb-3" name="metric" type="radio" value="sudden"> Sudden Attention<br> | ||
|
|
||
| <input class="mb-3" type="radio" name="metric" value="tfidf"> TF-IDF<br> | ||
| <input class="mb-3" name="metric" type="radio" value="tfidf"> TF-IDF<br> | ||
|
|
||
| </form> | ||
| </div> | ||
|
|
@@ -170,14 +183,22 @@ <h5 class="mb-4">Representation metrics</h5> | |
| <footer class="bg-dark py-4 mt-auto"> | ||
| <div class="container px-5"> | ||
| <div class="row align-items-center justify-content-between flex-column flex-sm-row"> | ||
| <div class="col-auto"><div class="small m-0 text-white">Copyright © WordStream Maker 2022</div></div> | ||
| <div class="col-auto"> | ||
| <div class="small m-0 text-white">Copyright © WordStream Maker 2022</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| <!-- Bootstrap core JS--> | ||
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> | ||
| <script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> | ||
| <script crossorigin="anonymous" | ||
| integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" | ||
| src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> | ||
| <script crossorigin="anonymous" | ||
| integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" | ||
| src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> | ||
| <script crossorigin="anonymous" | ||
| integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" | ||
| src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script> | ||
| <script src="https://getbootstrap.com/docs/4.0/assets/js/docs.min.js"></script> | ||
|
|
||
| <!-- Core theme JS--> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.