-
Notifications
You must be signed in to change notification settings - Fork 0
/
bach_network.html
163 lines (141 loc) · 5.71 KB
/
bach_network.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
<!DOCTYPE html>
<html lang="en">
<!-- Author: https://github.com/araobp -->
<head>
<title>J. S. Bach's Network</title>
<meta charset="utf-8">
<meta name="description" content="Bach Network with NLP">
<!-- graphology.js and vis.js -->
<script src="lib/graphology.min.js"></script>
<script>
const { UndirectedGraph } = graphology;
</script>
<script src="lib/graphology-library.min.js"></script>
<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<!-- Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Import data from Jupyter Notebook -->
<script src="data/graph_data.js"></script>
<script src="data/paragraphs.js"></script>
<script src="data/places.js"></script>
<!-- Web font -->
<link href="https://fonts.cdnfonts.com/css/germania-one" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="css/style.css">
</head>
<body style="background-color:azure;">
<div id="container">
<div style="display: flex;">
<div style="margin: 0;">
<h1 style="font-family: 'Germania One', sans-serif;">J. S. Bach's Nework</h1>
<p style="font-size: 0.8rem;">Click on a node or an edge.<br>Double click on a node to open its Wikipedia page.
</p>
</div>
<div></div>
<!-- Portraits -->
<div class="portrait">
<img src="portrait/Johann_Sebastian_Bach.jpg">
<div>Johann Sebastian Bach</div>
</div>
<div class="portrait">
<img src="portrait/Wilhelm_Friedemann_Bach.png">
<div>Wilhelm Friedemann Bach</div>
</div>
<div class="portrait">
<img src="portrait/Carl Philipp Emanuel Bach.jpg">
<div>Carl Philipp Emanuel Bach</div>
</div>
<div class="portrait">
<img src="portrait/George_Frideric_Handel.jpeg">
<div>Georg Friedrich Händel</div>
</div>
<div class="portrait">
<img src="portrait/Telemann.jpg">
<div>Georg Philipp Telemann</div>
</div>
<div class="portrait">
<img src="portrait/Leopold-khoten.jpg">
<div>Leopold von Anhalt-Köthen</div>
</div>
<div class="portrait">
<img
src="portrait/Adolph_Menzel_-_Fl%C3%B6tenkonzert_Friedrichs_des_Gro%C3%9Fen_in_Sanssouci_-_Google_Art_Project_%28cropped%29.jpg">
<div>Friedrich der Große</div>
</div>
</div>
<div id="buttons">
<div style="margin-left: 2px; margin-right: 3px; font-family: sans-serif; font-size: 0.8rem;">Mode:</div>
<select name="mode" id="mode" onchange="changeMode(this)" style="width: 5rem;">
<option value="network">Network</option>
<option value="map">Map</option>
</select>
<div style="margin-left: 10px; margin-right: 3px; font-family: sans-serif; font-size: 0.8rem;">Edge
weight threshold:</div>
<select name="threshold" id="threshold" onchange="filterGraph(this)">
<option value="3">3</option>
<option value="2.5">2.5</option>
<option value="2">2</option>
<option value="1.5" selected="selected">1.5</option>
<option value="1" selected="selected">1</option>
<option value="0.5">0.5</option>
<option value="0">0</option>
</select>
<label id="selectedNode" for="neighbors"></label>
<button class="button" type="button" onclick="showNeighbors()">Neighbors</button>
<button class="button" type="button" onclick="showGroupMembersOnly()">Group</button>
<!-- <button class="button" type="button" onclick="showBFS()">Depth1</button> -->
<button class="button" type="button" onclick="showAll()">Reset</button>
</div>
<div id="main">
<div class="frame" id="network"></div>
<div class="frame" id="map" style="display: none;"></div>
<div id="paragraph">...</div>
</div>
<a style="font-size: 0.8rem;" href="https://www.gutenberg.org/ebooks/35041">Source: "Johann Sebastian Bach: His
Life, Art, and Work by Johann Nikolaus Forkel
Book Cover"</a>
</div>
<dialog id="web-version-dialog">
<iframe id="web-version-file">...</iframe>
<button autofocus onclick="closeModal();">Close</button>
</dialog>
<dialog id="initializing" style="width: 20rem; height: 1rem; text-align: center; overflow: hidden;">
<div>Initializing...</div>
<!-- Dummy div for preventing autofucus -->
<div tabindex="-1"></div>
</dialog>
<script>
// graphology.js instance
// このインスタンスはコピーしながら使い回しする。
const data = { nodes: nodes, edges: edges };
const G = UndirectedGraph.from(data);
var WEIGHT_THRESHOLD = 1;
const WEB_VERSION_FILE = 'book/pg35041-with-ids.html';
</script>
<!-- /// Load script for this page /// -->
<script src="script/util.js"></script>
<!-- Panes in the left half of the page -->
<script src="script/network-pane.js"></script>
<script src="script/map-pane.js"></script>
<!-- A pane in the right half in the page -->
<script src="script/paragraph-pane.js"></script>
<script>
const changeMode = option => {
const mode = option.value;
const network = document.getElementById("network");
const map = document.getElementById("map");
if (mode === 'network') {
network.style['display'] = "inline";
map.style['display'] = "none";
} else if (mode === 'map') {
network.style['display'] = "none";
map.style['display'] = "inline";
drawMap();
}
}
</script>
</body>
</html>