-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (174 loc) · 11.1 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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Graphalyzer</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<a href="https://github.com/rwhite226/Graphalyzer" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div class="brand">Graphalyzer</div>
<div class="address-bar">Iowa State Senior Design - May1618</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">Graphalyzer</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="team.html">The Team</a>
</li>
<li>
<a href="docs.html">Documentation</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Graph Visualizer and Analysis Tool</h2>
<hr>
<hr class="visible-xs">
<p>An Iowa State Senior Design joint project with <a href="http://www.workiva.com" title="">Workiva</a>, Graphalyzer visualizes data of any context into an interactive graph. Users can perform basic analysis on the graph such as visual filtering, node searching, and even specify parameters to draw subgraphs.</p>
<p>Graphalyzer intends to be a completely lightweight and open source tool. The context of the data is arbitrary. As long as the data can be represented in the form of nodes and edges, the user can interact with it.</p>
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">Features</h2>
<hr>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#filtering" aria-controls="filtering" role="tab" data-toggle="tab">
<h4>Filtering</h4>
</a>
</li>
<li role="presentation">
<a href="#searching" aria-controls="searching" role="tab" data-toggle="tab">
<h4>Searching</h4>
</a>
</li>
<li role="presentation">
<a href="#subgraphs" aria-controls="subgraphs" role="tab" data-toggle="tab">
<h4>Subgraphs</h4>
</a>
</li>
<li role="presentation">
<a href="#export-url" aria-controls="export-url" role="tab" data-toggle="tab">
<h4>Exporting Analysis</h4>
</a>
</li>
<li role="presentation">
<a href="#videos" aria-controls="videos" role="tab" data-toggle="tab">
<h4>Video Demos</h4>
</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="filtering">
<div class="col-lg-6">
<p>Graphalyzer allows the user to look for specific characteristics of the data they are trying to analyze. One easy and intuitive way the user can do this is through filtering. Filtering allows the user to specify properties they want to focus on. For example, if the user loads a graph describing a database of users with user IDs and timecodes, as well as other properties, and they want to only focus on members of the graph with user IDs greater than or less than a number they specify, Graphalyzer filters out nodes that do not meet the user's query.</p>
</div>
<img class="img-responsive" src="img/screenshots/filtering_numerical/settings.jpg">
<br>
<img class="img-responsive" src="img/screenshots/filtering_numerical/filtering_numerical.jpg">
<br><br>
<div class="col-lg-6">
<p>The user can also filter out nodes that <em>don't have</em> a property. In this example, let's remove all the nodes that don't have a user ID.</p>
</div>
<img class="img-responsive" src="img/screenshots/filtering_remove/settings.jpg">
<br>
<img class="img-responsive" src="img/screenshots/filtering_remove/filtering_remove.jpg">
<br><br>
<div class="col-lg-6">
<p>Finally, an easy way to search for a member of the graph is to filter nodes that have a property that <em>isn't equal</em> to a value. This is beneficial in cases where the user knows a member of the graph has a property equal to a certain value but does not know the specific name of that member.</p>
</div>
<img class="img-responsive" src="img/screenshots/filtering_equals/settings.jpg">
<br>
<img class="img-responsive" src="img/screenshots/filtering_equals/filtering_equals.jpg">
</div>
<div role="tabpanel" class="tab-pane" id="searching">
<p>Graphalyzer also allows the user to search for members of a graph. This is important for finding important data stored within the data, and finding all of its relationships. Graphalyzer makes this very easy to do by allowing the user to specify a property to search for, and the value of that property. The example below shows a very large Pokémon graph, with nodes representing the 151 Generation I Pokémon, as well as all Pokémon types and moves that exist in the game. The edges represent moves each Pokémon knows and their types. In total, this is a graph of thousands of nodes, and hundreds of thousands of edges, showing the power Graphalyzer has when visualizing graphs. The seemingly filled circle of grey comes from the sheer amount of edges.</p>
<img class="img-responsive" src="img/screenshots/searching/searching_before.jpg">
<br><br>
<p>In this giant graph, we want to find Pikachu. In the search bar on the right, we specify the property, in this case <b>name</b>. Next, we specify the value, in this case <b>pikachu</b>. Graphalyzer finds Pikachu, focuses in on that node, and automatically selects it for the properties to display on the right.</p>
<img class="img-responsive" src="img/screenshots/searching/searching_after.jpg">
</div>
<div role="tabpanel" class="tab-pane" id="subgraphs">
<p>Graphalyzer doesn't have to draw the entire graph if the data is too large. One of the reasons why data can be hard to understand is <em>because</em> it is so large, even when looking at it in the form of a graph. Graphalyzer allows users to specify a subgraph of the data they want to see, starting from a source node, and exploring out to a certain depth of connectivity.</p>
<img class="img-responsive" src="img/screenshots/subgraphs/subgraphs_modal.jpg">
<br><br>
<p>Here, we load the Pokémon graph, but we provide a source node ID, in this case, the ID points to <b>Bulbasaur</b>. Next, we provide the depth of connectivity to be 1, before finally drawing the graph.</p>
<img class="img-responsive" src="img/screenshots/subgraphs/subgraphs_result.jpg">
<br><br>
<p>Here is our resulting graph. If the graph is explored, all of the outgoing nodes from Bulbasaur represent all of the moves it can learn, and the one incoming node is Ivysaur, Bulbasaur's evolution.</p>
</div>
<div role="tabpanel" class="tab-pane" id="export-url">
<p>Sharing data is easy with Graphalyzer. If you want to share the work you've done on your graph, including filtering, searching, and subgraphs, simply click the <b>Export URL</b> button on the Dashboard. This copies an auto-generated web URL to your clipboard. Just paste this in an email, group chat, etc. to share this with another user, and when they load the page, Graphalyzer will automatically load to the state your graph was in.</p>
</div>
<div role="tabpanel" class="tab-pane" id="videos">
<iframe width="560" height="315" src="https://www.youtube.com/embed/P5A3UxZwodU" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JRYCwPoh0qc" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/hqfuVaon-54" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © Iowa State University 2015-2016</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</body>
</html>