kollisionen/index.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
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Primary Meta Tags -->
  <title>Eisenstein's House</title>
  <meta name="title" content="Landing page of Eisenstein's House">
  <meta name="description" content="Data vizualisation of Sergei M. Eisenstein's life and legacy.">
  <meta name="keywords" content="data visualization,, spiral view, network 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 - Landing page">
  <meta property="og:description" content="Data 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 - Landing page">
  <meta property="twitter:description" content="Landing page representing life of Sergei M. Eisenstein.">
  <meta property="twitter:image" content="https://uclab-potsdam.github.io/kollisionen/images/K_logo_cover.png">

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link rel="stylesheet" href="css/landing_page.css" />
</head>
<body>
    <div class="content">
        <div id="logo">
                <img src="images/K_logo.svg" alt="Kollisionen logo" height="250px">
            </a>
        </div>

        <div id="text">
            <p>This visualization is part of research project Eisenstein's House (previously called KOLLISIONEN)
                 at Fachhochschule Potsdam and Filmuniversität Babelsberg. It aims to enable exploration of the intellectual cosmos of Sergei Eisenstein
                through diverse forms of media of Virtual Reality (VR), Information Visualization (InfoVis) and 3D-Sound.
            </p>
            <p>Considering the all encompassing contributions of Eisenstein to the world of cinema and theatre,
                this information visualization experience displays his contributions through three visualizations: Spiral, Network and Timelines.
                Each of these three visualizations display dimensions of Eisenstein's life with different aspects as the primary focus.
                The aim of these three information visualizations is to make the underlying data accessible,
                comprehensible and experiential for a broad audience ranging from experts to casual.
                The exploration is further explicated by shared design patterns common across information visualization, 3D-Sound and 3D/VR.
            </p>
            <h2 style="text-align:center; margin-bottom: 0px;">Explore Eisenstein's Life!</h2>
        </div>

        <div id="three_viz">
        <table style="margin-top:0px">
            <tr>

                <th>
                    <a href="spiral.html">
                        <img src="images/three_viz/spiral.png" alt="Kollisionen logo" height="80px">
                        <p style="text-align: center;">Spiral</p>
                    </a>
                </th>
                <th style="text-align: left;">
                    <p style="font-weight:400; padding-left: 10px;vertical-align: baseline;">The Spiral is a temporal representation of Eisenstein's personal and artistic endeavours.
                        It spans from his birth in 1898 until his demise in 1948, and how the legacy he left has continued until today.
                        The shape of this visualization was inspired by Eisenstein’s film theory of a spherical book.</p>
                </th>
              </tr>
              <tr>
                <th>
                    <a href="timelines.html">
                        <img src="images/three_viz/timelines.png" alt="Kollisionen logo" height="80px">
                        <p style="text-align: center;">Timelines</p>
                    </a>
                </th>
                <th style="text-align: left;">
                    <p style="font-weight:400; padding-left: 10px; vertical-align: top;">This visualization displays how different people, places, concepts, works, and other aspects of Eisenstein's life occurred and recurred throughout his life.
                        It displays linear timelines of each of these entities. Each row shows the timeline for a particular entity..</p>
                </th>
              </tr>
              <tr>
                <th>
                    <a href="network.html">
                        <img src="images/three_viz/network.png" alt="Kollisionen logo" height="80px">
                        <p style="text-align: center;">Network</p>
                    </a>
                </th>
                <th style="text-align: left;">
                    <p style="font-weight:400; padding-left: 10px;">Eisenstein contributed to the world of film and theatre through his cinematic masterpieces and through his artistic ideas.
                        During his life, he travelled the world and connected with several notable people in personal and professional capacity.
                        The network view reveals these connections between the people, places, works, and concepts in Eisensten’s life.
                        Each of the symbols used in the network and timelines represents a certain type of entity.</p>
                </th>
              </tr>
        </table>
        </div>

        <div id="info">
            <p><b>Data Source: </b>The data used for this visualization is primarily from the book <span style="text-decoration: underline;">Sergej M. Eisenstein - Materialien zu Leben und Werk by Werner Sudendorf (1975)</span>.
                It is further explicated by gathering information and through consultation with film heritage experts Naum Kleiman and Vera Rumyantseva Kleiman.</p>
            <p><b>Source Code: </b>This visualization is built with D3.js and Tone.js. The source code and more information can be found <a href="https://github.com/uclab-potsdam/kollisionen">on GitHub</a>.</p>
        </div>
    </div>
</body>
</html>