forked from osome-iu/hoaxy-frontend
-
Notifications
You must be signed in to change notification settings - Fork 1
/
stats.html
137 lines (126 loc) · 5.27 KB
/
stats.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
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<title>Claim and Fact Checking Spreading Statistics</title>
<!--#include virtual="./includes/includes.html" -->
</head>
<body>
<!--#include virtual="./includes/header.html" -->
<nav class="container_fluid tab_container">
<ul class="nav nav-tabs container" role=tablist >
<li class="nav-item">
<a class="nav-link active" href="#popular_articles" role="tab" data-toggle="tab">Popular Articles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#influential_users" role="tab" data-toggle="tab">Influential Users</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#active_users" role="tab" data-toggle="tab">Active Users</a>
</li>
</ul>
</nav>
<div class="tab-content">
<section class="tab-pane active container-fluid" role="tabpanel" id="popular_articles">
<div class="row">
<div class="col-md-6">
<p>Most popular <span class="">claims</span> articles in the last month</p>
<div class="table-responsive" id="popular_articles_claim"></div>
</div>
<div class="col-md-6">
<p>Most popular <span class="">fact checking</span> articles in the last month</p>
<div class="table-responsive" id="popular_articles_fact_checking"></div>
</div>
</div>
</section>
<section class="tab-pane container-fluid" role="tabpanel" id="influential_users">
<div class="row">
<div class="col-md-6">
<p>Most influential users sharing <span class="">claims</span> in the last month</p>
<div class="table-responsive" id="influential_users_claim"></div>
</div>
<div class="col-md-6">
<p>Most influential users sharing <span class="">fact checking</span> in the last month</p>
<div class="table-responsive" id="influential_users_fact_checking"></div>
</div>
</div>
</section>
<section class="tab-pane container-fluid" role="tabpanel" id="active_users">
<div class="row">
<div class="col-md-6">
<p>Most active users sharing <span class="">claims</span> in the last month</p>
<div class="table-responsive" id="active_users_claim"></div>
</div>
<div class="col-md-6">
<p>Most active users sharing <span class="">fact checking</span> in the last month</p>
<div class="table-responsive" id="active_users_fact_checking"></div>
</div>
</div>
</section>
</div>
<script>
(function() {
$.ajax({
url: configuration.top_articles_url,
headers: configuration.top_articles_headers,
dataType: 'json' ,
success: function(data) {
$("#popular_articles_claim").append('<tr><th>Capture date</th><th>Title</th><th>Tweets</th></tr>');
$("#popular_articles_fact_checking").append('<tr><th>Capture date</th><th>Title</th><th>Tweets</th></tr>');
$.each(data['articles'], function(i, h) {
var capture_date = h['capture_date'].split('T')[0];
var row = '<tr><td>' + capture_date + '</td>'
+ '<td><a href="' + h['canonical_url'] +
'" target="_blank">' + h['title'] + '</a></td><td>' +
h['number_of_tweets'] + '</td></tr>'
$("#popular_articles_" + h['site_type']).append(row);
});
$("#popular_articles_claim").wrapInner('<table class="table table-striped"></table>');
$("#popular_articles_fact_checking").wrapInner('<table class="table table-striped"></table>');
}
});
$.ajax({
url: configuration.top_users_url,
headers: configuration.top_users_headers,
dataType: 'json' ,
success: function(data) {
$("#active_users_claim").append('<tr><th>screen name</th><th>tweets</th><th>Botometer score</th></tr>');
$("#active_users_fact_checking").append('<tr><th>screen name</th><th>tweets</th><th>Botometer score</th></tr>');
$("#influential_users_claim").append('<tr><th>screen name</th><th>retweets</th><th>Botometer score</th></tr>');
$("#influential_users_fact_checking").append('<tr><th>screen name</th><th>retweets</th><th>Botometer score</th></tr>');
var empty_or_na;
// test whether any bot_score exists
if (data['spreaders'].every(function(x){return x['bot_score'] === null})){
empty_or_na = 'Click';
}
else{
empty_or_na = 'n/a';
}
$.each(data['spreaders'], function(i, h) {
var bot_perc;
if (h['bot_score'] === null) {
bot_perc = empty_or_na;
} else {
bot_perc = h['bot_score'] * 100;
bot_perc = bot_perc.toFixed() + '%';
}
var link = '<tr><td><a href="https://twitter.com/' + h['user_screen_name']
+ '" target="_blank">' + h['user_screen_name'] + '</a></td><td>'
+ h['number_of_tweets']
+ '</td><td><a target="_blank" href="https://botometer.iuni.iu.edu/#!/?sn='
+ h['user_screen_name'] + '">' + bot_perc + '</a></td></tr>';
if(h['spreading_type'] == 'active')
$("#active_users_" + h['site_type']).append(link);
else if(h['spreading_type'] == 'influential')
$("#influential_users_" + h['site_type']).append(link);
});
$("#active_users_claim").wrapInner('<table class="table table-striped"></table>');
$("#active_users_fact_checking").wrapInner('<table class="table table-striped"></table>');
$("#influential_users_claim").wrapInner('<table class="table table-striped"></table>');
$("#influential_users_fact_checking").wrapInner('<table class="table table-striped"></table>');
}
});
})();
</script>
<!--#include virtual="./includes/footer.html" -->
</body>
</html>