diff --git a/2_interference_visualization/js/api.js b/2_interference_visualization/js/api.js
new file mode 100644
index 0000000..2c5164e
--- /dev/null
+++ b/2_interference_visualization/js/api.js
@@ -0,0 +1,48 @@
+/**
+ * @file js/api.js
+ * @description Daten-Layer zur Kommunikation mit dem Endpoint /visualization.
+ * Formatierung der Messdaten für die Visualisierung.
+ */
+
+/**
+ * Sendet GET-Request an /visualization und gibt die JSON-Daten zurück.
+ *
+ * @async
+ * @function fetchVisualizationData
+ * @param {Object} [filters={}] - Optionaler Filterparameter (z. B. { run: '31b', metric: 'tail' })
+ * @returns {Promise<Object>} Parsed JSON mit Messwerten
+ */
+export async function fetchVisualizationData(filters = {}) {
+  const queryParams = new URLSearchParams();
+
+  if (filters.run) queryParams.append('run', filters.run);
+  if (filters.metric) queryParams.append('metric', filters.metric);
+
+  const url = `/visualization${queryParams.toString() ? `?${queryParams.toString()}` : ''}`;
+
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json'
+      }
+    });
+
+    if (!response.ok) {
+      throw new Error(`Fehler beim Laden der Daten: ${response.status} ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    // Validierung der Struktur
+    if (!Array.isArray(data?.data) || !Array.isArray(data?.runs) || !Array.isArray(data?.metrics)) {
+      console.warn('Unerwartete Datenstruktur vom Server', data);
+      return { runs: [], metrics: [], data: [] };
+    }
+
+    return data;
+  } catch (error) {
+    console.error('Fehler in fetchVisualizationData:', error);
+    return { runs: [], metrics: [], data: [] };
+  }
+}