2d:null 2e:["$","title",null,{"children":"Gemeindefinanzen | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T99a,bubble2 = { //replay; //Daten let nodes = pack2().leaves(); //Simulation const simulation = forceCluster(nodes).force; //nodes = forceCluster(nodes).nodes; const svg = d3.select(DOM.svg(width, height)); const circles = svg.append("g"); const t = d3.transition().duration(2750); //Beschriftung for (let i = 0; i < yScaleBubble.domain().length; i++) { svg .append("text") .attr("x", width / 2) .attr( "y", yScaleBubble(yScaleBubble.domain()[i]) + yScaleBubble.bandwidth() / 3 ) .text(yScaleBubble.domain()[i]) .attr("text-anchor", "middle") .attr("fill", "lightgrey") .attr("font-weight", "bold") .attr("font-size", 64) .attr("opacity", 0.5); } for (let i = 0; i < hauptaufgaben.length; i++) { svg .append("text") .attr("x", 0) .attr("y", 0) .text(hauptaufgaben[i]) .attr("text-anchor", "start") .attr("fill", "grey") .attr("font-weight", "bold") .attr("font-size", 12) .attr( "transform", "translate(" + xScaleBubble(hauptaufgaben[i]) + "," + height + ")rotate(-90)" ); } const node = circles.selectAll("circle").data(nodes, (d) => d.data.label); // exit const nodeExit = node.exit(); nodeExit.transition().duration(2000).attr("r", 0).remove(); //nodeExit.transition(t).remove(); // enter const nodeEnter = node .enter() .append("circle") .attr("fill", (d) => (console.log(d), color(d.data.gruppe))) //.attr("r", 0) .attr("r", (d) => d.r) .call(drag(simulation)); // nodeEnter // .transition() // .duration(2000) // .attr("r", (d) => d.r); //Update const nodeUpdate = node.selectAll("circle").data(nodes, (d) => d.name); nodeUpdate.transition(t).attr("r", (d) => d.r); // Update and restart the simulation. simulation.on("tick", ticked); function ticked() { nodeEnter.attr("cx", (d) => d.x).attr("cy", (d) => d.y); nodeUpdate.attr("cx", (d) => d.x).attr("cy", (d) => d.y); } return svg.node(); // node // .transition() // .delay((d, i) => Math.random() * 500) // .duration(750) // .attrTween("r", (d) => { // const i = d3.interpolate(0, d.r); // return (t) => (d.r = i(t)); // }); //node.append("svg:title").text((d) => d.data.label + ": " + d.data.value); invalidation.then(() => simulation.stop()); }34:T5f9,forceCluster = function (nodes) { let sim = {}; if (step == 1) { let force = d3 .forceSimulation(nodes) .force("x", d3.forceX().x(width / 2)) .force("y", d3.forceY().y(height / 2)) //.force("cluster", forceCluster2()) .force("collide", forceCollide()); let nodesNew = nodes; sim.nodes = nodesNew; sim.force = force; return sim; } else if (step == 2) { let force = d3 .forceSimulation(nodes) .force( "x", d3.forceX().x(function (d) { return xScaleBubble(d.data.gruppe); }) ) .force( "y", d3.forceY().y(function (d) { return ( yScaleBubble(d.parent.data.gruppe) + yScaleBubble.bandwidth() / 2 ); }) ) //.force("cluster", forceCluster2()) .force("collide", forceCollide()); sim.force = force; let nodesNew = nodes; sim.nodes = nodesNew; return sim; } else if (step == 3) { let force = d3 .forceSimulation(nodes) .force( "x", d3.forceX().x(function (d) { return xScaleBubble(d.data.gruppe); }) ) .force( "y", d3.forceY().y(function (d) { return ( yScaleBubble(d.parent.data.gruppe) + yScaleBubble.bandwidth() / 2 ); }) ) //.force("cluster", forceCluster2()) .force("collide", forceCollide()); sim.force = force; let nodesNew = []; sim.nodes = nodesNew; return sim; } }35:T481,function forceCollide() { const alpha = 0.4; // fixed for greater rigidity! const padding1 = 2; // separation between same-color nodes const padding2 = 6; // separation between different-color nodes let nodes; let maxRadius; function force() { const quadtree = d3.quadtree(nodes, d => d.x, d => d.y); for (const d of nodes) { const r = d.r + maxRadius; const nx1 = d.x - r, ny1 = d.y - r; const nx2 = d.x + r, ny2 = d.y + r; quadtree.visit((q, x1, y1, x2, y2) => { if (!q.length) do { if (q.data !== d) { const r = d.r + q.data.r + (d.data.gruppe === q.data.data.gruppe ? padding1 : padding2); let x = d.x - q.data.x, y = d.y - q.data.y, l = Math.hypot(x, y); if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l, d.y -= y *= l; q.data.x += x, q.data.y += y; } } } while (q = q.next); return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); } } force.initialize = _ => maxRadius = d3.max(nodes = _, d => d.r) + Math.max(padding1, padding2); return force; }36:[{"id":"55970cb9bccdc6909735a15ad7718b4d0a9d4ef8f1b1dc75b7d973ecc03ab5ee215586f1556a98dcc3dd459b199d99dee6e02d042bf97eaf403c2948c2084170","href":"https://static.observableusercontent.com/files/55970cb9bccdc6909735a15ad7718b4d0a9d4ef8f1b1dc75b7d973ecc03ab5ee215586f1556a98dcc3dd459b199d99dee6e02d042bf97eaf403c2948c2084170","name":"data_5290043@2.csv","type":"text/csv","lastModified":1657547194584.463,"size":4624953}] 31:{"id":"4664166089720f99","slug":"gemeindefinanzen","title":"Gemeindefinanzen","thumbnail":"3221547e76d4f2b1b6c5d07ddc530adfc8ab704538e8fb8c3be76e0291cdf5bc","access_level":"public","create_time":"$D2022-07-11T13:20:52.302Z","update_time":"$D2022-08-05T13:29:16.838Z","view_time":null,"first_public_time":"$D2022-07-11T14:38:54.366Z","has_unpublished_edits":null,"fork":{"id":"7c8f0b4ac81ee591","slug":"template","title":"Template","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":1806,"publish_version":1806,"role":null,"authored":false,"authors":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null}],"members":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Gemeindefinanzen","cells":[{"id":0,"value":"# Gemeindefinanzen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"logo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"viewof einheit = Inputs.select(gemeinden, {label: \"Gebiet\", multiple: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1365,"value":"## Force Directed Bubble Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1413,"value":"viewof replay = html`