diff --git a/data_visualization/js/app.js b/data_visualization/js/app.js
new file mode 100644
index 0000000..644d8da
--- /dev/null
+++ b/data_visualization/js/app.js
@@ -0,0 +1,55 @@
+import { fetchRunData } from './api.js';
+import { renderVisualization, updateFilters } from './visualization.js';
+
+/**
+ * Bindet Benutzeroberflächenereignisse an Event-Handler.
+ * @function bindUIEvents
+ * @returns {void}
+ */
+function bindUIEvents() {
+  const filterSelect = document.querySelector('#segment-filter');
+  const runSelector = document.querySelector('#run-selector');
+
+  if (filterSelect) {
+    filterSelect.addEventListener('change', (e) => {
+      const selectedFilter = e.target.value;
+      updateFilters(selectedFilter);
+    });
+  }
+
+  if (runSelector) {
+    runSelector.addEventListener('change', async (e) => {
+      const runId = e.target.value;
+      if (runId) {
+        try {
+          const data = await fetchRunData(runId);
+          renderVisualization(data);
+        } catch (err) {
+          console.error('Fehler beim Laden der Run-Daten:', err);
+        }
+      }
+    });
+  }
+}
+
+/**
+ * Initialisiert die Anwendung, lädt Standarddaten und verbindet Events.
+ * @async
+ * @function initApp
+ * @returns {Promise<void>}
+ */
+async function initApp() {
+  try {
+    const defaultRunId = document.querySelector('#run-selector')?.value;
+    if (defaultRunId) {
+      const data = await fetchRunData(defaultRunId);
+      renderVisualization(data);
+    }
+    bindUIEvents();
+  } catch (error) {
+    console.error('Fehler bei der Initialisierung:', error);
+  }
+}
+
+window.addEventListener('load', initApp);
+export { initApp, bindUIEvents };
\ No newline at end of file