Skip to content

Commit fa1ff11

Browse files
huyen-nguyenhuyen-nguyen
committed
Improve speed
1 parent 473ec35 commit fa1ff11

File tree

10 files changed

+362
-364
lines changed

10 files changed

+362
-364
lines changed

‎.DS_Store‎

-2 KB
Binary file not shown.

‎README.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
# WordStream
22

3-
Demo: https://iDataVisualizationLab.github.io/WordStream/demo.html
3+
Demo: https://nnhuyen.github.io/WordStream/
44

5-
6-
7-
Video: https://idatavisualizationlab.github.io/WordStream/
5+
Video: https://nnhuyen.github.io/WordStream/video.html
86

97
[![WS](https://github.com/nnhuyen/WordStream/blob/master/images/Huffington.png)](https://www.youtube.com/watch?v=DwaDMPhi2Ec "Everything Is AWESOME")
108

‎demo.html‎

Lines changed: 0 additions & 119 deletions
This file was deleted.

‎index.html‎

100644100755
Lines changed: 88 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,114 @@
66
<title>WordStream</title>
77
<link rel="shortcut icon" href="images/ws.png">
88
<script src="./lib/d3.min.js"></script>
9+
<script src="./lib/d3.v4.min.js"></script>
910
<script src="./lib/loaddata.js"></script>
1011
<script src="./lib/d3.layout.wordstream.js"></script>
1112
<script src="lib/d3.slider.js"></script>
13+
1214
<script src="./test/testutil.js"></script>
1315
<script src="javascripts/jquery/jquery-1.9.0.min.js"></script>
1416
<script src="javascripts/msdropdown/jquery.dd.js"></script>
1517
<script src="javascripts/msdropdown/select.js"></script>
16-
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css" />
18+
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css"/>
1719
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen"/>
1820

1921
<script src="javascripts/msdropdown/jquery.dd.js"></script>
2022
<script src="javascripts/msdropdown/select.js"></script>
21-
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css" />
23+
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css"/>
2224
<link rel="stylesheet" type="text/css" href="styles/d3.slider.css">
2325

24-
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css" />
26+
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"/>
2527

2628
</head>
2729
<body>
2830
<div class="title ">
2931
WordStream: Interactive Tool for Topic Evolution
3032
<!--<span>-->
31-
<a href="index.html" class="button active">Video</a>
32-
<a href="demo.html" class="button still">Demo</a>
33+
<a href="video.html" class="button still">Video</a>
34+
<a href="index.html" class="button active">Demo</a>
3335
<!--</span>-->
3436
</div>
35-
<center><iframe style="margin-top: 100px" width="95%" height="800" src="media/ws.mp4" frameborder="0"
36-
allowfullscreen></iframe></center>
37+
<div id="loadingSpinner">
38+
<!-- <span id="progressText"> -->
39+
</div>
40+
<script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script> <!-- Spinner when loading -->
41+
42+
<script type='text/javascript' src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
43+
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"/>
44+
45+
<script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script> <!-- Spinner when loading -->
46+
<script type='text/javascript' src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
47+
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"/>
48+
49+
<!--✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ Slider ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿-->
50+
<svg width="360px" height="375px" class="cp" id="cp">
51+
<text y="15px" font-weight="600">Control Panel</text>
52+
</svg>
53+
<div id="menu" class="holderCP" style="display: inline-block">
54+
<div id="holder1" class="holder1">
55+
<select id="datasetsSelect" class="styled-select" onchange="loadNewData.call(this, event)"></select>
56+
</div>
57+
58+
<p><span id="heightText" class="heightText textSlider"></span>
59+
<img class="heightIcon icon" src="images/height.png" >
60+
</p>
61+
<div id="heightSlider" class="haxis slider"></div>
62+
63+
<p><img class="widthIcon icon" src="images/width.png">
64+
<span id="widthText" class="widthText textSlider"></span>
65+
</p>
66+
<div id="widthSlider" class="waxis slider"></div>
67+
68+
<p><img class="fontIcon icon" src="images/font.png">
69+
<span class="fontText textSlider">
70+
<span id="fontMin"></span>,
71+
<span id="fontMax"></span>
72+
</span>
73+
</p>
74+
<div id="fontSlider" class="fontAxis slider"></div>
75+
76+
<p><img class="topRankIcon icon" src="images/toprank3.png">
77+
<span id="topRankText" class="topRankText textSlider"></span>
78+
</p>
79+
<div id="topRankSlider" class="topRankAxis slider"></div>
80+
81+
<p class="textSlider flow">Flow</p>
82+
<img class="flow" style="left: 68px; width: 33px; height: 23px" src="images/flow.png">
83+
<label class="switch flow" style="left: 105px;">
84+
<input type="checkbox" id="flow"
85+
onclick="submitInput(updateData)">
86+
87+
<span class="toggle round"></span>
88+
</label>
89+
90+
<p class="textSlider angleVariance">Angle Variance</p>
91+
<img class="angleVariance" style="top: 302px;left: 278px;width: 32px; height: 35px" src="images/av.png">
92+
<label class="switch angleVariance" style="left: 315px">
93+
<input type="checkbox" id="av"
94+
onclick="submitInput(updateData)">
95+
<span class="toggle round"></span>
96+
</label>
97+
98+
<p class="textSlider rel">Relationships</p>
99+
<label class="switch rel" style="left: 315px;">
100+
<input type="checkbox" id="rel" onclick="showRelationship()">
101+
<span class="toggle round"></span>
102+
</label>
103+
<input class="submit" onclick="submitInput(updateData)" type="button" value="Submit"><br>
104+
<input class="computeMetric" onclick="computeMetric()" type="button" value="Compute measurements"><br>
105+
</div>
106+
<script src="./javascripts/init.js"></script>
107+
<script>
108+
d3.select("#heightText").text(initHeight);
109+
d3.select("#widthText").text(initWidth);
110+
d3.select("#fontMin").text(initMinFont);
111+
d3.select("#fontMax").text(initMaxFont);
112+
d3.select("#topRankText").text(initTop);
113+
</script>
37114

115+
<script src="./javascripts/main.js"></script>
116+
<script src="./javascripts/update.js"></script>
117+
<script src="./javascripts/metric.js"></script>
38118
</body>
39-
</html>
119+
</html>

‎javascripts/init.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ const initWidth = 1500,
44
initMaxFont = 36,
55
initFlag = "none";// none / fa/ f / a
66

7-
let initTop = 15;
7+
var initTop = 15;
88

9-
let globalWidth = initWidth,
9+
var globalWidth = initWidth,
1010
globalHeight = initHeight,
1111
globalMinFont = initMinFont,
1212
globalMaxFont = initMaxFont,
1313
globalFlag = initFlag,
1414
globalTop = initTop,
1515
globalData;
1616

17-
let allW;
17+
var allW;
1818

19-
let mainGroup, axisGroup, xGridlinesGroup, opacScale, legendGroup, opacity, layerPath, maxFreq;
19+
var mainGroup, axisGroup, xGridlinesGroup, opacScale, legendGroup, opacity, layerPath, maxFreq;
2020

2121
const color = d3.scale.category10();
2222
const axis = d3.svg.axis().ticks(4);
@@ -60,7 +60,7 @@ d3.select('#topRankSlider').call(d3.slider()
6060
const metricName = [["Importance value (tf-idf ratio) "],["Compactness "],["All Words Area/Stream Area"],
6161
["Weighted Display Rate"],["Average Normalized Frequency "]];
6262

63-
let metric = d3.select("body").append("svg")
63+
var metric = d3.select("body").append("svg")
6464
.attr("width",360)
6565
.attr("height", 250)
6666
.attr("class","metricSVG")
@@ -87,7 +87,7 @@ d3.select("body")
8787
.text(function(d){return d;})
8888
.style("font-size", "13px");
8989

90-
let metric2 = d3.select("body").append("svg")
90+
var metric2 = d3.select("body").append("svg")
9191
.attr("width",100)
9292
.attr("height", 300)
9393
.attr("class","metricSVG2")

0 commit comments

Comments
 (0)