Skip to content

Commit d463175

Browse files
huyen-nguyenhuyen-nguyen
committed
Update speed, config and amimation
1 parent 5b82a6b commit d463175

30 files changed

Lines changed: 2594 additions & 1345 deletions

‎.DS_Store‎

-12 KB
Binary file not shown.

‎Description‎

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

‎Test.xlsx‎

-22.9 KB
Binary file not shown.

‎data/EmptyWheel.tsv‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎data/quantum.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎demo.html‎

Lines changed: 44 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -7,81 +7,80 @@
77
<link rel="shortcut icon" href="images/ws.png">
88
<script src="./lib/d3.min.js"></script>
99
<script src="./lib/d3.v4.min.js"></script>
10-
<script src="./lib/progressbar.min.js"></script>
11-
<script src="./lib/d3-queue.v3.min.js"></script>
1210
<script src="./lib/loaddata.js"></script>
13-
<script src="javascripts/quantum.js"></script>
1411
<script src="./lib/d3.layout.wordstream.js"></script>
1512
<script src="lib/d3.slider.js"></script>
13+
1614
<script src="./test/testutil.js"></script>
1715
<script src="javascripts/jquery/jquery-1.9.0.min.js"></script>
18-
1916
<script src="javascripts/msdropdown/jquery.dd.js"></script>
2017
<script src="javascripts/msdropdown/select.js"></script>
21-
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css" />
18+
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css"/>
2219
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen"/>
23-
<link rel="stylesheet" type="text/css" href="styles/d3.slider.css">
2420

25-
<script src="./lib/fisheye.js"></script>
26-
<script src="./lib/select2.min.js"></script>
27-
<script src="javascripts/sliderRelationship.js"></script>
28-
<script src="javascripts/streamGraph.js"></script>
29-
<script src="javascripts/stopList.js"></script>
30-
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css" />
31-
<script src="javascripts/saveFriesCards.js"></script>
21+
<script src="javascripts/msdropdown/jquery.dd.js"></script>
22+
<script src="javascripts/msdropdown/select.js"></script>
23+
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css"/>
24+
<link rel="stylesheet" type="text/css" href="styles/d3.slider.css">
3225

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

3428
</head>
3529
<body>
36-
<div id="loadingSpinner">
37-
<!-- <span id="progressText"> -->
38-
</div>
3930
<div class="title ">
4031
WordStream: Interactive Tool for Topic Evolution
41-
32+
<!--<span>-->
33+
<a href="index.html" class="button still">Video</a>
34+
<a href="demo.html" class="button active">Demo</a>
35+
<!--</span>-->
4236
</div>
43-
44-
<svg width="360px" height="375px" class="cp" id="cp">
45-
<text y="15px" font-weight="600">Control Panel</text>
46-
</svg>
47-
48-
<div id="holder1" class="dropdownList">
49-
<select id="datasetsSelect" class="styled-select" onchange="loadNewData.call(this, event)"></select>
37+
<div id="loadingSpinner">
38+
<!-- <span id="progressText"> -->
5039
</div>
51-
5240
<script src='https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.0.1/spin.min.js'></script> <!-- Spinner when loading -->
5341

54-
<script type='text/javascript' src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"> </script>
55-
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css" />
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"/>
5644

57-
<!--Time arcs-->
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"/>
5848

5949
<!--✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ Slider ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿ ✿-->
50+
<svg width="360px" height="375px" class="cp" id="cp">
51+
<text y="15px" font-weight="600">Control Panel</text>
52+
</svg>
6053
<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>
6157

6258
<p><span id="heightText" class="heightText textSlider"></span>
63-
<img class="heightIcon icon" src="images/height.png" style="width:35px;height:35px;">
59+
<img class="heightIcon icon" src="images/height.png" >
6460
</p>
65-
<div id="heightSlider" class="haxis slider" ></div>
61+
<div id="heightSlider" class="haxis slider"></div>
6662

