28:null 29:["$","title",null,{"children":"Circle Pack revisited | Marc | Observable"}] 2e:T1194,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); }); 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); }); }); // ------------ Zoom Funktion ------------ function zoomTo(event, d) { const isRoot = event.target.tagName === 'svg'; if (isRoot) { transform(0, 0, 0, true); return; } // Aktuelle Position des Elementes auf SVG Koordinaten System auslesen const { x, y } = getNewPosition(event.target); transform(x, y, d.depth, false); } // ------------ 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) { zoomLevel = isRoot ? 0 : depth + 1; const scale = isRoot ? 1 : zoomLevel * zoomFactor; 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); }); }); }); } // ------------ 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 `depth${depth} ${color} ${shouldBeClickable ? 'clickable' : ''}`; } return svg.node(); }2f:T5f1,html`

Styles

Styles der Kreise `30:[{"id":"f14b9b6d2185083e51e7bee001616145f73cc84f91c0c5e12b9e786ee5674cea3dbb4430c13a961ee84d42b7fbd6172f6460148bdf7d2276c61ca866d1126292","href":"https://static.observableusercontent.com/files/f14b9b6d2185083e51e7bee001616145f73cc84f91c0c5e12b9e786ee5674cea3dbb4430c13a961ee84d42b7fbd6172f6460148bdf7d2276c61ca866d1126292","name":"clusters.json","type":"application/json","lastModified":1611838534693.013,"size":5788}] 2c:{"id":"13c34275fc0f217a","slug":"circle-pack-revisited","title":"Circle Pack revisited","thumbnail":"d61d0816434eab991b704d8640004dd7f616f4a6ecf331d68eb04088bfb22855","access_level":"public","create_time":"$D2021-01-28T12:37:24.328Z","update_time":"$D2021-01-29T09:35:47.149Z","view_time":null,"first_public_time":"$D2021-01-29T09:22:54.735Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"434cb156a556d773","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":"starter_2024"},"version":278,"publish_version":278,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0c5a0f5aedaad15","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":null}],"members":[{"type":"individual","id":"b0c5a0f5aedaad15","login":"ms007","name":"Marc","avatar_url":"https://avatars-next.observableusercontent.com/2784a43d4d784dd7e5f3f20402bb6f39cae7713bc414cb32ea865151ea00580a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"title":"Circle Pack revisited","cells":[{"id":0,"value":"md`# Circle Pack revisited`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$2e","pinned":true,"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 der Clusters aus File Attachment\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = await FileAttachment(\"clusters.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2f","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"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"