-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
120 lines (116 loc) · 7.89 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
<title>GWF Co Author Graph</title>
<link rel="icon" type="image/x-icon" href="gwf_co_author_graph/file/images/gwf_logo.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- START SIGMA IMPORTS -->
<script src="gwf_co_author_graph/build/sigma.min.js"></script>
<script src="gwf_co_author_graph/src/sigma.core.js"></script>
<script src="gwf_co_author_graph/src/conrad.js"></script>
<script src="gwf_co_author_graph/src/utils/sigma.utils.js"></script>
<script src="gwf_co_author_graph/src/utils/sigma.polyfills.js"></script>
<script src="gwf_co_author_graph/src/sigma.settings.js"></script>
<script src="gwf_co_author_graph/src/classes/sigma.classes.dispatcher.js"></script>
<script src="gwf_co_author_graph/src/classes/sigma.classes.configurable.js"></script>
<script src="gwf_co_author_graph/src/classes/sigma.classes.graph.js"></script>
<script src="gwf_co_author_graph/src/classes/sigma.classes.camera.js"></script>
<script src="gwf_co_author_graph/src/classes/sigma.classes.quad.js"></script>
<script src="gwf_co_author_graph/src/classes/sigma.classes.edgequad.js"></script>
<script src="gwf_co_author_graph/src/captors/sigma.captors.mouse.js"></script>
<script src="gwf_co_author_graph/src/captors/sigma.captors.touch.js"></script>
<script src="gwf_co_author_graph/src/renderers/sigma.renderers.canvas.js"></script>
<script src="gwf_co_author_graph/src/renderers/sigma.renderers.webgl.js"></script>
<script src="gwf_co_author_graph/src/renderers/sigma.renderers.svg.js"></script>
<script src="gwf_co_author_graph/src/renderers/sigma.renderers.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="gwf_co_author_graph/src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="gwf_co_author_graph/src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="gwf_co_author_graph/src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/svg/sigma.svg.utils.js"></script>
<script src="gwf_co_author_graph/src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="gwf_co_author_graph/src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="gwf_co_author_graph/src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="gwf_co_author_graph/src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="gwf_co_author_graph/src/middlewares/sigma.middlewares.copy.js"></script>
<script src="gwf_co_author_graph/src/misc/sigma.misc.animation.js"></script>
<script src="gwf_co_author_graph/src/misc/sigma.misc.bindEvents.js"></script>
<script src="gwf_co_author_graph/src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="gwf_co_author_graph/src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script src="gwf_co_author_graph/plugins/sigma.parsers.gexf/gexf-parser.js"></script>
<script src="gwf_co_author_graph/plugins/sigma.parsers.gexf/sigma.parsers.gexf.js"></script>
<script src="gwf_co_author_graph/plugins/sigma.layout.noverlap/sigma.layout.noverlap.js"></script>
<script src="gwf_co_author_graph/plugins/sigma.plugins.animate/sigma.plugins.animate.js"></script>
<script src="gwf_co_author_graph/plugins/sigma.renderers.customShapes/shape-library.js"></script>
<script src="gwf_co_author_graph/plugins/sigma.renderers.customShapes/sigma.renderers.customShapes.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-fetch.v1.min.js"></script>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">
<img src="gwf_co_author_graph/file/images/GWF_logo.png" height="36" class="d-inline-block align-middle" alt="">
Global Water Futures</a>
<div class="node-controls navbar-right">
<div class="search-container" style="float: right;">
<div class="input-group">
<input id="search-input" class="form-control border-end-0 border" list="nodes-datalist"
placeholder="Search for an author" size="40px">
<span class="input-group-append">
<button class="btn btn-outline-secondary bg-white border-start-0 border-bottom-0 border ms-n5" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<datalist id="nodes-datalist"></datalist>
</div>
</nav>
<div class="container p-3 my-3"
style="float: left; width: 380px; height: 70%; position: relative; z-index: 20; align-self: flex-end;">
<div
style="border: solid; padding: 10px; margin-left:2px; margin-right: 0px; box-shadow: 5px 10px 8px #888888; border-width: 1px; background-color: white;font-size: smaller;">
<h3 class="centre">Co-Authorship Graph</h3>
<p>
This co-authorship graph shows a visualization of collaborations across the GWF community, extracted from
approximately 700 papers in the GWF Annual Reports from Y1 to Y3.<br><br>
In this undirected graph, nodes represents authors and edges denote co-authorship. That is, an edge between two
nodes indicates that the two individuals have co-authored at least one paper together.<br><br>
As these data were automatically extracted, there might be data quality issues. If you find any problems, please
report to Jimmy Lin at the University of Waterloo.<br>
</p>
</div>
<div style="border: solid; padding: 10px; margin-left:2px; margin-right: 0px; box-shadow: 5px 10px 8px #888888;
border-width: 1px; background-color: white; margin-top: 5px; overflow: scroll; height: 300px;">
<h3>Affiliations</h3>
<div class="checkbox-container" id="checkbox-container">
</div>
</div>
<div style="margin-top: 30px;" class="text-center">
<button type="button" id="zoom-in-button" class="zoom-button zoom-in"><i class="fa fa-search-plus"></i></button>
<button type="button" id="zoom-out-button" class="zoom-button zoom-out"><i class="fa fa-search-minus"></i></button>
<button type="button" id="refresh-button" class="zoom-button refresh" onClick="window.location.reload();">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>
<span id="selected-nodes" class="btn"
style="margin-top: 5px; margin-right:13px ; z-index: 25; float: right; position: relative;border: solid; background-color: white; border-width: 1px; text-align: left;"></span>
<div id="container">
<div id="sigma-container"></div>
</div>
<script src="index.js"></script>