29:null 2a:["$","title",null,{"children":"Bubble fill up | Mehr Kaur | Observable"}] 2f:T9bb,{ var start_circles = 2606; var nbr_circles = 2606; var radius = 7; var new_fall_delay = 50; var circles_per_fall = 1; //var duration = 10000000; var data = []; for (let i = 0; i < start_circles; ++i) { data.push({ x: Math.random()*width, y: height/10 }); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) function draw_circles() { console.log(data); svg .selectAll("circle") .data(data) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .style('fill', "white") .style("stroke", "#006F9D") .attr("r", radius) } // const sim = d3.forceSimulation(data) // .velocityDecay(0.2) // .force("x", d3.forceX().strength(0.002)) // .force("y", d3.forceY(0.9*height)) // .force("collide", d3.forceCollide().radius(d => d.r + 0.5).iterations(2)) // .force("limits", forceLimit.forceLimit().radius(radius).y1(0.9*height).x0(0).x1(width)); // //.on("tick", ticked); // // const simulation = d3.forceSimulation(nodes) // // .velocityDecay(0.2) // // .force("x", d3.forceX().strength(0.002)) // // .force("y", d3.forceY().strength(0.002)) // // .force("collide", d3.forceCollide().radius(d => d.r + 0.5).iterations(2)) // // .on("tick", ticked); //.force("collide", d3.forceCollide(radius)) // .force("y", d3.forceY(0.9*height)) var sim = d3.forceSimulation(data) .force("y", d3.forceY(0.9*height)) .force("collide", d3.forceCollide(radius+3)) .force("limits", forceLimit.forceLimit().radius(radius + 3).y1(height).x0(0).x1(width)) sim.on('tick', function() { svg .selectAll("circle") .attr('cx', d => d.x) .attr('cy', d => d.y); }); const circlecount = 0; function add_circles(elapsed_time) { while(circlecount <= nbr_circles){ circlecount = circlecount + 1; //if (elapsed_time < duration) { for (let i = 0; i <= circles_per_fall; ++i) { data.push({ x: Math.random()*width, y: height*0.1, vx: 0, vy: 0, }); //} draw_circles(); sim.nodes(data).alpha(1).restart(); } } } draw_circles(); d3.interval(add_circles, new_fall_delay); return svg.node() } //this code adapted from https://observablehq.com/@d3/collision-detection and https://observablehq.com/@rdevooght/gravity-falling-circles30:[] 2d:{"id":"b5295436662d3e17","slug":null,"title":"Bubble fill up","thumbnail":"944d6082ea9a7a9c98387be4d1188385c48efa97fcbb1923fd1e77e69ccbe279","access_level":"public","create_time":"$D2023-05-09T00:44:25.640Z","update_time":"$D2023-05-09T21:14:07.631Z","view_time":null,"first_public_time":"$D2023-05-09T00:44:25.640Z","fork":{"id":"9c8c487c31171a9e","slug":"gravity-falling-circles","title":"Gravity: falling circles","owner":{"id":"08edfe4fc9c48058","login":"rdevooght","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"59ffb671facfb376","login":"mehrkaur","name":"Mehr Kaur","avatar_url":"https://avatars-next.observableusercontent.com/81f9884595945168c5e57d5b0706ad87fb98020548e0844c4ab556ecfcb99a94","tier":"starter_2024"},"version":176,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"49a9881913709ee1","login":"mehrkaur","name":"Mehr Kaur","avatar_url":"https://avatars-next.observableusercontent.com/81f9884595945168c5e57d5b0706ad87fb98020548e0844c4ab556ecfcb99a94","tier":null}],"members":[{"type":"individual","id":"49a9881913709ee1","login":"mehrkaur","name":"Mehr Kaur","avatar_url":"https://avatars-next.observableusercontent.com/81f9884595945168c5e57d5b0706ad87fb98020548e0844c4ab556ecfcb99a94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bubble fill up","cells":[{"id":0,"value":"# Bubble fill up\nCircles fall then fill up, d3 forces","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":170,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"color = d3.scaleSequential(d3.interpolateSinebow).domain([0,width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"color(Math.random()*width)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"forceLimit = require(\"d3-force-limit\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"______","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":147,"value":"stat_annotate = {\n const text = html`

This is some text on the left side

`;\n\n return text;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"{\n const n = 2606;\n const circles = pack(Array.from({length: n}, () => ({r: 10 + Math.random() * 10})));\n\n const root = html``;\n yield root;\n\n const g = root.firstElementChild;\n for (const {x, y, r} of circles) {\n g.appendChild(svg``);\n yield root;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"