kollisionen/timelines.html at main · uclab-potsdam/kollisionen · GitHub

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
<html lang="en">

<head>
  <!-- Primary Meta Tags -->
  <title>Timelines Visualization - Eisenstein's House</title>
  <meta name="title" content="Timelines Visualization of Eisenstein's House">
  <meta name="description" content="Data vizualisation of Sergei M. Eisenstein's life and legacy through list of timelines.">
  <meta name="keywords" content="data visualization, 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="Eisenstein's House - Timelines Visualization">
  <meta property="og:description" content="Timelines visualization 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="Eisenstein's House - Timelines Visualization">
  <meta property="twitter:description" content="Timelines visualization 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" 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>
  <!-- tone.js -->
  <script src="assets/Tone.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/popup.css" />

  <style>
    #chart {
      position: absolute;
      width: calc(100% - 150px);
      margin-left: 150px;
      margin-top: 10px;
    }

  </style>
</head>

<body>
  <!-- top panel with three views -->
  <div class="toppanelt">
    <div class="spiralviz" title="Click to see Spiral view"> <a href="spiral.html">
        <h2>Spiral</h2>
      </a></div>
    <div class="timelinesviz">
      <h2><strong>Timelines</strong></h2>
    </div>
    <div class="networkviz" title="Click to see Network view"> <a href="network.html">
        <h2>Network</h2>
      </a>
    </div>

    <!-- sorting options on the top of the view  -->
    <div class="sorting">
      <p style="margin: 19px;">Sort by</p>

      <div style="margin: 15px;">
        <p>
          <input type="radio" name="sorting" id="temporal" value="temporal" checked>
          <label for="temporal">Date</label>
        </p>
      </div>

      <div style="margin: 15px;">
        <p>
          <input type="radio" name="sorting" id="frequency" value="frequency">
          <label for="frequency">Frequency</label>
        </p>
      </div>
    </div>
    <div id="yearlabel"> </div>
  </div>

  <!-- the viz -->
  <div id="chart" style="top: 60px;">
    <script type="text/javascript" src="js/timelines.js"></script>
    <script type="text/javascript" src="js/sound.js"></script>
  </div>

  <!-- left panel with filters, search and button -->
  <div id="left-panel">
    <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 any of the following objects 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>

    <!-- entities filters  -->
    <div class="entities">
      <h2 title="Click on any of the following entities to see their associated events in the view">Entities</h2>
      <p class="triangle" type="people" title="Click to view events associated with this entity"><img src="images/entities_icons/triangle.svg" height="12px" width="12px">People</p>
      <p class="diamond" type="places" title="Click to view events associated with this entity"><img src="images/entities_icons/diamond.svg" height="12px" width="12px">Places</p>
      <p class="threeprong" type="works" title="Click to view events associated with this entity"><img src="images/entities_icons/threeprong.svg" height="12px" width="12px">Works</p>
      <p class="square" type="artistic" title="Click to view events associated with this entity"><img src="images/entities_icons/square.svg" height="12px" width="12px">Concepts</p>
      <p class="plus" type="additional" title="Click to view events associated with this entity"><img src="images/entities_icons/plus.svg" height="12px" width="12px">Misc.</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="closedsidebar" style="display:none">✕</p>
  </div>
  <p id="closedhighlightbar" style="display:none">✕</p>

  <script type="text/javascript" src="js/timelinestour.js"></script>
</body>

</html>