forked from alisonmsmith/topicflow
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
165 lines (145 loc) · 7.4 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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TopicFlow</title>
<script type="text/javascript" src="scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" src="scripts/json2.js"></script>
<script type="text/javascript" src="scripts/jqcloud-0.2.9.min.js"></script>
<script type="text/javascript" src="scripts/d3/d3.v3.js"></script>
<script type="text/javascript" src="scripts/d3/topicflow.js"></script>
<script type="text/javascript" src="scripts/external.js"></script>
<script type="text/javascript" src="scripts/controller.js"></script>
<script type="text/javascript" src="scripts/Tweet.js"></script>
<script type="text/javascript" src="scripts/Bin.js"></script>
<script type="text/javascript" src="scripts/TopicModel.js"></script>
<script type="text/javascript" src="scripts/TopicSimilarityMap.js"></script>
<script src="data/Full_Disclosure_2012/Doc.js"></script>
<script src="data/Full_Disclosure_2012/Bins.js"></script>
<script src ="data/Full_Disclosure_2012/TopicSimilarity.js"></script>
<!-- add new section after this line -->
<!-- end of adding new datasets. -->
<link type="text/css" rel="stylesheet" href="css/960grid.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:100,400' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="css/TopicFlow.css">
<link type="text/css" rel="stylesheet" href="css/jqcloud.css" />
</head>
<body>
<!-- LOADING DIV -->
<div id="loader" class="loader" style="display:none">
<img src="images/ajax-loader.gif"></img>
</div>
<!-- GREYED BACKGROUND -->
<div id="dataset-popup" class="dataset-popup">
</div>
<!-- DATASET SELECTOR DIV -->
<div class="absolute-div">
<div id="selectbox_datasets">
<div id="title" class="panel_name">Select a dataset... <span id="close_select" class="title_link">Close</span></div>
<ul id="popup_data_selector">
<li id="Full_Disclosure_2012"><a href="#">Full Disclosure 2012</a></li>
<!-- add new dataset selector after this line -->
<!-- end of adding new dataset selector -->
</ul>
</div>
</div>
<!-- ABOUT DIV -->
<div class="absolute-div">
<div id="about-popup" style="display:none;">
<div id="title" class="panel_name">About TopicFlow <span id="close_about" class="title_link">Close</span></div>
<div id="about-div" class="panel_contents">
TopicFlow is a tool that visualizes
the results of automatic topic detection and topic alignment
between sets of tweets over time. <br />
<br />
This tool was initially developed as a team project for the Fall 2012 semester, class CMSC 734 Information Visualization,
taught by Prof. Ben Shneiderman for the Department of Computer Science at the University of Maryland<br>
Team members:
<ul>
<li> Jianyu Li</li>
<li> <a href="http://www.cs.umd.edu/~maliks/" target="_blank">Sana Malik</a></li>
<li> <a href="http://www.heypano.com" target="_blank">Panagis (Pano) Papadatos</a></li>
<li> <a href="http://alisonmsmith.github.io" target="_blank">Alison Smith</a></li>
</ul>
More information:
<ul>
<li> <a href="http://www.heypano.com/topicflow/topicflowv2.mp4" target="_blank">Video Tutorial</a> (mp4)</li>
<li> <a href="https://wiki.cs.umd.edu/cmsc734_f12/images/0/05/TopicFlowFinalReport2.pdf" target="_blank">CS 734 Final Paper</a> (PDF)</li>
</ul>
The work was then continued by Sana Malik and Alison Smith resulting in two additional papers: <a href="http://dl.acm.org/citation.cfm?id=2492639">TopicFLow: Visualizing Topic Alignment of Twitter data over time</a> and <a href="http://link.springer.com/chapter/10.1007/978-3-319-19003-7_9">Visual Analysis of Topical Evolution in Unstructured Text: Design and Evaluation of TopicFlow</a> published in 2013 and 2015, respectively. <br /> <br />
Topicflow has since been extended by <a href="http://carlosparadis.github.io">Carlos Paradis (University of Hawaii at Manoa)</a> et al. to be reused with any dataset.
<ul>
<li> <a href="https://github.com/sailuh/kaona" target="_blank">For TopicFlow Input Pipeline</a> (Github)</li>
<li> <a href="https://github.com/sailuh/topicflow" target="_blank">Extended TopicFlow</a> (Github)</li>
</ul>
</div>
</div>
</div>
<!-- TOOLTIP DIV -->
<div id="tt" style="display:none;">
<div id="tttop"> </div>
<div id="ttcont"> </div>
<div id="ttbot"> </div>
</div>
<!-- TOPIC SIMILARITY DIV -->
<div id="similarity_holder" style="display:none;">
<div id="topicSimilarity">
<div class="similarity_panel"><div class="title" id="t1_title"></div><div id="t1"></div></div>
<div class="similarity_panel"><div class="title" id="t2_title"></div><div id="t2"></div></div>
</div>
</div>
<!-- MAIN PAGE DIV -->
<div class="container_12">
<div class="header">
<span class="grid_8 alpha" id="product_title"><span class="dark">Topic</span><span class="light">Flow</span><span id="dataset_name"></span></span>
<span class="grid_4 omega" id="data_selector_panel">
<button id="data_selector">Change Dataset</button>
<button id="about">About TopicFlow</button>
</span>
</div>
<div class="clear"></div>
<div class="main_panel">
<div class="grid_3 alpha viz_panel" id="topic_list_panel">
<div id="filter_holder">
<div class="panel_name"><span class="panel_title">Filters</span><span id="reset_filters" class="title_link">Reset Filters</div>
<div class="panel_contents">
<label for="topic_size">Topic Size: </label> <span id="topic_size"></span>
<div id="topic_size_slider"></div>
<label for="topic_type">Topic Type: </label> <span id="topic_type"></span>
<fieldset id="topic_type_checkboxes">
<span><input type="checkbox" class="checkall" value="all" checked="yes"/> <span class="all type_option">Select/Unselect All</span></span><br />
<span class="emerging type_option"><input type="checkbox" class="topic_type" value="emerging" checked="yes"/> Emerging</span>
<span class="continuing type_option"><input type="checkbox" class="topic_type" value="continuing" checked="yes"/> Continuing</span><br />
<span class="ending type_option"><input type="checkbox" class="topic_type" value="ending" checked="yes"/> Ending</span>
<span class="standalone type_option"><input type="checkbox" class="topic_type" value="standalone" checked="yes"/> Standalone</span>
</fieldset>
<label for="similarity_weight">Similarity Weight: </label> <span id="similarity_weight"></span>
<div id="similarity_weight_slider"></div>
</div>
</div>
<div class="panel_name"><span class="panel_title" id="topics_title">Topics</span><span class="title_link" id="view_all">Deselect Topic</span></div>
<div class="panel_contents">
<center><input type="text" title="Search for word..." id="topic_searchbox" /></center>
<ul id="topic_list"></ul>
</div>
</div>
<div class="grid_6 viz_panel" id="flow_viz_panel">
<div class="panel_name"><span class="panel_title">Topic Over Time Similarity</span></div>
<div class="panel_contents">
<div id="flow_viz"></div>
</div>
</div>
<div class="grid_3 omega viz_panel" id="tweet_list_panel">
<div class="panel_name" id="tweet_list_title">DOCUMENTS</div>
<div class="panel_contents">
<div id="tweet_list"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>