start

website/static/mindmap.js

@@ -0,0 +1,49 @@
+// Erstelle eine einfache Mindmap-Struktur mit D3.js
+const data = {
+    name: "Wissenschaftliche Mindmap",
+    children: [
+        { name: "Forschung", children: [{ name: "Theorie" }, { name: "Experimente" }] },
+        { name: "Technologie", children: [{ name: "Datenbanken" }, { name: "Cloud Computing" }] }
+    ]
+};
+
+// D3.js-Setup für die Darstellung der Mindmap
+const width = 800;
+const height = 600;
+const margin = 50;
+
+const svg = d3.select("#mindmap")
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height);
+
+const root = d3.hierarchy(data);
+const treeLayout = d3.tree().size([width - margin, height - margin]);
+treeLayout(root);
+
+const links = svg.selectAll(".link")
+    .data(root.links())
+    .enter()
+    .append("line")
+    .attr("class", "link")
+    .attr("x1", d => d.source.x + margin)
+    .attr("y1", d => d.source.y + margin)
+    .attr("x2", d => d.target.x + margin)
+    .attr("y2", d => d.target.y + margin)
+    .attr("stroke", "#2c3e50");
+
+const nodes = svg.selectAll(".node")
+    .data(root.descendants())
+    .enter()
+    .append("g")
+    .attr("class", "node")
+    .attr("transform", d => `translate(${d.x + margin},${d.y + margin})`);
+
+nodes.append("circle")
+    .attr("r", 20)
+    .attr("fill", "#3498db");
+
+nodes.append("text")
+    .attr("dx", 25)
+    .attr("dy", 5)
+    .text(d => d.data.name);