27:null 28:["$","title",null,{"children":"Cluster basierte Wissenslandkarte | Antoine Faché | Observable"}] 2d:T185b,chart = { const clusterWidth = 160; const zoomFactor = 3.5; // Wie weit pro Stufe weiter hineingezoomt wird // Aktuelle ZoomStufe (0 - 3) Wird überschrieben, wenn hineingeklickt wird. let zoomLevel = 0; // Erstelle ein Pack Layout für jedes Cluster const clusters = data.children .sort((a, b) => (a.color > b.color ? 1 : -1)) .map(child => pack(child, clusterWidth, clusterWidth)); // Erstelle Force Layout für die Cluster // (x und y der obersten Ebene werden gesetzt) const simulation = forceLayout(clusters); // SVG Container const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("class", "root"); // main group (Transform wird angehängt für Padding & Zooming) const main = svg.append("g").attr("class", "main"); const zoom = d3 .zoom() //.scaleExtent([0.2, 6]) .on("zoom", event => { const { transform } = event; main.attr("transform", transform); d3.selectAll('text').attr("transform", d => `scale(${1 / transform.k})`); d3.selectAll(".childText").attr( "transform", d => `translate(${d.x - clusterWidth / 2},${d.y - clusterWidth / 2}) scale(${1 / transform.k})` ); }); svg.call(zoom).on("click", zoomTo); // Cluster group (Container Element für alle Cluster inkl. der enthaltenen Komponenten) // Jedes Cluster Group Objekt wird positioniert über die Force simulation (mit jedem Tick) const cluster = main .selectAll("g") .data(clusters) .join("g") .call(drag(simulation)); simulation.on("tick", () => { cluster.attr("transform", d => `translate(${d.x}, ${d.y})`); }); // Cluster Kreis cluster .append("circle") .attr('r', "80") .attr("class", d => getCircleClasses(d, d)) .on("click", (event, d) => { event.stopPropagation(); zoomTo(event, d); }); // Cluster Border Kreis cluster .append("circle") .attr('r', "85") .attr('class', d => { const colorClass = d.data.color; return `outline ${colorClass}`; }); // Cluster Child Kreise (Pack) cluster.each((cluster, idx, elements) => { const self = d3.select(elements[idx]); const children = cluster.descendants().slice(1); const enter = self .selectAll("g") .data(children) .enter() .append("g") .attr( "transform", d => `translate(${d.x - clusterWidth / 2},${d.y - clusterWidth / 2})` ); enter .append("circle") .attr("r", d => d.r) .attr("class", d => getCircleClasses(cluster, d)) .on("click", (event, d) => { event.stopPropagation(); zoomTo(event, d); }); }); //Filter für Drop Shadow von Labels let shadowID; const filter = svg .append("defs") .append("filter") // drop shadow definition .attr("id", (shadowID = DOM.uid("shadow")).id) .append("feDropShadow") .attr("dx", 0) .attr("dy", 0) .attr("stdDeviation", 3) .attr("flood-color", "black") .attr("flood-opacity", 0.6); // Cluster Child Labels (Pack), muss seperat zu den Kreisen erstellt werden wegen überlagerung cluster.each((cluster, idx, elements) => { const self = d3.select(elements[idx]); const children = cluster.descendants().slice(1); const enter = self .selectAll("text") .data(children) .enter() .append("text") .attr( "transform", d => `translate(${d.x - clusterWidth / 2},${d.y - clusterWidth / 2})` ) .attr('class', 'text childText invisible') .text(d => d.data.name) .attr("style", `filter:${shadowID}`); }); //Cluster Label cluster .append("text") .attr('class', 'text') .attr("style", `filter:${shadowID}`) .text(d => d.data.name); // ------------ Zoom Funktion ------------ function zoomTo(event, d) { const isRoot = event.target.tagName === 'svg'; if (isRoot) { transform(0, 0, 0, true, 1); return; } // Aktuelle Position des Elementes auf SVG Koordinaten System auslesen const { x, y } = getNewPosition(event.target); const scale = (height / (d.r * 2)) * 0.9; transform(x, y, d.depth, false, scale); } // ------------ Hilfsfunktion, um neue Position herauszufinden ------------ // anhand eines Dom-Elementes. Gibt ein Objekt mit x, y zurück function getNewPosition(element) { // Aktuelle Position des Elementes auf SVG Koordinaten System auslesen const pos = getCirclePosition(element); // Aktuelles Transform auslesen über Dom-Element, wo zoom angehängt ist. (main) var transform = d3.zoomTransform(main.node()); // Aktuelle Position - Aktuelle Transform Position geteilt durch transform Zoom Faktor const x = (pos.x - transform.x) / transform.k; const y = (pos.y - transform.y) / transform.k; return { x, y }; } // ------------ Transition Transform auf neue Position ------------ function transform(x, y, depth, isRoot, scale) { zoomLevel = isRoot ? 0 : depth + 1; const zoomTransition = svg .transition() .duration(700) .call(zoom.transform, function() { return d3.zoomIdentity.scale(scale).translate(-x, -y); }) .on("end", () => { // update css classes cluster.each((cl, idx, elements) => { const self = d3.select(elements[idx]); self.selectAll("circle:not(.outline").attr("class", d => { return getCircleClasses(cl, d); }); self.selectAll("text").classed("invisible", d => d.depth > zoomLevel); }); }); } // ------------ Hilfsfunktion, um die Klassen eines Kreises zu bestimmen ------------ function getCircleClasses(cluster, d) { const depth = d.depth; const color = cluster.data.color; const shouldBeClickable = depth <= zoomLevel; return `${zoomLevelHelper(d) ? '' : 'invisible'} depth${depth} ${color} ${ shouldBeClickable ? 'clickable' : '' } ${zoomLevel >= 2 && depth == 0 ? 'opacity' : ''}`; } function zoomLevelHelper(d) { if (zoomLevel === 0) { return d.depth < zoomLevel + 3; } return d.depth < zoomLevel + 2; } return svg.node(); }2e:T70a,html`

Styles

Styles der Kreise `2f:[] 2b:{"id":"af53b1222bc9b195","slug":null,"title":"Cluster basierte Wissenslandkarte","thumbnail":"4e70549f473be0e63ce6bf5bb2937c3f9936e37bcd5f86c20750b890d587170c","access_level":"public","create_time":"$D2026-04-21T04:15:13.567Z","update_time":"$D2026-04-21T04:15:13.567Z","view_time":null,"first_public_time":"$D2026-04-21T04:15:13.567Z","has_unpublished_edits":null,"fork":{"id":"77f3649aef5e397b","slug":"circle-pack-revisited","title":"Cluster basierte Wissenslandkarte","owner":{"id":"d0a382dd60725a6c","login":"bananton","name":"Anton Martinez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab5c695e0d9f5ed0","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":"starter_2024"},"version":453,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null}],"members":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null,"role":"editor"},{"type":"team","id":"ab5c695e0d9f5ed0","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Cluster basierte Wissenslandkarte","cells":[{"id":0,"value":"md`# Cluster basierte Wissenslandkarte`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"viewof childAmountIntervall = rangeSlider({\n min: 2,\n max: 10,\n value: this ? this.value : [2, 4],\n step: 1,\n title: 'Intervall Anzahl Child Elemente',\n description:\n 'Minimale bis maximale Anzahl an generierten Child Elementen (2 - 10)'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`\n

Hilfs Funktionen

\n**pack** erstellt das pack layout. \n**forceLayout** erstellt eine force layout. \n**drag** wird verwendet, damit die Cluster verschoben werden können. \n**getCirclePosition** liest die aktuelle Position eines Elementes im Root SVG Koordinatensystem aus.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"function pack(data, width, height) {\n return d3\n .pack()\n .size([width, height])\n .padding(5)(\n d3\n .hierarchy(data)\n .count()\n .sort((a, b) => b.value - a.value)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function forceLayout(data) {\n return d3\n .forceSimulation(data)\n .force(\"charge\", d3.forceManyBody().strength(100))\n .force(\"manyBody\", d3.forceManyBody().strength(30))\n .force('x', d3.forceX().strength((0.3 * 100) / width))\n .force('y', d3.forceY().strength((0.3 * 100) / height))\n .force(\"center\", d3.forceCenter().strength(0.01))\n .force('collision', d3.forceCollide().radius(90))\n .velocityDecay(.6)\n .alphaDecay(1 - Math.pow(0.001, 1 / 600));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"function drag(simulation) {\n function dragstarted(d) {\n if (!d.active) simulation.alphaTarget(0.3).restart();\n if (d.subject) {\n d.subject.fx = d.x;\n d.subject.fy = d.y;\n }\n }\n\n function dragged(d) {\n if (d.subject) {\n d.subject.fx = d.x;\n d.subject.fy = d.y;\n }\n }\n\n function dragended(d) {\n if (!d.active) simulation.alphaTarget(0);\n if (d.subject) {\n d.subject.fx = null;\n d.subject.fy = null;\n }\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"function getCirclePosition(elem) {\n var svg = elem.ownerSVGElement;\n\n // Get the cx and cy coordinates\n var pt = svg.createSVGPoint();\n pt.x = elem.cx.baseVal.value;\n pt.y = elem.cy.baseVal.value;\n\n while (true) {\n // Get this elements transform\n var transform = elem.transform.baseVal.consolidate();\n // If it has a transform, then apply it to our point\n if (transform) {\n var matrix = elem.transform.baseVal.consolidate().matrix;\n pt = pt.matrixTransform(matrix);\n }\n // If this element's parent is the root SVG element, then stop\n if (elem.parentNode == svg) break;\n // Otherwise step up to the parent element and repeat the process\n elem = elem.parentNode;\n }\n return pt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"html`\n

Data

\nJson Daten werden zum Teil durch Zufallszahlen generiert (Min und Max sind oben mit dem Regler änderbar)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = ({\n name: \"BKH-Cluster\",\n children: [\n {\n name: \"Infrastruktur\",\n color: \"lightBlue\",\n children: specificTree()\n },\n {\n name: \"Konzern\",\n color: \"yellow\",\n children: specificTree()\n },\n {\n name: \"Informatik\",\n color: \"yellow\",\n children: specificTree()\n },\n {\n name: \"Personenverkehr\",\n color: \"purple\",\n children: specificTree()\n },\n {\n name: \"Immobilien\",\n color: \"darkBlue\",\n children: specificTree()\n },\n {\n name: \"Cargo\",\n color: \"darkBlue\",\n children: specificTree()\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"function specificTree() {\n const depth = 3;\n const min = childAmountIntervall[0];\n const max = childAmountIntervall[1];\n return createRandomTree(depth, min, max);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"function createRandomTree(depth, min, max) {\n let obj = [];\n let amountObj = Math.floor(Math.random() * (max - min + 1) + min);\n for (let i = 0; i < amountObj; i++) {\n obj.push({\n name: \"Test Node \" + i,\n children: depth === 0 ? [] : createRandomTree(depth - 1, min, max)\n });\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html`\n

Libraries

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"