Wikipedia-Visualization/index.html at master · jdylanmc/Wikipedia-Visualization · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<title>Graph Visualization</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
		<script type="text/javascript" src="scripts/Three.js"></script>
		<script type="text/javascript" src="scripts/simple_graph.js"></script>
		<script type="text/javascript" src="scripts/force-directed-layout.js"></script>
		<script type="text/javascript" src="scripts/Label.js"></script>
		<script type="text/javascript" src="scripts/ObjectSelection.js"></script>
		<script type="text/javascript" src="scripts/requestAnimationFrame.js"></script>
		<script type="text/javascript" src="scripts/Stats.js"></script>
		<script type="text/javascript" src="scripts/threejs-interaction.js"></script>
		<script type="text/javascript" src="scripts/Graph.js"></script>
		<script type="text/javascript" src="scripts/Wikipedia.js"></script>


		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				background-color: #f0f0f0;
				font: 11px courier;
				overflow: hidden;
			}
			#graph-info {
				padding-left: 10px;
			}
			#options {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 10;
				width: 250px;
			}
			.box-outter {
				border-left: 1px solid black;
				border-bottom: 1px solid black;
				margin: 10px;
			}
			.box-inner {
				padding-left: 5px;
				padding-bottom: 5px;
			}
			.control-button {
				width: 80px;
			}
		</style>
	</head>
	<body>
		<div id="options">
				<div class="box-outter">
					<div class="box-inner">
						<form onsubmit="WIKI_parse(); return false;">
							<p>
								<h3>Wikipedia Visualization</h3>
								Type in the box below to search for a topic on Wikipedia.  The topic and first 7 associated links will be displayed as nodes.  Click a node to further expand it's links.
							</p>
							<input type="text" id="input-text" />
							<input type="button" value="Go" id="go-button">
						<form>
					</div>
				</div>
				<div class="box-outter">
					<div class="box-inner">
						<table align="center">
							<tr>
								<td>
									<input type="button" value="Pause" onclick="Pause();" class="control-button">
								</td>
							</tr>
							<tr>
								<td>
									<input type="button" value="Adjust" onclick="Adjust();" class="control-button">
								</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="box-outter">
					<div class="box-inner">
						<p>
							<h3>Stats:</h3>
							<div id="graph-info"></div>
						</p>
					</div>
				</div>
				<div class="box-outter">
					<div class="box-inner">
						<h3>Controls</h3>
						<table>
							<tr>
								<td>
									Rotate:
								</td>
								<td>
									Left Mouse Button
								</td>
							</tr>
							<tr>
								<td>
									Zoom:
								</td>
								<td>
									S + Left Mouse Button
								</td>
							</tr>
							<tr>
								<td>
									Drag:
								</td>
								<td>
									D + Left Mouse Button
								</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="box-outter">
					<div class="box-inner">
					<p>
						Created for a graduate course at MTSU, circa 2011.  This project uses Three.js for rendering, and was inspired by a framework created by <a href="https://github.com/davidpiegza/Graph-Visualization">David Piegza</a>.
					</p>
					</div>
				</div>
		</div>
	</body>
</html>