-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (114 loc) · 5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Visualize COVID-19 Vaccine Stance</title>
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="resources/libraries/skeleton/normalize.css">
<link rel="stylesheet" href="resources/libraries/skeleton/skeleton.css">
<!-- Default CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="resources/css/style.css">
</head>
<body>
<div class="container header">
<div class="row">
<div class="six columns">
<h5 class="m0">Visualize COVID-19 Vaccine Stance</h5>
A visual approach to understand public stance towards vaccination in relation with (de)motivating topics on
Twitter
</div>
<div class="six columns text-right">
<strong>Ashiqur Rahman</strong><br/>
Department of Computer Science<br/>
Northern Illinois University
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelve column">
<h3>Visualizing (de)motivating topics and stance</h3>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelve columns">
<p>The data is visualized in two separate SVGs; one at the top is the topics and then at the bottom is the
stance. The visualizations change when user changes the month using the slider. User can also
highlight specific user's sentiment by selecting from the dropdown. There is a dropdown to switch
between motivating and demotivating topics.</p>
</div>
<div class="twelve columns">
<div class="row">
<div class="eight columns">
<div id="topic-visualization">
</div>
</div>
<div class="four columns">
<div class="data-selector">
<div id="data-source">
<select id="data-source-select" name="data-source">
<option value="demotivate">Demotivating Topics</option>
<option value="motivate">Motivating Topics</option>
</select>
</div>
</div>
<div class="user-selector">
<div id="users">
</div>
</div>
<div class="month-selector">
<div id="months">
</div>
<div id="selected-month" class="selected-month">
<span id="selected-month-label"></span>
</div>
</div>
</div>
</div>
</div>
<div class="twelve columns">
<div id="sentiment-visualization">
</div>
</div>
</div>
</div>
<div class="container footer">
<div class="row">
<div class="six columns">
<p class="text-left">
<small>
<a href="https://github.com/ashiqur-rony/visualize-covid-stance/blob/477a2011df9818e1a4bef589df340dbf93d49725/docs/Visualizing%20Relation%20Between%20(De)Motivating%20Topics%20and%20Public%20Stance%20toward%20COVID-19%20Vaccine.pdf"
target="_blank">Read the paper</a> | <a
href="https://github.com/ashiqur-rony/visualize-covid-stance" target="_blank">View the
code</a>
</p>
</div>
<div class="six columns">
<p class="text-right">
<small>
Part of the MS thesis by Ashiqur Rahman.<br/>
Email: [email protected]<br/>
Last update: 06/15/2023
</small>
</p>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Loading D3
-------------------------------------------------- -->
<script type="module" src="resources/scripts/d3module.js"></script>
</body>
</html>