2f:null 30:["$","title",null,{"children":"CAP 5937 Final Project - Chathura Jayalath [UCFID: 3948890] Bubble Map Overlap Correction | Chathura Jayalath | Observable"}] 35:T792,{ const [svgElement, svg] = getSVG(); // Drawing the Map const map = svg.append("g") map .selectAll("path") .data(USstatesJson.features) .join("path") .attr("d", usGeoGen) .style("fill","none") .style("stroke","steelblue") .style("opacity", 0.5) // Drawing the graticules const graticules = d3.geoGraticule10() svg.append("g") .append("path") .attr("d", usGeoGen(graticules)) .style("stroke","black") .style("fill","none") .style("opacity", 0.2) // Drawing the outline svg.append("g") .append("path") .attr("d", usGeoGen(outline)) .style("stroke","black") .style("fill","none") .style("opacity", 0.2) // Drawing the Old bubbles if(controls.showOld == "toggle"){ svg .append("g") .style("stroke", "black") .style("fill", "red") .style("opacity", 0.5) .selectAll("circle") .data(theBubbles) .join("circle") .attr("r", d => d.radius) .attr("cx", d => d.centroid[0]) .attr("cy", d => d.centroid[1]) .append("title") .text(d => d.name); } // Drawing the moved bubbles if(controls.showMoved == "toggle"){ const allBubbles = svg.append("g") .style("fill","green") .style("stroke","black") .selectAll("g") .data(theBubbles) .join("g") const allCircles = allBubbles .append("circle") .style("opacity", 0.6) .attr("r", d => d.radius) .attr("cx", d => (controls.animateMove == "toggle")? d.centroid[0] : d.center[0]) .attr("cy", d => (controls.animateMove == "toggle")? d.centroid[1] : d.center[1]) allCircles .append("title") .text(d => "*" + d.name) if(controls.animateMove == "toggle"){ allCircles .transition() .attr("cx", d => d.center[0]) .attr("cy", d => d.center[1]) .duration(2500) } } return svgElement; }36:T603,{ const [svgElement, svg] = getSVG(); const projection = d3["geo" + projMain_USstates.projType]().fitSize([W,H], geodata) .rotate([rotation_USstates.lambda,rotation_USstates.phi,rotation_USstates.gamma]) .scale(projMain_USstates.scale) //.fitExtent([margin.top, margin.left],[W,H],geodata) const geoGen = d3.geoPath().projection(projection); // Drawing the Map const map = svg.append("g") map .append("path") .attr("d", geoGen(geodata)) .style("fill","none") .style("stroke","steelblue") // Drawing the outline svg.append("g") .append("path") .attr("d", geoGen(outline)) .style("stroke","black") .style("fill","none") .style("opacity", 0.2) const bubbleScale = d3.scaleSqrt().domain(d3.extent(US_Covid_data, d => d.death)).range([2, 10]) const worldBubbleData = USstatesJson.features.map(d => ({name: d.properties.NAME, centroid: geoGen.centroid(d), radius: bubbleScale(d.properties.death) }) ); // Drawing moved bubbles const allBubbles = svg.append("g") const allCircles = allBubbles .style("fill","red") .style("stroke","black") .selectAll("circle") .data(calculateBubbles(worldBubbleData)) .join("circle") .attr("r", d => d.radius) .attr("cx", d => d.centroid[0]) .attr("cy", d => d.centroid[1]) allCircles .transition() .attr("cx", d => d.center[0]) .attr("cy", d => d.center[1]) .duration(2000) allCircles .append("title") .text(d => d.name) return svgElement; }37:T943,{ const [svgElement, svg] = getSVG(); const projection = d3["geo" + projMain2.projType]().fitSize([W,H], geodata) .rotate([rotation2.lambda,rotation2.phi,rotation2.gamma]) //.fitExtent([margin.top, margin.left],[W,H],geodata) const geoGen = d3.geoPath().projection(projection); // Drawing the Map const map = svg.append("g") map .selectAll("path") .data(geodata.features) .join("path") .attr("d", geoGen) .style("fill","none") .style("stroke","steelblue") // Drawing the graticules const graticules = d3.geoGraticule10() svg.append("g") .append("path") .attr("d", geoGen(graticules)) .style("stroke","black") .style("fill","none") .style("opacity", 0.2) // Drawing the outline svg.append("g") .append("path") .attr("d", geoGen(outline)) .style("stroke","black") .style("fill","none") .style("opacity", 0.2) const scaleRadius = d3.scaleSqrt().domain(d3.extent(aid_to_data.values(), d => d.Altitude)).range([1, 5]); const airBubbles = Array.from(aid_to_data.values()).map(d => ({name: d.Name, centroid: [d.Longitude, d.Latitude], radius: d.Altitude})); // Drawing the airports OLD const allOldCircles = svg.append("g") .style("fill","yellow") .style("stroke","black") .style("opacity",0.2) .selectAll("circle") .data(airBubbles) .join("circle") .attr("r",d => scaleRadius(d.radius)) .attr("cx", d => projection(d.centroid)[0]) .attr("cy", d => projection(d.centroid)[1]) allOldCircles .append("title") .text(d => d.name) const scaleFilteredRadius = d3.scaleSqrt().domain(d3.extent(aid_filteredBubbleData, d => d.radius)).range([1, 5]); // Drawing the moved airports const allBubbles = svg.append("g") const allCircles = allBubbles .style("fill","red") .style("stroke","black") .selectAll("circle") .data(calculateBubbles(aid_filteredBubbleData)) .join("circle") .attr("r", d => scaleFilteredRadius(d.radius) ) .attr("cx", d => projection(d.centroid)[0]) .attr("cy", d => projection(d.centroid)[1]) allCircles .transition() .attr("cx", d => projection(d.center)[0]) .attr("cy", d => projection(d.center)[1]) .duration(10000) allCircles .append("title") .text(d => "*" + d.name) return svgElement; }38:T995,function calculateBubbles(in_bubbleData, numIters = 500) { const bubbles = in_bubbleData.map(d => ({name: d.name, centroid: _.cloneDeep(d.centroid), center: _.cloneDeep(d.centroid), radius: d.radius, forces: [], netforce: [0,0]})); // - run multiple iterations for(let itr = 0; itr < numIters; itr++){ // -- detect collision and add force as requried for(let curIdx = 0; curIdx < bubbles.length - 1; curIdx++){ const thisBubble = bubbles[curIdx]; for(let otherIdx = curIdx + 1; otherIdx < bubbles.length; otherIdx++){ const otherBubble = bubbles[otherIdx]; const colRslt = testCircleCollision(thisBubble.center, thisBubble.radius, otherBubble.center, otherBubble.radius) //console.log(colRslt) if( colRslt[0] ){ //console.log(thisBubble.name, otherBubble.name); const dist = Math.sqrt(colRslt[1]); const forceOnThis = 0.5 * ( thisBubble.radius - (dist - otherBubble.radius) ); const thisDirection = [(thisBubble.center[0] - otherBubble.center[0]) / dist, (thisBubble.center[1] - otherBubble.center[1]) / dist]; thisBubble.forces.push([forceOnThis * thisDirection[0], forceOnThis * thisDirection[1]]); //console.log([forceOnThis * thisDirection[0], forceOnThis * thisDirection[1]]); const forceOnOther = 0.5 * ( otherBubble.radius - (dist - thisBubble.radius) ); const otherDirection = [(otherBubble.center[0] - thisBubble.center[0]) / dist, (otherBubble.center[1] - thisBubble.center[1]) / dist]; otherBubble.forces.push([forceOnOther * otherDirection[0], forceOnOther * otherDirection[1]]); //console.log([forceOnOther * otherDirection[0], forceOnOther * otherDirection[1]]); } } } // -- move according to forces applied for(let curIdx = 0; curIdx < bubbles.length - 1; curIdx++){ const thisBubble = bubbles[curIdx]; const netforce = [0,0]; for(let fidx = 0; fidx < thisBubble.forces.length; fidx++){ netforce[0] += thisBubble.forces[fidx][0]; netforce[1] += thisBubble.forces[fidx][1]; } thisBubble.netforce = netforce; thisBubble.center[0] += netforce[0] * 0.05 // (0.1 * thisBubble.radius * thisBubble.radius); thisBubble.center[1] += netforce[1] * 0.05 // (0.1 * thisBubble.radius * thisBubble.radius); thisBubble.forces = []; thisBubble.netforce = [0,0]; } } return bubbles; }39:T97a,function calculateBubbles2(in_bubbleData, numIters = 500) { const bubbles = in_bubbleData.map(d => ({name: d.name, centroid: _.cloneDeep(d.centroid), center: _.cloneDeep(d.centroid), radius: d.radius, forces: [], netforce: [0,0]})); // - run multiple iterations for(let itr = 0; itr < numIters; itr++){ // -- detect collision and add force as requried for(let curIdx = 0; curIdx < bubbles.length - 1; curIdx++){ const thisBubble = bubbles[curIdx]; for(let otherIdx = curIdx + 1; otherIdx < bubbles.length; otherIdx++){ const otherBubble = bubbles[otherIdx]; const colRslt = testCircleCollision(thisBubble.center, thisBubble.radius, otherBubble.center, otherBubble.radius) //console.log(colRslt) if( colRslt[0] ){ //console.log(thisBubble.name, otherBubble.name); const dist = Math.sqrt(colRslt[1]); const forceOnThis = 0.5 * ( thisBubble.radius - (dist - otherBubble.radius) ); const thisDirection = [(thisBubble.center[0] - otherBubble.center[0]) / dist, (thisBubble.center[1] - otherBubble.center[1]) / dist]; thisBubble.forces.push([forceOnThis * thisDirection[0], forceOnThis * thisDirection[1]]); //console.log([forceOnThis * thisDirection[0], forceOnThis * thisDirection[1]]); const forceOnOther = 0.5 * ( otherBubble.radius - (dist - thisBubble.radius) ); const otherDirection = [(otherBubble.center[0] - thisBubble.center[0]) / dist, (otherBubble.center[1] - thisBubble.center[1]) / dist]; otherBubble.forces.push([forceOnOther * otherDirection[0], forceOnOther * otherDirection[1]]); //console.log([forceOnOther * otherDirection[0], forceOnOther * otherDirection[1]]); } } } // -- move according to forces applied for(let curIdx = 0; curIdx < bubbles.length - 1; curIdx++){ const thisBubble = bubbles[curIdx]; const netforce = [0,0]; for(let fidx = 0; fidx < thisBubble.forces.length; fidx++){ netforce[0] += thisBubble.forces[fidx][0]; netforce[1] += thisBubble.forces[fidx][1]; } thisBubble.netforce = netforce; thisBubble.center[0] += netforce[0] / (thisBubble.radius * thisBubble.radius); thisBubble.center[1] += netforce[1] / (thisBubble.radius * thisBubble.radius); thisBubble.forces = []; thisBubble.netforce = [0,0]; } } return bubbles; }3a:T79b,{ const [svgElement, svg] = getSVG(); // Drawing the Map const map = svg.append("g") map .selectAll("path") .data(USstatesJson.features) .join("path") .attr("d", usGeoGen) .style("fill","none") .style("stroke","steelblue") .style("opacity", 0.5) // Drawing the graticules const graticules = d3.geoGraticule10() svg.append("g") .append("path") .attr("d", usGeoGen(graticules)) .style("stroke","black") .style("fill","none") .style("opacity", 0.2) // Drawing the outline svg.append("g") .append("path") .attr("d", usGeoGen(outline)) .style("stroke","black") .style("fill","none") .style("opacity", 0.2) // Drawing the Old bubbles if(controls.showOld == "toggle"){ svg .append("g") .style("stroke", "black") .style("fill", "red") .style("opacity", 0.5) .selectAll("circle") .data(theBubbles_Fast) .join("circle") .attr("r", d => d.radius) .attr("cx", d => d.centroid[0]) .attr("cy", d => d.centroid[1]) .append("title") .text(d => d.name); } // Drawing the moved bubbles if(controls.showMoved == "toggle"){ const allBubbles = svg.append("g") .style("fill","blue") .style("stroke","black") .selectAll("g") .data(theBubbles_Fast) .join("g") const allCircles = allBubbles .append("circle") .style("opacity", 0.6) .attr("r", d => d.radius) .attr("cx", d => (controls.animateMove == "toggle")? d.centroid[0] : d.center[0]) .attr("cy", d => (controls.animateMove == "toggle")? d.centroid[1] : d.center[1]) allCircles .append("title") .text(d => "*" + d.name) if(controls.animateMove == "toggle"){ allCircles .transition() .attr("cx", d => d.center[0]) .attr("cy", d => d.center[1]) .duration(2500) } } return svgElement; }3b:T89f,function calculateBubblesKdTreeBased(in_bubbleData, numIters = 500) { const bubbles = in_bubbleData.map(d => ({name: d.name, centroid: _.cloneDeep(d.centroid), center: _.cloneDeep(d.centroid), radius: d.radius, forces: [], netforce: [0,0]})); const bubbleMaxRadius = d3.max(in_bubbleData, d => d.radius); // - run multiple iterations for(let itr = 0; itr < numIters; itr++){ // kdtree for search const bubble_kdtree_root = generateKdTreeFromArray(bubbles.map(d => [d.center[0], d.center[1], d.radius, d.name])); // -- detect collision and add force as requried for(let curIdx = 0; curIdx < bubbles.length - 1; curIdx++){ const thisBubble = bubbles[curIdx]; const neighbors = kdNeighborsInRangeWithRadius(bubble_kdtree_root, bubbleMaxRadius, thisBubble.center, thisBubble.radius); for(let otherIdx = curIdx + 1; otherIdx < neighbors.length; otherIdx++){ const otherBubble = neighbors[otherIdx]; //console.log(thisBubble.name, otherBubble[2]); const dist = calcDistance([otherBubble[0], otherBubble[1]], thisBubble.center); const forceOnThis = 0.5 * ( thisBubble.radius - (dist - otherBubble[2]) ); const thisDirection = [(thisBubble.center[0] - otherBubble[0]) / dist, (thisBubble.center[1] - otherBubble[1]) / dist]; thisBubble.forces.push([forceOnThis * thisDirection[0], forceOnThis * thisDirection[1]]); //console.log([forceOnThis * thisDirection[0], forceOnThis * thisDirection[1]]); } } // -- move according to forces applied for(let curIdx = 0; curIdx < bubbles.length - 1; curIdx++){ const thisBubble = bubbles[curIdx]; const netforce = [0,0]; for(let fidx = 0; fidx < thisBubble.forces.length; fidx++){ netforce[0] += thisBubble.forces[fidx][0]; netforce[1] += thisBubble.forces[fidx][1]; } thisBubble.netforce = netforce; thisBubble.center[0] += netforce[0] * 0.05 // (0.1 * thisBubble.radius * thisBubble.radius); thisBubble.center[1] += netforce[1] * 0.05 // (0.1 * thisBubble.radius * thisBubble.radius); thisBubble.forces = []; thisBubble.netforce = [0,0]; } } return bubbles; }3c:[{"id":"85644ef109d7a408c2d3ceb61dd5a647df6975ea0f66dfd1f581e0cc29b76202c1fbcd621a0470a899db25abcae889996003795af314d376b2599f3c48928848","href":"https://static.observableusercontent.com/files/85644ef109d7a408c2d3ceb61dd5a647df6975ea0f66dfd1f581e0cc29b76202c1fbcd621a0470a899db25abcae889996003795af314d376b2599f3c48928848","name":"airports.csv","type":"text/csv","lastModified":1618494703232.226,"size":1127366},{"id":"60db55a5878a657b3534d512a5bef024479bd844a00a1262f4948444507d04445c5a9b9b353a20906275df6617f631483a9be7e20cac26a03caf2c76fabfc771","href":"https://static.observableusercontent.com/files/60db55a5878a657b3534d512a5bef024479bd844a00a1262f4948444507d04445c5a9b9b353a20906275df6617f631483a9be7e20cac26a03caf2c76fabfc771","name":"routes-3.csv","type":"text/csv","lastModified":1618494716899.584,"size":2377253}] 33:{"id":"49f7330f56bbdbda","slug":"cap-5937-final-project-chathura-jayalath-ucfid-3948890-bub","title":"CAP 5937 Final Project - Chathura Jayalath [UCFID: 3948890] Bubble Map Overlap Correction","thumbnail":"5037959080b471a89772858700ebc72f541f2cbf137a23c45cd0fd670f8b3ce2","access_level":"public","create_time":"$D2021-04-15T13:38:04.534Z","update_time":"$D2021-05-05T10:16:20.315Z","view_time":null,"first_public_time":"$D2023-11-14T02:38:35.797Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"faa67bfd1359f951","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":"starter_2024"},"version":1388,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null}],"members":[{"type":"individual","id":"5fe81dea2f61079a","login":"deamonpog","name":"Chathura Jayalath","avatar_url":"https://avatars-next.observableusercontent.com/1bc13a0724d43e94c26de301357a2897d22e5c4e01e7f160ea8fba232ef861f1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"CAP 5937 Final Project - Chathura Jayalath [UCFID: 3948890] Bubble Map Overlap Correction","cells":[{"id":0,"value":"md`# CAP 5937 Final Project - Chathura Jayalath [UCFID: 3948890] Bubble Map Overlap Correction`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"viewof controls = columns({\n showMoved : checkbox({\n description: \"Show moved\",\n options: [{ value: \"toggle\", label: \"Moved\" }],\n value: \"toggle\"\n }),\n animateMove : checkbox({\n description: \"Animate Move\",\n options: [{ value: \"toggle\", label: \"Animate Move\" }],\n value: \"toggle\"\n }),\n showOld : checkbox({\n description: \"Show Old\",\n options: [{ value: \"toggle\", label: \"Old\" }],\n value: \"toggle\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"viewof dataLabel = select({\n title: \"Data\",\n description: \"Please pick the data label.\",\n options: [\"CENSUSAREA\",\"death\",\"population\",\"random\"],\n value: \"death\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"viewof radiusRange = columns({\n minval : slider({\n min: 1, \n max: 100, \n step: 1, \n value: 3,\n format: \".0%\",\n title: \"Minimum Radius\"\n }),\n maxval : slider({\n min: 1, \n max: 100,\n step: 1, \n value: 50,\n format: \".0%\",\n title: \"Maximum Radius\"\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1097,"value":"bubbleRadiusRange = [radiusRange.minval, radiusRange.maxval]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"theBubbles = calculateBubbles(bubbleData);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"bubbleData = USstatesJson.features.map(d => ({name: d.properties.NAME, centroid: usGeoGen.centroid(d), radius: bubbleRadiusScale(d.properties[dataLabel]) }) );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"projection = d3.geoAlbersUsa().fitSize([W,H], USstatesJson)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"usGeoGen = d3.geoPath().projection(projection);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"bubbleRadiusScale = d3\n .scaleSqrt()\n .domain(d3.extent(USstatesJson.features, d => d.properties[dataLabel])).range(bubbleRadiusRange)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof projMain_USstates = columns({\n projType : select({\n title: \"World Projection\",\n description: \"Please pick your projection.\",\n options: [\"AzimuthalEqualArea\",\"AzimuthalEquidistant\",\"Gnomonic\",\"Orthographic\",\"Stereographic\",\"EqualEarth\",\"Albers\",\"ConicConformal\",\"ConicEqualArea\",\"ConicEquidistant\",\"Equirectangular\",\"Mercator\",\"TransverseMercator\",\"NaturalEarth1\"],\n value: \"Mercator\"\n }),\n scale : slider({\n title: \"Scale\",\n min: 1,\n max: 1200,\n step: 1,\n value: 100\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"viewof rotation_USstates = columns({\n lambda : slider({\n title: \"Lambda\",\n min: 0,\n max: 360,\n step: 1,\n value: 0\n }),\n phi : slider({\n title: \"Phi\",\n min: 0,\n max: 360,\n step: 1,\n value: 0\n }),\n gamma : slider({\n title: \"Gamma\",\n min: 0,\n max: 360,\n step: 1,\n value: 0\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"viewof projMain2 = columns({\n projType : select({\n title: \"World Projection\",\n description: \"Please pick your projection.\",\n options: [\"AzimuthalEqualArea\",\"AzimuthalEquidistant\",\"Gnomonic\",\"Orthographic\",\"Stereographic\",\"EqualEarth\",\"Albers\",\"ConicConformal\",\"ConicEqualArea\",\"ConicEquidistant\",\"Equirectangular\",\"Mercator\",\"TransverseMercator\",\"NaturalEarth1\"],\n value: \"Mercator\"\n }),\n scale : slider({\n title: \"Scale\",\n min: 1,\n max: 1200,\n step: 1,\n value: 100\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"viewof rotation2 = columns({\n lambda : slider({\n title: \"Lambda\",\n min: 0,\n max: 360,\n step: 1,\n value: 0\n }),\n phi : slider({\n title: \"Phi\",\n min: 0,\n max: 360,\n step: 1,\n value: 0\n }),\n gamma : slider({\n title: \"Gamma\",\n min: 0,\n max: 360,\n step: 1,\n value: 0\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1221,"value":"aid_filteredBubbleData_all = Array.from(aid_to_data.values()).map(d => ({centroid: [d.Longitude, d.Latitude], name: d.Name, radius: d.Altitude}) )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"aid_filteredBubbleData = getRandom(aid_filteredBubbleData_all, 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"function getRandom(arr, n) {\n var result = new Array(n),\n len = arr.length,\n taken = new Array(len);\n if (n > len)\n throw new RangeError(\"getRandom: more elements taken than available\");\n while (n--) {\n var x = Math.floor(Math.random() * len);\n result[n] = arr[x in taken ? taken[x] : x];\n taken[x] = --len in taken ? taken[len] : len;\n }\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"md`## Main calculation of Bubble positions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"function testCircleCollision(centerA, radiusA, centerB, radiusB){\n const dx = centerA[0] - centerB[0];\n const dy = centerA[1] - centerB[1];\n const squaredDist = (dx * dx) + (dy * dy);\n const rsum = radiusA + radiusB;\n return [ squaredDist < (rsum * rsum), squaredDist ];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1288,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1290,"value":"theBubbles_Fast = calculateBubblesKdTreeBased(bubbleData);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"md`### Canvas dimensions and margins`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"margin = ({top: 10, left: 10, bottom: 10, right: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"dimensions = ({width: 900, height: 600})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"W = dimensions.width - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"H = dimensions.height - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md`### Helper Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"function getFeatureRect(mincoords, maxcoords){\n return [\n [maxcoords[0], mincoords[1]], \n [mincoords[0], mincoords[1]],\n [mincoords[0], maxcoords[1]],\n [maxcoords[0], maxcoords[1]],\n [maxcoords[0], mincoords[1]]\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"function getFeatureRectHole(mincoords, maxcoords){\n return [\n [maxcoords[0], mincoords[1]], \n [maxcoords[0], maxcoords[1]],\n [mincoords[0], maxcoords[1]],\n [mincoords[0], mincoords[1]],\n [maxcoords[0], mincoords[1]]\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"function getSVG(useBorder) {\n const svgElement = DOM.svg(dimensions.width, dimensions.height);\n const svg = d3.select(svgElement);\n \n const chart = svg.append(\"g\").attr(\"transform\",`translate(${margin.left},${margin.top})`);\n \n if(useBorder){ svg.append(\"rect\").attr(\"width\",dimensions.width).attr(\"height\",dimensions.height).attr(\"fill\",\"none\").attr(\"stroke\",\"black\");\n }\n \n return [svgElement, chart];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`### Geo Features Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"geodata = d3.json('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson',d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"outline = ({\"type\":\"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`### Bubble Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"aid_to_data = {\n const data = await d3.csv(airports_csv_file,d3.autoType);\n return new Map( data.map(d => [d[\"Airport ID\"], d]))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"airports_csv_file = FileAttachment(\"airports.csv\").url();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"routes_csv_file = FileAttachment(\"routes-3.csv\").url();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md`### USStates`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"USstatePopulationEstimate = d3.csvParse(\n await (await soFetch(\n \"https://www2.census.gov/programs-surveys/popest/datasets/2010-2020/national/totals/sc-est2020-18+pop-res.csv\"\n )).text()\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"USstatePopulationEstimateGroupedByStateCode = d3.group(\n USstatePopulationEstimate,\n d => d.STATE\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"USstateCode = (await d3.csv(\n \"https://gist.githubusercontent.com/dantonnoriega/bf1acd2290e15b91e6710b6fd3be0a53/raw/11d15233327c8080c9646c7e1f23052659db251d/us-state-ansi-fips.csv\"\n)).map(d => ({\n NAME: d.stname,\n STATE: d[\" st\"].trim(),\n USPS: d[\" stusps\"].trim()\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"USstatesJsonRaw = (await soFetch(\n \"https://eric.clst.org/assets/wiki/uploads/Stuff/gz_2010_us_040_00_500k.json\"\n)).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"USstateCodeGroupedByST = d3.group(USstateCode, d => d.STATE)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"US_Covid_data = d3\n .csvParse(\n await (await soFetch(\n \"https://covidtracking.com/data/download/all-states-history.csv\"\n )).text(),\n d3.autoType\n )\n .filter(\n (d, i, A) =>\n d3.timeFormat(\"%Y-%m-%d\")(d.date) == d3.timeFormat(\"%Y-%m-%d\")(A[0].date)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"US_Covid_data_by_USPS = d3.group(US_Covid_data, d => d.state)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"USstatesJson = ({\n type: \"FeatureCollection\",\n features: USstatesJsonRaw.features.map(d => {\n const stateCodeArray = USstateCodeGroupedByST.get(d.properties.STATE);\n if (stateCodeArray) {\n const usps = stateCodeArray[0].USPS;\n const data = US_Covid_data_by_USPS.get(usps);\n d.properties.random = 100;\n d.properties.death = data && data[0].death ? data[0].death : 0;\n d.properties.population = +USstatePopulationEstimateGroupedByStateCode.get(\n d.properties.STATE\n )[0].POPESTIMATE2020;\n } else d.properties.death = 0;\n return d;\n })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md`## Imported Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"import {slider} from '@bartok32/diy-inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"import {select,checkbox, button} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"columns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"import { soFetch } from '@alecglassford/so-fetch'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"_ = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"import {generateKdTreeFromArray, kdNeighborsInRangeWithRadius, kdNeighborsInRange, calcDistance} from '@deamonpog/k-d-trees'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 34:"$33:body"