This repository has been archived by the owner on Jan 13, 2022. It is now read-only.
forked from jrladd/network_navigator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (179 loc) · 9.56 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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!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">
<title>Network Navigator</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="bootstrap-sortable.css">
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 80px;
}
#logo {
max-height: 15px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
background-color: #f5f5f5;
}
.panel.viz {
height: 500px;
}
#canvas { height: 460px; }
.container .text-muted {
margin: 20px 0;
}
.instructions {
background-color: #E6EAF0;
border: 1px solid #AEB1B5;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
.panel-body {
white-space: pre;
}
code {
white-space: pre;
}
.alert {
display: none;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="col-md-8">
<h4>Navigate Your Network Data</h4>
<p><a href class="show-instructions">Show/Hide Instructions</a></p>
</div>
<div class="col-md-8 collapse instructions">
<p>This tool is meant to provide a metrics-focused look into your network data. We hope it will be a quick and easy way to get the most popular network measurements. While we provide a small visualization for comparison purposes, visualization is not the focus. Instead, we hope the sortable tables will allow you to assess and navigate your network in new ways.</p>
<p>Type or drag-and-drop your edge list into the box below. Use a CSV file or type your edges separated by commas, like so (do not include a header row):</p>
<p><code>Person One,Person Two
Person Two,Person Three
Person Three,Person One</code></p>
<p>Your network can be either weighted or unweighted, and either directed or undirected. If your network is weighted, you'll need to add a third column to every line with the weight value:</p>
<p><code>Person One,Person Two,5</code></p>
<p>For more information about managing network data and an introduction to the various network metrics used here, we recommend two <em>Programming Historian</em> tutorials: <a href="https://programminghistorian.org/lessons/creating-network-diagrams-from-historical-sources" target="_blank">Creating Network Diagrams from Historical Sources</a> and <a href="https://programminghistorian.org/lessons/exploring-and-analyzing-network-data-with-python" target="_blank">Exploring and Analyzing Network Data</a>. n.b.: Network Navigator is currently only set up for unimodal (or unipartite) networks. While it will give results for any edge list, be advised that the metrics for bipartite networks aren't reliable.</p>
<p><strong>This website does not collect or store <em>any</em> data. Your data remains on your computer alone and is not sent to an external server. No one can view your data or results but you.</strong></p>
<p>If you have comments or suggestions, feel free to <a href="http://twitter.com/johnrladd" target="_blank">say hello on Twitter</a>.</p>
</div>
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-8">
<textarea class="form-control" rows="8" placeholder="Paste data from your spreadsheet or drag CSV file here"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<label class="radio-inline"><input type="radio" value="undirected" name="graphType" checked>Undirected</label>
<label class="radio-inline"><input type="radio" value="directed" name="graphType">Directed</label>
</div>
</div>
<!-- <div class="form-group">
<div class="col-md-8">
<label class="radio-inline"><input type="radio" value="unimodal" name="graphMode" checked>Unimodal</label>
<label class="radio-inline"><input type="radio" value="bimodal" name="graphMode">Bimodal</label>
</div>
</div> -->
<div class="form-group">
<div class="col-md-8">
<label class="radio-inline"><input type="radio" value="unweighted" name="graphWeight" checked>Unweighted</label>
<label class="radio-inline"><input type="radio" value="weighted" name="graphWeight">Weighted</label>
</div>
</div>
<div class="form-group">
<div class="col-md-8 alert-container">
<button class="btn btn-info" id="calculate" type="button" data-loading-text="Calculating..." autocomplete="off">Calculate</button>
<div class="alert alert-danger" role="alert" id="row-error">
<h4 class="alert-heading">Too many/too few values!</h4>
<p>One or more of the rows in your data has the wrong number of values. For unweighted networks, your rows can have two or three values: <code>source,target</code> or <code>source,target,weight</code>. For weighted networks, each row must have three values: <code>source,target,weight</code>.</p>
<p class="mb-0">Please edit your data and try again.</p>
</div>
<div class="alert alert-warning" role="alert" id="eigen-error">
<strong>Skipping Eigenvector Centrality</strong>: Your network has no closed loops, so eigenvector centrality cannot be calculated.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-8 collapse metrics" id="metrics">
<div class="table-responsive">
<table class="table table-hover sortable">
<thead>
<tr>
<th>Node ID</th>
<th data-defaultsort="desc">Degree</th>
<th data-firstsort="desc">Betweenness Centrality</th>
<th data-firstsort="desc">Eigenvector Centrality</th>
<th data-firstsort="desc">Clustering Coefficient</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="col-md-4 collapse metrics">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Global metrics
</h4>
</div>
<div class="panel-body" id="info-panel"></div>
</div>
<div class="alert alert-info" role="alert" id="viz-warning">
<strong>Visualization too large</strong>: To protect browser speed, the visualization was not loaded.
<button class="btn btn-info" type="button" id="load-viz">Click to load</button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="panel panel-default viz">
<div class="panel-heading">
<h4 class="panel-title">
Visualization (scroll to zoom)
</h4>
</div>
<div id="canvas"></div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Made by <a href="http://jrladd.com" target="_blank">J.R. Ladd</a> with hosting and support from <a href="http://dsharp.library.cmu.edu/" target="_blank"><img id="logo" src="CMU_Logo_Horiz_Red.png" /></a>. Inspiration, suggestions, and help from Ruth and Sebastian Ahnert, Scott Weingart, Dan Evans, WUSTL's Humanities Digital Workshop, and <a href="http://sixdegreesoffrancisbacon.com">Six Degrees of Francis Bacon</a>. All of this made possible by <a href="http://jsnetworkx.org/" target="_blank">JSNetworkX</a>. Last updated: 30 August 2019.</p>
</div>
</footer>
<!-- Latest jQuery API -->
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type='text/javascript' src='jsnetworkx.js'></script>
<script type='text/javascript' src='bootstrap-sortable.js'></script>
<script type="text/javascript" src="jquery.csv.min.js"></script>
<script type='text/javascript' src='main.js'></script>
</body>
</html>