ProTransparenz
/
lobbywatch


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Politische Spenden Visualisierung</title>
    <script src="https://unpkg.com/neovis.js@2.0.2"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        .range-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 10px;
            border-radius: 5px;
            background: #d3d3d3;
            outline: none;
        }

        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }

        .multi-select {
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- Explainer -->
    <div id="explainer" class="fixed inset-0 bg-white z-50 transform transition-transform duration-300 ease-in-out">
        <div class="max-w-4xl mx-auto p-8">
            <h1 class="text-3xl font-bold mb-6">Willkommen zur Parteispenden-Visualisierung</h1>
            
            <div class="space-y-6">
                <section>
                    <h2 class="text-2xl font-semibold mb-3">Was ist Lobbyismus?</h2>
                    <p class="text-gray-700">Die Anzahl der Lobbyisten in Berlin ist unbekannt. Schätzungen gehen von etwa 5.000 aus. Allein auf der Verbändeliste des Deutschen Bundestages sind 2300 Verbände registriert, die regelmäßig zu Anhörungen eingeladen werden. Sie beinhaltet die verschiedenen Branchenverbände wie den Verband der Chemischen Industrie VCI oder den Verband der Automobilindustrie VDA, die Spitzenverbände der Wirtschaft wie den Bundesverband der Deutschen Industrie BDI oder den Zentralverband des Deutschen Handwerks ZDH, Gewerkschaften wie die IG Metall oder Nichtregierungsorganisationen wie z.B. auch LobbyControl.</p>
                </section>

                <section>
                    <h2 class="text-2xl font-semibold mb-3">Warum diese Visualisierung?</h2>
                    <p class="text-gray-700">Diese Seite existiert, um Wählern bei ihrer Entscheidungsfindung zu helfen. Politische Parteien machen vor Wahlen oft viele Versprechen, die sie nicht immer einhalten. Durch die Visualisierung von Parteispenden wird transparent, welche Interessengruppen welche Parteien finanziell unterstützen.</p>
                </section>

                <section>
                    <h2 class="text-2xl font-semibold mb-3">Was wird gezeigt?</h2>
                    <p class="text-gray-700">Die Visualisierung zeigt Verbindungen zwischen Spendern und politischen Parteien. Die Größe der Kreise und die Dicke der Verbindungslinien repräsentieren die Höhe der Spenden. Alle Daten stammen aus dem  <a class="font-bold" href="https://lobbypedia.de/wiki/Parteispenden-Datenbank">Parteispenden-Datenbank von lobbypedia.de</a></p>
                </section>

                <button onclick="closeExplainer()" class="mt-8 bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">
                    Verstanden
                </button>
                <!-- TODO add Tutorial -->
                <!--  <button onclick="startTutorial()" class="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700"> -->
                <!--     Tutorial starten -->
                <!-- </button> -->

            </div>
        </div>
    </div>


    <!-- Sidebar Toggle Button -->
    <button id="toggleSidebar" class="fixed top-4 left-4 z-50 bg-white p-2 rounded-lg shadow-lg">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7"/>
        </svg>
    </button>

    <!-- Sidebar -->
    <div id="sidebar" 
         x-data 
         class="fixed left-0 top-0 w-80 h-full bg-white shadow-lg transform transition-transform duration-300 ease-in-out z-40 overflow-y-auto">
        <div class="p-6">
            <h2 class="text-xl font-semibold mb-6">Filter</h2>
            
            <!-- Party Selection -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Parteien</label>
                <select id="partySelect" x-model="$store.filter.parties" 
                        multiple 
                        class="multi-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <!-- Populated dynamically -->
                </select>
            </div>

            <!-- Zeitraum Info -->
            <div id="zeitraum-info" class="hidden fixed bg-white p-4 rounded-lg shadow-lg w-64">
              <div class="flex justify-between items-center mb-2">
                <h3 class="font-semibold">Info</h3>
                <button class="text-gray-500 hover:text-gray-700" onclick="toggleZeitraumInfo()">
                  ×
                </button>
              </div> 
              <p>Spenden 2010-2023: Lobbypedia, später: eigene Recherche</p>
            </div>
    
            <!-- Year Range -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Zeitraum
                  <button class="ml-1 text-gray-500 hover:text-gray-700" onclick="toggleZeitraumInfo()">
                          ⓘ
                 </button>
                </label>
                <div class="flex items-center space-x-2">
                    <input type="number" 
                           x-model="$store.filter.yearRange[0]"
                           min="2010" 
                           max="2025"
                           @change="$store.filter.updateYearRange($event.target.value, $store.filter.yearRange[1])"
                           class="w-24 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <span>bis</span>
                    <input type="number"
                           x-model="$store.filter.yearRange[1]"
                           min="2010"
                           max="2025"
                           @change="$store.filter.updateYearRange($store.filter.yearRange[0], $event.target.value)"
                           class="w-24 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                </div>
            </div>
    
            <!-- Donor Type -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Spendertyp</label>
                <div class="flex rounded-md shadow-sm">
                    <button @click="$store.filter.setDonorType('all')"
                            :class="{'bg-blue-500 text-white': $store.filter.donorType === 'all', 'bg-gray-200': $store.filter.donorType !== 'all'}"
                            class="flex-1 px-4 py-2 rounded-l">Alle</button>
                    <button @click="$store.filter.setDonorType('person')"
                            :class="{'bg-blue-500 text-white': $store.filter.donorType === 'person', 'bg-gray-200': $store.filter.donorType !== 'person'}"
                            class="flex-1 px-4 py-2">Privat</button>
                    <button @click="$store.filter.setDonorType('entity')"
                            :class="{'bg-blue-500 text-white': $store.filter.donorType === 'entity', 'bg-gray-200': $store.filter.donorType !== 'entity'}"
                            class="flex-1 px-4 py-2 rounded-r">Juristisch</button>
                </div>
            </div>
    
            <!-- Donor Names -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Geldgeber</label>
                <div class="space-y-2">
                    <template x-for="(donor, index) in $store.filter.donors" :key="index">
                        <div class="flex gap-2">
                            <input type="text" 
                                   x-model="$store.filter.donors[index]"
                                   class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <button @click="$store.filter.removeDonorField(index)"
                                    class="text-red-600 hover:text-red-800"
                                    x-show="$store.filter.donors.length > 1">
                                ×
                            </button>
                        </div>
                    </template>
                </div>
                <button @click="$store.filter.addDonorField()"
                        class="mt-2 text-blue-600 hover:text-blue-800">
                    + Weiteren Geldgeber hinzufügen
                </button>
            </div>
    
            <!-- Strict Mode -->
            <div class="mb-6">
                <label class="flex items-center">
                    <input type="checkbox" 
                           x-model="$store.filter.strict"
                           class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <span class="ml-2 text-sm text-gray-700">Strenge Suche (UND-Verknüpfung)</span>
                </label>
            </div>
    
            <!-- Donation Limit -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Anzahl der Spenden</label>
                <input type="range" 
                       x-model="$store.filter.limit"
                       min="1" 
                       max="1000" 
                       step="5"
                       class="range-slider w-full">
                <div class="text-sm text-gray-500 mt-1" x-text="$store.filter.limit + ' Spenden'"></div>
            </div>
    
            <button onclick="toggleExplainer()" class="mt-4 text-blue-600 hover:text-blue-800">
                Hilfe anzeigen
            </button>
    
    
        </div>
    </div>

    <!-- Tutorial Dialog -->
    <div id="tutorialDialog" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50">
        <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-xl max-w-md w-full">
            <h3 id="tutorialTitle" class="text-xl font-bold mb-4"></h3>
            <p id="tutorialDescription" class="text-gray-700 mb-6"></p>
            <div class="flex justify-between">
                <button onclick="previousTutorialStep()" class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300">
                    Zurück
                </button>
                <button onclick="nextTutorialStep()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                    Weiter
                </button>
            </div>
        </div>
    </div>

    <!-- Visualization Area -->
    <div class="flex-1 relative">
        <div id="viz" class="w-full h-screen"></div>

        <!-- Legend -->
        <div id="legend" class="hidden fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg">
            <h3 class="font-semibold mb-2">Legende</h3>
            <div class="space-y-2">
                <div class="flex items-center">
                    <div class="w-4 h-4 rounded-full bg-orange-500 mr-2"></div>
                    <span>Politische Parteien</span>
                </div>
                <div class="flex items-center">
                    <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div>
                    <span>Privatpersonen</span>
                </div>
                <div class="flex items-center">
                    <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
                    <span>Juristische Personen</span>
                </div>
            </div>
        </div>

        <!-- Legend Toggle Button -->
        <button onclick="toggleLegend()" class="fixed bottom-4 right-4 p-2 rounded-full shadow-lg">
          ⓘ
        </button>
    </div>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>