67-
<p><img class="widthIcon icon" src="images/width.png" style="width:35px;height:35px;">
63+
<p><img class="widthIcon icon" src="images/width.png">
6864
<span id="widthText" class="widthText textSlider"></span>
6965
</p>
70-
<div id="widthSlider" class="waxis slider" ></div>
66+
<div id="widthSlider" class="waxis slider"></div>
7167

72-
<p><img class="fontIcon icon" src="images/font.png" style="width:35px;height:35px;">
68+
<p><img class="fontIcon icon" src="images/font.png">
7369
<span class="fontText textSlider">
7470
<span id="fontMin"></span>,
7571
<span id="fontMax"></span>
7672
</span>
7773
</p>
78-
<div id="fontSlider" class="fontAxis slider" ></div>
74+
<div id="fontSlider" class="fontAxis slider"></div>
7975

80-
<img class="topRankIcon icon" src="images/toprank3.png">
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>
8180

8281
<p class="textSlider flow">Flow</p>
8382
<img class="flow" style="left: 68px; width: 33px; height: 23px" src="images/flow.png">
84-
<label class="switch flow" style="left: 105px;">
83+
<label class="switch flow" style="left: 105px;">
8584
<input type="checkbox" id="flow"
8685
onclick="submitInput(updateData)">
8786

@@ -91,87 +90,30 @@
9190
<p class="textSlider angleVariance">Angle Variance</p>
9291
<img class="angleVariance" style="top: 302px;left: 278px;width: 32px; height: 35px" src="images/av.png">
9392
<label class="switch angleVariance" style="left: 315px">
94-
<input type="checkbox" id = "av"
93+
<input type="checkbox" id="av"
9594
onclick="submitInput(updateData)">
9695
<span class="toggle round"></span>
9796
</label>
9897

9998
<p class="textSlider rel">Relationships</p>
100-
<label class="switch rel" style="left: 315px;">
101-
<input type="checkbox" id="rel" onclick="showRelationship()">
99+
<label class="switch rel" style="left: 315px;">
100+
<input type="checkbox" id="rel" onclick="showRelationship()">
102101
<span class="toggle round"></span>
103102
</label>
104103
<input class="submit" onclick="submitInput(updateData)" type="button" value="Submit"><br>
105-
104+
<input class="computeMetric" onclick="computeMetric()" type="button" value="Compute measurements"><br>
106105
</div>
107-
<div id="progressBar"></div>
108-
<!--<script>-->
109-
<!--var bar = new ProgressBar.Line(progressBar, {-->
110-
<!--strokeWidth: 4,-->
111-
<!--easing: 'easeInOut',-->
112-
<!--duration: 1400,-->
113-
<!--color: '#FFEA82',-->
114-
<!--trailColor: '#eee',-->
115-
<!--trailWidth: 1,-->
116-
<!--svgStyle: {width: '100%', height: '100%'},-->
117-
<!--text: {-->
118-
<!--style: {-->
119-
<!--// Text color.-->
120-
<!--// Default: same as stroke color (options.color)-->
121-
<!--color: '#999',-->
122-
<!--position: 'absolute',-->
123-
<!--right: '0',-->
124-
<!--top: '30px',-->
125-
<!--padding: 0,-->
126-
<!--margin: 0,-->
127-
<!--transform: null-->
128-
<!--},-->
129-
<!--autoStyleContainer: false-->
130-
<!--},-->
131-
<!--from: {color: '#FFEA82'},-->
132-
<!--to: {color: '#ED6A5A'},-->
133-
<!--step: (state, bar) => {-->
134-
<!--bar.setText(Math.round(bar.value() * 100) + ' %');-->
135-
<!--}-->
136-
<!--});-->
137-
138-
<!--bar.animate(1.0); // Number from 0.0 to 1.0-->
139-
<!--</script>-->
140-
<script src="javascripts/init.js"></script>
141-
<script src="javascripts/main.js"></script>
106+
<script src="./javascripts/init.js"></script>
142107
<script>
143108
d3.select("#heightText").text(initHeight);
144109
d3.select("#widthText").text(initWidth);
145110
d3.select("#fontMin").text(initMinFont);
146111
d3.select("#fontMax").text(initMaxFont);
147-
</script>
148-
<script src="javascripts/update.js"></script>
149-
<script>
150-
updateTopRank();
112+
d3.select("#topRankText").text(initTop);
151113
</script>
152114

153-
<!--<script src="javascripts/util.js"></script>-->
154-
<!--<script type='text/javascript' src="javascripts/timeArcs.js"></script>-->
155-
<!--<div style="display: block"></div>-->
156-
<!--<input type="checkbox" id="checkbox1" value="value2" class="check" onclick="update()">-->
157-
<!--<label for="checkbox1" >Area graph only</label>-->
158-
159-
<!--<input id="search">-->
160-
<!--<button type="button" onclick="searchNode()">Search</button>-->
161-
162-
<!--<progress value="0" max="100" id="progBar">-->
163-
<!--<span id="downloadProgress">-->
164-
<!--&lt;!&ndash; Your fallback goes here &ndash;&gt;-->
165-
<!--</span>-->
166-
<!--</progress>-->
167-
<!--<label id="progUpdate">-->
168-
<!--&lt;!&ndash; Success Message &ndash;&gt;-->
169-
<!--</label>-->
170-
<!--<br>-->
171-
<!--<button onclick="saveTimeArcsData()">Save data for TimeArcs</button>-->
172-
173-
<!--<script src="javascripts/searchBox.js"></script><br>-->
174-
<!--Time axis goes from left to right<br>-->
175-
<!--Terms often appeared together in a blog are connected by a thicker link.<br>-->
115+
<script src="./javascripts/main.js"></script>
116+
<script src="./javascripts/update.js"></script>
117+
<script src="./javascripts/metric.js"></script>
176118
</body>
177119
</html>

‎displayRate.xlsx‎

-20.5 KB
Binary file not shown.

‎index.html‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,33 @@
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>
10-
<script src="./lib/progressbar.min.js"></script>
11-
<script src="./lib/d3-queue.v3.min.js"></script>
129
<script src="./lib/loaddata.js"></script>
13-
<script src="javascripts/quantum.js"></script>
1410
<script src="./lib/d3.layout.wordstream.js"></script>
1511
<script src="lib/d3.slider.js"></script>
1612
<script src="./test/testutil.js"></script>
1713
<script src="javascripts/jquery/jquery-1.9.0.min.js"></script>
18-
1914
<script src="javascripts/msdropdown/jquery.dd.js"></script>
2015
<script src="javascripts/msdropdown/select.js"></script>
2116
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css" />
2217
<link rel="stylesheet" type="text/css" href="styles/main.css" media="screen"/>
18+
19+
<script src="javascripts/msdropdown/jquery.dd.js"></script>
20+
<script src="javascripts/msdropdown/select.js"></script>
21+
<link rel="stylesheet" type="text/css" href="styles/msdropdown/dd.css" />
2322
<link rel="stylesheet" type="text/css" href="styles/d3.slider.css">
2423

25-
<script src="./lib/fisheye.js"></script>
26-
<script src="./lib/select2.min.js"></script>
27-
<script src="javascripts/sliderRelationship.js"></script>
28-
<script src="javascripts/streamGraph.js"></script>
29-
<script src="javascripts/stopList.js"></script>
3024
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css" />
31-
<script src="javascripts/saveFriesCards.js"></script>
3225

