1. Download and install a local web server on your laptop, for example XAMPP

2. Go to the following link and download the zip-folder to your harddrive.

3. Extract the zip-folder into your webserver’s root directory (on XAMPP this is called “htdocs”) so that you have a file structure like …\htdocs\Three_js_layer_workshop\index.html

4. Start your webserver (On XAMPP open the control panel and click “Start” in the first row besides where it says Apache).

5. When the server is running, you can access the site by entering the following url into your browser: localhost/Three_js_Layer_Workshop

If everything works, you should see an empty black map with its center over Scotland.

The idea of the workshop is to create a sample visualization with three.js Layer, which should make visible the  a dataset from the addressing history api. The dataset (comes with the zip-folder) acommodates 10.000 geo referenced historic adresses from the Scottish Post Office Directories.

The world-famous Bayreuth Theatre Festival has been a key institution in the history of late 19th century opera and theatre since its foundation in 1876. As a network that fundamentally relies on processes of international circulation, the construction of a specific transnational public sphere (Fraser 2005), and a web of worldwide operating institutions (Vazsonyi 2010), it negotiates personal ties, as well as economic, ideological, and artistic capital. In the period between 1876 and 1914, the city of Bayreuth, its purpose-built festival theatre, and the Wagner family’s home Villa Wahnfried continuously functioned as the focal points of this socio-artistic movement, before the caesura of World War I.

We are going to present a first version of two different visualizations of the so-called “Fremdenlisten” (roughly, “visitors’ lists”) which were published during the Bayreuth Festivals before 1914 as leaflets and sold to the festival guests. (RWA A 2500ff) These leaflets contain the names, origin, profession, and accommodation addresses in Bayreuth of the national and international audience members. They are organized according to their arrival date and were compiled from the official records of the city of Bayreuth, which demanded registration for all tourists in the city. We limit ourselves to the lists of 1876, the first instalment of the Bayreuth Festival, but the project’s database could easily expanded through later volumes of the lists available for all 21 Bayreuth Festivals until World War I.

From these lists, the composition, origin, and social rank of the festival guests can be reconstructed. For us, the visualization serves two purposes: First, it is an alternate way of browsing the Fremdenlisten, giving easier access to the material in the database. Most importantly, it provides a contextualized overview on the datasets showing the diverse origins of national visitor groups. Second, it creates a Wagnerian topography of the city of Bayreuth during the festival weeks, allowing users to get an impression of the huge influx of various nationalities into the city. Of course, this also accounts for the cosmopolitan composition of the Wagnerians of the time, probably the most important artistic movement around the turn of the centuries.

In order to trace the global distribution of the visitors of the Bayreuth Festival of 1876, our first visualization (see Bayreuth Worldwide) takes the perspective of an ego-network showing the frequency of individual movements between the city of Bayreuth as the center, and the various places of origin of the individual festival guests. The second map ( see Bayreuth Overlay) is a zoomed view on the city, which features a historic map overlay and locates the different festival accommodations from renowned hotels to private rooms. Both views are interactive visualizations, which allow the user to slide through each day of the observed timespan as well as to receive detailed information by clicking the nodes. It is possible to show the list of guests for each relevant Bayreuth address. These visualizations were created with a WebGL library for the Google-Maps-Api, called Three.js Layer. Three.js Layer is a freely available javascript library which allows to render WebGL-content via an HTML-5 canvas as an overlay over the Google-Maps-Api.

Through these visualizations, however, we hope to develop further research questions that combine global and local perspectives and lead to new approaches to our source material.

Abstract – Material – Ideas Toegl Englmeier

Further Material

The visualization tools presented are a side project from Gero Toegl’s dissertation on The Bayreuth Festival 1876-1914. For the methodological context see:

Tögl, Gero (2013): “Global/Local – Wagner/Bayreuth”. Panel Re-Routing Wagner. International Federation for Theatre Research (IFTR) Annual Conference, Barcelona, Spanien, 25. 07. 2013. [enclosed]

The dissertation and the visualization are part of the DFG funded Global Theatre Histories and the LMUexcellent project Theatrescapes at LMU (PIs: Prof. Dr. Christopher Balme, Dr. Nic Leonhardt).

IFTR 2013 Toegl – formatted

Custom Session

Before any visualization can be set up, databases containing consistent and machine readable data need to be created. However, in the Humanities, digital availability of data is often a problem. At this session, we will be asking whether  there ways to speed up the process of digitization of data for example by using new OCR-tools or even OCR of Maps (e.g. NYPL Map Vectorizer)? What are the possible solutions for this problem? What experiences in collecting/ generating data have been made by colleagues working on similar Digital Humanities projects? What APIs did they use?

Skills and Maker session

Since our visualizations were solely created with the WebGL library for the Google-Maps-Api, Three.js Layer, we gained some experience with this new and powerful technology. Therefore, we will give a short introduction into the technical aspects and requirements needed. One of the main benefits of this approach is its performance, literally allowing the rendering of tens of thousands of objects on the map. In order to illustrate this, live-demonstrations of our visualization of the “Bayreuther Festspiele-Fremdenlisten 1876″ could be shown (see also Bayreuth_Worldmap.png, Bayreuth_Overlay.jpg). Tobias is going to  offer a step-by-step maker-session for creating an exemplary visualization with Three.js Layer. This session is designed as a practical extension of the skills talk for which participants should have basic programming skills in Javascript.

Maps For Discussion: