diff --git a/data_visualization/js/app.js b/data_visualization/js/app.js
new file mode 100644
index 0000000..8196fe6
--- /dev/null
+++ b/data_visualization/js/app.js
@@ -0,0 +1,95 @@
+"use strict";
+
+/**
+ * Initialisiert die App, lädt Ergebnisse und rendert Diagramme.
+ * @module app
+ */
+
+/** @typedef {Object} ResultEntry
+ * @property {string} run_id
+ * @property {number} parallelism
+ * @property {number} band_width
+ * @property {number} retry_tail_p99
+ * @property {string} timestamp
+ */
+
+/**
+ * Ruft Daten von der /results API ab.
+ * @param {Object} [filters]
+ * @returns {Promise<ResultEntry[]>}
+ */
+async function fetchResults(filters = {}) {
+  const params = new URLSearchParams(filters);
+  const res = await fetch(`/results?${params.toString()}`, {
+    method: 'GET',
+    headers: { 'Accept': 'application/json' }
+  });
+  if (!res.ok) throw new Error(`Fehler beim Laden der Ergebnisse: ${res.status}`);
+  return res.json();
+}
+
+/**
+ * Rendert Diagramme basierend auf Resultaten.
+ * @param {ResultEntry[]} data
+ */
+function renderCharts(data) {
+  const container = document.getElementById('chart-container');
+  if (!container) return;
+
+  container.innerHTML = '';
+  const chart = document.createElement('div');
+  chart.className = 'chart';
+
+  const summary = document.createElement('p');
+  summary.textContent = `Anzahl Ergebnisse: ${data.length}`;
+  chart.appendChild(summary);
+
+  // Beispielhafte Darstellung von Trends
+  const list = document.createElement('ul');
+  data.forEach(entry => {
+    const item = document.createElement('li');
+    item.textContent = `Parallelität: ${entry.parallelism}, Bandbreite: ${entry.band_width}, Retry p99: ${entry.retry_tail_p99}`;
+    list.appendChild(item);
+  });
+  chart.appendChild(list);
+  container.appendChild(chart);
+}
+
+/**
+ * Wendet aktuelle Filter an und aktualisiert Diagramme.
+ */
+export async function applyFilters() {
+  const parallelismSelect = document.getElementById('filter-parallelism');
+  const parallelism = parallelismSelect?.value || '';
+
+  const filters = {};
+  if (parallelism) filters.parallelism = parallelism;
+
+  try {
+    const results = await fetchResults(filters);
+    renderCharts(results);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+/**
+ * Initialisiert die Anwendung und bindet Eventlistener.
+ */
+export async function initApp() {
+  try {
+    const initialData = await fetchResults();
+    renderCharts(initialData);
+
+    const filterForm = document.getElementById('filter-form');
+    if (filterForm) {
+      filterForm.addEventListener('change', () => {
+        applyFilters();
+      });
+    }
+  } catch (err) {
+    console.error('Fehler bei Initialisierung:', err);
+  }
+}
+
+window.addEventListener('load', initApp);
\ No newline at end of file