-
Notifications
You must be signed in to change notification settings - Fork 0
/
vieztrends.html
209 lines (192 loc) · 15 KB
/
vieztrends.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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="ViezTrends - Die Suchtrends zu Viez, dargestellt in einer Karte, und die Google Trends, dargestellt in einem Lineplot." />
<meta name="author" content="Digital Humanities Universitaet Trier" />
<title>Digital Viez - die Suchtrends und Google Trends</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/img/icons/faviconOrange/original-orange.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/icons/faviconOrange/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/icons/faviconOrange/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/icons/faviconOrange/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Bootstrap Icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<!-- SimpleLightbox plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-1" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html"><img src="assets/img/icons/logo-white-Variante2.png" width="180" height="50" id="logo" alt="..." /></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link" href="karte.html">ViezKarte</a></li>
<li class="nav-item"><a class="nav-link" href="museum.html">ViezMuseum</a></li>
<li class="nav-item"><a class="nav-link" href="sprache.html">ViezSprache</a></li>
<li class="nav-item dropdown">
<a class="nav-link" href="viezfaeltigkeit.html" aria-expanded="false">ViezFältigkeit</a>
<ul class="dropdown-menu" aria-labelledby="dropdown">
<li><a class="dropdown-item" href="stories.html">ViezStories</a></li>
<li><a class="dropdown-item" href="https://viezbot.herokuapp.com/" target="blank">ViezBot</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="projekt.html" aria-expanded="false">Was ist Digital Viez?</a>
<ul class="dropdown-menu" aria-labelledby="dropdown">
<li><a class="dropdown-item" href="projekt.html">Das Projekt</a></li>
<li><a class="dropdown-item" href="projekt.html#ueberuns">Das Team</a></li>
<li><a class="dropdown-item" href="projekt.html#dhmethoden">Digital Humanities Methoden</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<button type="button" class="btn btn-totop" id="btn-back-to-top"><i class="bi bi-arrow-up fs-0" style="color:white;"></i></button>
<!-- Header -->
<section class="page-section bg-primary">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-lg-8 text-center">
<br>
<br>
<br>
<h2 class="text-white mt-0">ViezTrends</h2>
<hr class="divider divider-light" />
</div>
</div>
</div>
</section>
<br>
<div class="container desktop-width" >
<a class="text-font btn btn-primary" href="sprache.html"> <i class="bi bi-arrow-left-circle-fill"></i> ViezSprache</a>
<div class="mobile">
<br>
<br>
<div class="card text-white bg-primary mb-3" style="max-width: 14rem;" margin-top: 25px;>
<ul class="list-group list-group-flush">
<div class="list-group-item text-font text-primary" style="font-size: 0.85rem;"><b><i class="bi bi-info-circle"></i><br>Die Grafiken dieser Seite sind leider nicht für die mobile Ansicht geeignet.</b></div>
</ul>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="container desktop-width">
<div>
<h3> Suchtrends </h3>
<hr style="height:5px;border-width:0;color:#f4623a;background-color:#f4623a; opacity:1;width: 15%;">
</div>
</div>
<br>
<!-- Kartenvisualisierung -->
<section>
<div class="container desktop-width">
<div class="row">
<p class="text-font">
Wo befinden sich eigentlich die Menschen, die sich für Viez interessieren? In unserem digitalen Zeitalter ist diese Frage anschaulich anhand von Googles Suchtrends zu beantworten, die ihre für Werbezwecke gesammelten Daten teilweise der Öffentlichkeit zur Verfügung stellen. Die auf dieser Seite sichtbare Karte zeigt das Interesse an Viez in allen deutschen Bundesländern und Luxemburg der letzten 20 Jahre auf einer Skala von 1 bis 100. Zu beachten ist, dass die von Google bereitgestellten Daten nicht den absoluten Suchanfragen in dem gewählten Zeitraum entsprechen, sondern das relative Suchvolumen über diesen repräsentieren, welches das Interesse an einem Suchbegriff verdeutlichen soll.
</p>
</div>
<div class="row">
<div class="col-md-3 gx-5 mb-4">
<br>
<br>
<br>
<div class="card text-white bg-primary mb-3" style="max-width: 13rem;" margin-top: 25px;>
<ul class="list-group list-group-flush">
<div class="list-group-item text-font text-primary" style="font-size: relative;"><b>Was darf es sein?</b></div>
<select id="selectMenu" class="text-font btn" onchange = "displayGraph()">
<option value="0">Viez</option>
<option value="1">Apfelwein</option>
<option value="2">Cider</option>
<option value="3">Äppelwoi</option>
</select>
</ul>
</div>
</div>
<div class="col-md-9 gx-5 mb-4">
<p class="text-font">
Um die Anfragehäufigkeit zum Thema Viez etwas anschaulicher darzustellen wurden vier Schlagworte als Vergleichswerte gewählt, die die geographische und historische Verbreitung von Viez kontextualisieren sollen. Apfelwein und Cider sind im Standarddeutschen gebräuchliche Begriffe, die überregional in Verwendung sind, was sich auch in den konstant höheren Interessenswerten widerspiegelt. Äppelwoi dagegen ist ein mundartlicher Begriff, der folglich – ähnlich wie Viez – in seiner Verbreitung geographisch eingeschränkt ist. Zu beobachten ist, dass sich das Interesse an Äppelwoi und Apfelwein in Hessen konzentriert. Wie man an der Karte erkennen kann, ist das Interesse an Viez aber durchaus nicht nur auf Regionen mit historisch moselfränkisch geprägtem Hintergrund beschränkt, sondern auch in einigen anderen Bundesländern präsent. Auffällig ist hier etwa das vergleichsweise große Interesse in Sachsen oder Bayern, wo keine sprachliche Verbindung zu Viez besteht.
</p>
</div>
</div>
</div>
</section>
<!--Map Output-->
<section>
<div class="container">
<br>
<div style="display: flex; justify-content: center;">
<iframe src="vieztrends/figV.html" id="map" width= "1200"; height= "1000"; border: 0px;></iframe>
</div>
<!-- JavaScript File -->
<script src="js/graphs.js"></script>
</div>
</section>
<div class="bg-light">
<div class="container desktop-width">
<p class="text-font">
<br>
Die auf dieser Seite sichtbaren Visualisierungen wurden mit den Python-Bibliotheken PyTrends und Plotly erstellt. Mit PyTrends kann in einem Schritt auf große Mengen an Google Trends-Daten nach eigens definierten Parametern zugegriffen werden. Für dieses Projekt wurde ein Datensatz aus den historisch verfügbaren Daten – bei Google Trends bedeutet das ab dem Jahr 2004 – aller deutschen Bundesländer sowie Luxemburg für jeden der gewählten Suchterme bis Oktober 2021 erstellt. Der Endpunkt stimmt mit dem Projektstart überein, um die Resultate nicht durch Recherchearbeiten unseres Teams zu verzerren.
<br>
Google Trends selbst bietet zwar den Vergleich mehrerer Suchterme an, deren Trendindex wird allerdings in Relation zueinander berechnet. Das kann zur Folge haben, dass weniger beliebte Suchterme (wie Viez oder Äppelwoi) im direkten Vergleich zu frequenteren Termen wie Apfelwein oder Cider untergehen und keine aussagekräftigen Ergebnisse resultieren.
<br>
Der Einsatz von PyTrends erlaubt es, in einem Schritt die korrekten Daten jeder einzelnen Region im Laufe der Zeit in maschinenlesbarer Form zu erhalten und für die Weiterverarbeitung zu formatieren. Zugunsten der Visualisierung wurden die in monatlichen Abständen vorliegenden Datenpunkte in jährliche Abschnitte zusammengefasst, wobei der jeweils höchste Wert innerhalb dieser Zeitspanne gewählt wurde.
<br>
Zu beachten ist auch, dass semantische Unterschiede bei den Suchtermen in diesen Daten nicht berücksichtigt werden. So erklärt sich auch das hohe Interesse in Mecklenburg-Vorpommern, wo es Ortsnamen wie „Viez“ oder „Viezen“ gibt, die allerdings nichts mit dem Getränk zu tun haben.
<br>
Die geographische Verteilung der Suchanfragen wurde mittels Plotly Express Choropleth Mapbox umgesetzt, das bei korrekt aufbereiteten Daten auch animierte Darstellungen ermöglicht. Mit dieser Funktionalität wurde auch der zeitbasierte Slider erstellt, der die Daten zeitlich gruppiert darstellt.
</p>
</div>
<br>
</div>
<br>
<div class="container desktop-width">
<br>
<div>
<h3> Der etwas andere Blick auf die Daten - das Liniendiagramm </h3>
<hr style="height:5px;border-width:0;color:#f4623a;background-color:#f4623a; opacity:1;width: 15%;">
</div>
<p class="text-font">
<br>
Wem der Jahresüberblick in der Kartenvisualisierung noch nicht reicht, der kann sich das konkrete monatliche Interesse je Bundesland in diesem, mittels Plotly Express umgesetzten, Liniendiagramm genauer ansehen. Für jede einzelne Region bekommt man den direkten Vergleich zwischen den einzelnen Suchworten. Anders als in der Kartenansicht sind hier nicht alle Bundesländer vertreten, sondern nur diejenigen, deren Datenlage bei allen vier Schlagworten ausreichend ist. Liegt das Interesse an einem Suchbegriff in einer Region unter einem bestimmten Schwellenwert, sind keine differenzierten Daten verfügbar. Als Heimatbundesland von Viez ist es nicht überraschend, dass in Rheinland-Pfalz auch konsistent am meisten nach Viez gesucht wird. Die Höhepunkte der Suchanfragen sind meist entweder im Hochsommer oder den Herbstmonaten September und Oktober, der Saison für die Viezherstellung, angesiedelt. An der verstärkten Nachfrage während des Sommers hat wohl das alle zwei Jahre stattfindende Viezfest in Trier maßgeblichen Anteil.
<br>
Interessiert man sich näher für einen konkreten Zeitpunkt, kann man mit der Maus über die jeweilige Linie fahren, um die genauen Daten zu sehen.
</p>
</div>
<!-- lineTrends -->
<section>
<div class="container">
<br>
<div style="display: flex; justify-content: center;">
<iframe src="vieztrends/lineTrends.html" height="600" width="100%"></iframe>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container px-4 px-lg-5"><div class="text-center text-muted text-footer"><a href="projekt.html#impressum">Impressum</a></div></div>
<div class="container px-4 px-lg-5"><div class="text-center text-muted text-footer"> <a href="datenschutz.html">Datenschutzerklärung</a></div></div>
<div class="container px-4 px-lg-5"><div class="text-center text-muted text-footer">© 2022 - Digital Humanities - <a href="https://www.uni-trier.de/universitaet/fachbereiche-faecher/fachbereich-ii/faecher/computerlinguistik-und-digital-humanities/digital-humanities" target="blank">Universität Trier</a></div></div>
<div class="py-6"></div>
<div class="container px-4 px-lg-5"><div class="text-center text-muted text-footer"> <i class="bi bi-info-circle"></i> Der Verzehr von Viez ist aufgrund des Alkoholgehalts erst ab 16 Jahren gestattet. </div></div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- SimpleLightbox plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>