task solutions

.ipynb_checkpoints/aufgabe2-checkpoint.ipynb

@@ -0,0 +1,64 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "4c5fdd65",
+   "metadata": {},
+   "outputs": [
+    {
+     "ename": "ModuleNotFoundError",
+     "evalue": "No module named 'networkx'",
+     "output_type": "error",
+     "traceback": [
+      "\u001b[31m---------------------------------------------------------------------------\u001b[39m",
+      "\u001b[31mModuleNotFoundError\u001b[39m                       Traceback (most recent call last)",
+      "\u001b[36mCell\u001b[39m\u001b[36m \u001b[39m\u001b[32mIn[4]\u001b[39m\u001b[32m, line 1\u001b[39m\n\u001b[32m----> \u001b[39m\u001b[32m1\u001b[39m \u001b[38;5;28;01mimport\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mnetworkx\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;28;01mas\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mnx\u001b[39;00m\n\u001b[32m      2\u001b[39m \u001b[38;5;28;01mimport\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mmatplotlib\u001b[39;00m\u001b[34;01m.\u001b[39;00m\u001b[34;01mpyplot\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;28;01mas\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mplt\u001b[39;00m\n\u001b[32m      3\u001b[39m \u001b[38;5;28;01mimport\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mnumpy\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[38;5;28;01mas\u001b[39;00m\u001b[38;5;250m \u001b[39m\u001b[34;01mnp\u001b[39;00m\n",
+      "\u001b[31mModuleNotFoundError\u001b[39m: No module named 'networkx'"
+     ]
+    }
+   ],
+   "source": [
+    "import networkx as nx\n",
+    "import matplotlib.pyplot as plt\n",
+    "import numpy as np\n",
+    "import random\n",
+    "import math\n",
+    "\n",
+    "# Konfig für größere Plots\n",
+    "plt.rcParams['figure.figsize'] = (8, 6)\n",
+    "\n",
+    "print(\"Notebook bereit – du kannst loslegen!\")"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a7d01ffa",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.11.0"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

flaskapp/routes.py

@@ -50,6 +50,118 @@ def dashboard():
     return render_template('dashboard.html', title='Page views per day', graphJSON=graphJSON)
 
 
+# explorative data analysis
+from flaskapp.models import UkData
+
+@app.route("/ukdata/preview")
+def ukdata_preview():
+    data = UkData.query.limit(100).all()  # Max. 100 Zeilen
+    df = pd.DataFrame([row.__dict__ for row in data])
+    df = df.drop(columns=["_sa_instance_state"], errors="ignore")
+
+    return render_template("preview.html", tables=[df.to_html(classes='data')], titles=df.columns.values)
+
+# students_voting_behaviour visualiations
+@app.route("/students_voting_behaviour")
+def students_voting_behaviour():
+    data = UkData.query.with_entities(UkData.c11FulltimeStudent, UkData.Turnout19).all()
+    df = pd.DataFrame(data, columns=["students", "turnout"])
+
+    # 👇 Hier: Datentypen sicherstellen
+    df["students"] = pd.to_numeric(df["students"], errors="coerce")
+    df["turnout"] = pd.to_numeric(df["turnout"], errors="coerce")
+
+    # Optional: Fehlende Werte entfernen
+    df = df.dropna()
+
+    fig1 = px.scatter(df, x="students", y="turnout", trendline="ols",
+                      labels={"students": "Percentage of students (%)", "turnout": "Voter turnout (%)"},
+                      title="Voter turnout vs. percentage of students")
+    # layout und Achsen anpassen für bessere Lesbarkeit
+    fig1.update_layout(
+        width=1200,
+        height=500,
+        margin=dict(l=80, r=20, t=60, b=80)
+)
+    fig1.update_xaxes(title_font_size=18, tickfont_size=14)
+    fig1.update_yaxes(title_font_size=18, tickfont_size=14)
+    fig1.update_traces(marker=dict(size=6, opacity=0.7))
+    graph1 = fig1.to_html(full_html=False)
+
+    return render_template("students_voting_behaviour.html", graph=graph1)
+
+
+@app.route("/turnout_map")
+def turnout_map():
+    import os
+    from flask import current_app, render_template
+    import json
+    import pandas as pd
+    import plotly.express as px
+    from flaskapp.models import UkData
+
+    # GeoJSON-Datei laden
+    geojson_path = os.path.join(current_app.root_path, "static", "geo", "uk_constituencies.json")
+    with open(geojson_path, encoding="utf-8") as f:
+        geojson = json.load(f)
+
+    # Daten abrufen
+    data = UkData.query.all()
+    df = pd.DataFrame([row.__dict__ for row in data]).drop(columns=["_sa_instance_state"], errors="ignore")
+
+    # Karte erzeugen
+    fig = px.choropleth(
+        df,
+        geojson=geojson,
+        featureidkey="properties.PCON13CD",
+        locations="id",
+        color="Turnout19",
+        hover_name="constituency_name",
+        hover_data={"Turnout19":":.1f"},
+        color_continuous_scale="Viridis",
+        labels={"Turnout19": "Voter turnout (%)"},
+        title="Voter turnout by constituency (UK, 2019)"
+    )
+
+    # Karte so skalieren, dass sie 82% Breite einnimmt
+    fig.update_geos(
+        fitbounds="locations",
+        visible=False,
+        domain=dict(x=[0.0, 0.82], y=[0.0, 1.0])
+    )
+
+    # Layout-Grundkonfiguration
+    fig.update_layout(
+        width=1200,
+        height=800,
+        margin={"l":0, "r":0, "t":60, "b":0},
+        title=dict(font=dict(size=24), x=0.41, xanchor="center"),
+        font=dict(size=14),
+        # Position der Farbleiste näher an die Karte
+        coloraxis_colorbar_x=0.85
+    )
+
+    # Colorbar konfigurieren
+    fig.update_coloraxes(
+        colorbar_title_text="Voter Turnout (%)",
+        colorbar_title_font_size=16,
+        colorbar_tickfont_size=12,
+        colorbar_thickness=20,
+        colorbar_len=0.8
+    )
+
+    # Hover-Labels etwas größer
+    fig.update_traces(
+        hoverlabel=dict(font_size=14)
+    )
+
+    # Render-String erzeugen
+    graph = fig.to_html(full_html=False)
+    return render_template("map.html", graph=graph)
+
+
+
+
 @app.before_request
 def before_request_func():
     day_id = datetime.date.today()  # get our day_id
@@ -71,3 +183,5 @@ def before_request_func():
         db.session.add(ip_view)  # insert into the ip_view table
 
     db.session.commit()  # commit all the changes to the database
+
+

flaskapp/static/main.css

@@ -22,7 +22,7 @@ body {
 
 /* Header styles */
 header {
-  background-color: #333;
+  background-color: red;
   color: #fff;
   padding: 10px 0;
 }
@@ -85,3 +85,26 @@ header {
 .article-content {
   color: #555;
 }
+
+/* Map & Legend Layout */
+.map-legend-wrapper {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 1rem;
+  width: 80%;
+  margin: 20px auto;
+}
+
+.map-legend-wrapper .map {
+  flex: 1;
+  /* Ensure map fills available space */
+  min-width: 0;
+}
+
+.map-legend-wrapper .legend {
+  flex: 0 0 200px;
+  /* Adjust width as needed */
+  max-width: 25%;
+}
+

flaskapp/templates/about.html

@@ -1,5 +1,5 @@
 {% extends "layout.html" %}
 {% block content %}
     <h1>{{ title }}</h1>
-    <p>This is where I'll write something about myself.</p>
+    <p>Nichts ist fertig, alles ist in Bewegung.</p>
 {% endblock %}

flaskapp/templates/layout.html

@@ -8,14 +8,16 @@
 <body>
 <header>
     <div id="container">
-        <h1 class="logo">My web app</h1>
+        <h1 class="logo">Dutschke Movement</h1>
         <strong>
             <nav>
                 <ul class="menu">
                     <li><a href="{{ url_for('home') }}">Home</a></li>
                     <li><a href="{{ url_for('about') }}">About</a></li>
                     <li><a href="{{ url_for('new_post') }}">New post</a></li>
                     <li><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
+                    <li><a href="{{ url_for('students_voting_behaviour') }}">Voting Behaviour</a></li>
+                    <li><a href="{{ url_for('turnout_map') }}">Turnout Map</a></li>
                 </ul>
             </nav>
         </strong>

flaskapp/templates/map.html

@@ -0,0 +1,7 @@
+{% extends "layout.html" %}
+{% block content %}
+    <h1>{{ title }}</h1>
+    <h1>Turnout Map</h1>
+
+    {{ graph | safe }}    
+{% endblock %}

flaskapp/templates/preview.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+    <title>UK Data Vorschau</title>
+    <style>
+        .data { border-collapse: collapse; width: 100%; }
+        .data td, .data th { border: 1px solid #ddd; padding: 8px; }
+    </style>
+</head>
+<body>
+    <h1>UK Data – Preview</h1>
+    {% for table in tables %}
+        {{ table|safe }}
+    {% endfor %}
+</body>
+</html>

flaskapp/templates/students_voting_behaviour.html

@@ -0,0 +1,9 @@
+
+{% extends "layout.html" %}
+{% block content %}
+    <h1>{{ title }}</h1>
+    <h1>Voting behaviour</h1>
+
+    <h2>Students</h2>
+    {{ graph | safe }}    
+{% endblock %}

instance/config.py

@@ -0,0 +1,3 @@
+SECRET_KEY = 'supersecretkey'
+SQLALCHEMY_DATABASE_URI = 'sqlite:///site.db'
+SQLALCHEMY_TRACK_MODIFICATIONS = False

run.py

@@ -2,3 +2,4 @@
 
 if __name__ == '__main__':
     app.run(debug=True, port=5005)
+