33-
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
3426
</head>
3527
<body>
36-
<div id="loadingSpinner">
37-
<!-- <span id="progressText"> -->
38-
</div>
39-
4028
<div class="title ">
4129
WordStream: Interactive Tool for Topic Evolution
42-
<a href="demo.html" class="w3-bar-item w3-button w3-mobile w3-right nav" >Demo</a>
43-
<a href="index.html" class="w3-bar-item w3-button w3-mobile w3-right nav " style="background-color: #cdcdcd">Video</a>
30+
<!--<span>-->
31+
<a href="index.html" class="button still">Video</a>
32+
<a href="demo.html" class="button active">Demo</a>
33+
<!--</span>-->
4434
</div>
45-
<center><iframe width="95%" height="900" src="media/ws.mp4" frameborder="0"
35+
<center><iframe style="margin-top: 100px" width="95%" height="800" src="media/ws.mp4" frameborder="0"
4636
allowfullscreen></iframe></center>
4737

4838
</body>

‎javascripts/init.js‎

Lines changed: 63 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,66 @@
1-
var metricName = [["Importance value (tf-idf ratio) "],["Compactness "],["All Words Area/Stream Area"],
1+
const initWidth = 1500,
2+
initHeight = 500,
3+
initMinFont = 14,
4+
initMaxFont = 36,
5+
initFlag = "none";// none / fa/ f / a
6+
7+
let initTop = 15;
8+
9+
let globalWidth = initWidth,
10+
globalHeight = initHeight,
11+
globalMinFont = initMinFont,
12+
globalMaxFont = initMaxFont,
13+
globalFlag = initFlag,
14+
globalTop = initTop,
15+
globalData;
16+
17+
let allW;
18+
19+
let mainGroup, axisGroup, xGridlinesGroup, opacScale, legendGroup, opacity, layerPath, maxFreq;
20+
21+
const color = d3.scale.category10();
22+
const axis = d3.svg.axis().ticks(4);
23+
const axisFont = d3.svg.axis().tickValues([0, 25, 50, 75, 100]);
24+
25+
d3.select('#widthSlider').call(d3.slider()
26+
.axis(axis)
27+
.value([0, initWidth])
28+
.min(0)
29+
.max(maxWidth)
30+
.step(20)
31+
.on("slide", function (evt, value) {
32+
d3.select('#widthText').text(value[1]);
33+
}))
34+
;
35+
d3.select('#heightSlider').call(d3.slider()
36+
.axis(axis)
37+
.value([0, initHeight])
38+
.min(0)
39+
.max(maxHeight)
40+
.step(20)
41+
.on("slide", function (evt, value) {
42+
d3.select('#heightText').text(value[1]);
43+
}))
44+
;
45+
d3.select('#fontSlider').call(d3.slider().axis(axisFont).value([initMinFont, initMaxFont]).on("slide", function (evt, value) {
46+
d3.select('#fontMin').text(value[0].toFixed(0));
47+
d3.select('#fontMax').text(value[1].toFixed(0));
48+
}));
49+
50+
d3.select('#topRankSlider').call(d3.slider()
51+
.axis(axis)
52+
.value([0, initTop])
53+
.min(0)
54+
.max(maxTop)
55+
.step(5)
56+
.on("slide", function (evt, value) {
57+
d3.select('#topRankText').text(value[1]);
58+
}))
59+
;
60+
const metricName = [["Importance value (tf-idf ratio) "],["Compactness "],["All Words Area/Stream Area"],
261
["Weighted Display Rate"],["Average Normalized Frequency "]];
362

4-
var metric = d3.select("body").append("svg")
63+
let metric = d3.select("body").append("svg")
564
.attr("width",360)
665
.attr("height", 250)
766
.attr("class","metricSVG")
@@ -25,13 +84,11 @@ d3.select("body")
2584
.enter().append("td")
2685
.style("border", "1px black solid")
2786
.style("padding", "10px")
28-
.on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")})
29-
.on("mouseout", function(){d3.select(this).style("background-color", "white")})
3087
.text(function(d){return d;})
3188
.style("font-size", "13px");
3289

33-
var metric2 = d3.select("body").append("svg")
90+
let metric2 = d3.select("body").append("svg")
3491
.attr("width",100)
3592
.attr("height", 300)
3693
.attr("class","metricSVG2")
37-
.attr("id","metricSVG2");
94+
.attr("id","metricSVG2");

0 commit comments

Comments
 (0)