-
Notifications
You must be signed in to change notification settings - Fork 0
/
spiral.html
131 lines (115 loc) · 5.58 KB
/
spiral.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
<html lang="en">
<head>
<!-- Primary Meta Tags -->
<title>Eisenstein's House - Spiral Visualization</title>
<meta name="title" content="Spiral Visualization of Eisenstein's House">
<meta name="description" content="Data vizualisation of Sergei M. Eisenstein's life and legacy through spiral timeline.">
<meta name="keywords" content="data visualization, spiral timeline, multimodal data visualization, digital humanities, eisenstein">
<link rel="icon" type="image" href="images/K_icon.png">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:title" content="Spiral Visualization - Eisenstein's House">
<meta property="og:description" content="Spiral timeline representing life of Sergei M. Eisenstein.">
<meta property="og:image" content="https://uclab-potsdam.github.io/kollisionen/images/K_logo_cover.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="">
<meta property="twitter:title" content="Spiral Visualization - Eisenstein's House">
<meta property="twitter:description" content="Spiral timeline representing life of Sergei M. Eisenstein.">
<meta property="twitter:image" content="https://uclab-potsdam.github.io/kollisionen/images/K_logo_cover.jpg">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/modal.css" />
<link rel="stylesheet" type="text/css" href="css/search.css">
<script src="assets/d3.v6.js"></script>
<script src="assets/jquery.min.js"></script>
<script src="assets/select2.min.js"></script>
<script type="text/javascript" src="js/shepherd-bundle.js"></script>
<link rel="stylesheet" href="css/popup.css" />
<!-- tone.js -->
<script src="assets/Tone.min.js" type="text/javascript"></script>
</head>
<body>
<!-- top panel with three views -->
<div class="toppanel">
<div class="spiralviz">
<h2><strong>Spiral</strong></h2>
</div>
<div class="timelinesviz" title="Click to see Timelines view"> <a href="timelines.html">
<h2>Timelines</h2>
</a>
</div>
<div class="networkviz" title="Click to see Network view"> <a href="network.html">
<h2>Network</h2>
</a>
</div>
</div>
<!-- the viz -->
<div id="chart">
<script type="text/javascript" src="js/spiral.js"></script>
</div>
<script type="text/javascript" src="js/sound.js"></script>
<!-- left panel with filters, search and button -->
<div id="left-panel">
<!-- logo -->
<div class="logo">
<a href="index.html">
<img src="images/K_logo.svg" alt="Kollisionen logo">
</a>
</div>
<!-- search -->
<div class="search-container">
<div id="search"></div>
</div>
<!-- categories filter -->
<div class="categories">
<h2 title="Click on any of the following categories to see related events in the view">Categories</h2>
<p class="f_c filter" title="Click to view events in this category"> <span class="key-dot cinema"></span>Cinema and Theatre </p>
<p class="f_b filter" title="Click to view events in this category"> <span class="key-dot biography"></span>Biography and Personality </p>
<p class="f_w filter" title="Click to view events in this category"> <span class="key-dot writing"></span>Writing and Teaching</p>
<p class="f_ac f_cb f_wb f_cb allfilter" title="Click to view events in this category">
<span class="key-dot biowrit" style="margin-right: -7px;"></span>
<span class="key-dot cinewrit" style="margin-right: -6px;"></span>
<span class="key-dot cinebio" style="margin-right: -7px;"></span>
<span class="key-dot allcat" style="margin-right: 4px;"></span> Multiple
</p>
</div>
<!-- Eisenstein's universe filter -->
<div class="highlights">
<h2 title="Click on the object to see related events in the view">Eisenstein's Universe</h2>
<p class="socrates" style="font-weight: 400;">Socrates</p>
<p class="mei" style="font-weight: 400;">Mei Lanfang</p>
<p class="paul" style="font-weight: 400;">Paul Robeson</p>
<p class="don" style="font-weight: 400;">Don Quixote</p>
<p class="carpet" style="font-weight: 400;">Mexican Carpets</p>
<p class="straw" style="font-weight: 400;">Straw Horseman</p>
<p class="meyerhold" style="font-weight: 400;">Vsevolod Meyerhold</p>
<p class="prokofiev" style="font-weight: 400;">Sergey Prokofiev</p>
</div>
<!-- landing page, tour and sound button on the bottom left -->
<div class="modalbuttons">
<!-- landing page button -->
<div class="landing-page" title="Click to go to the landing page">
<a href="index.html">
<img id="landing-page-button" src="images/landing-page.svg" alt="guide icon" height="40px">
</a>
</div>
<!-- tour button -->
<div class="tour" title="Click to take a tour of the visualization">
<img id="guide-button" src="images/tour.svg" alt="guide icon" height="40px">
</div>
<!-- sound button -->
<div id="legend1" title="Click to turn sound on or off">
<img src="images/sound-off.svg" id="soundbutton" height="40px" style="margin-left:8px; margin-top: 1px">
</div>
</div>
</div>
<!-- right side bar with event and Eisenstein's universe details -->
<div id="sidebar">
<p id="closedhighlightbar" style="display:none">✕</p>
<p id="closedsidebar" style="display:none">✕</p>
</div>
<script type="text/javascript" src="js/spiraltour.js"></script>
</body>
</html>