2e:null 2f:["$","title",null,{"children":"COVID-19 Personal Awareness | Nouran Soliman | Observable"}] 34:T61d,grid = html`

Food

Exercise

% Quarantine

Hospital Capacity

`35:T4118,{ const width = document.getElementById("fullScreen").clientWidth * 0.7; const height = 550; //width * (550/650); const fx = 950/width; const fy = 800/height; const context = DOM.context2d(width, height); //top dashboard const pFood = html`

`; (async () => { let sum = 0; let n = 10000; let s = 5000; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pFood.style.width = p + "%"; if(p < 20) pFood.style.background = "red"; else pFood.style.background = "green"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pFood.style.width = p + "%"; if(p < 20) pFood.style.background = "red"; else pFood.style.background = "green"; await new Promise(requestAnimationFrame); } } s = k; } pFood.value = sum; pFood.dispatchEvent(new CustomEvent("input")); pFood.style.background = "green"; })(); const pExer = html`

`; (async () => { let sum = 0; let n = 10000; let s = 0; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pExer.style.width = p + "%"; if(p < 20) pExer.style.background = "red"; else pExer.style.background = "green"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pExer.style.width = p + "%"; if(p < 20) pExer.style.background = "red"; else pExer.style.background = "green"; await new Promise(requestAnimationFrame); } } s = k; } pExer.value = sum; pExer.dispatchEvent(new CustomEvent("input")); pExer.style.background = "green"; })(); const pQuar = html`

`; (async () => { let sum = 0; let n = 10000; let s = 10000; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pQuar.style.width = p + "%"; if(p < 20) pQuar.style.background = "red"; else pQuar.style.background = "green"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pQuar.style.width = p + "%"; if(p < 20) pQuar.style.background = "red"; else pQuar.style.background = "green"; await new Promise(requestAnimationFrame); } } s = k; } pQuar.value = sum; pQuar.dispatchEvent(new CustomEvent("input")); pQuar.style.background = "green"; })(); const pHosp = html`

`; (async () => { let sum = 0; let n = 10000; let s = 5000; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pHosp.style.width = p + "%"; if(p < 50) pHosp.style.background = "green"; else pHosp.style.background = "red"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pHosp.style.width = p + "%"; if(p < 50) pHosp.style.background = "green"; else pHosp.style.background = "red"; await new Promise(requestAnimationFrame); } } s = k; } pHosp.value = sum; pHosp.dispatchEvent(new CustomEvent("input")); pHosp.style.background = "green"; })(); document.getElementById("food").innerHTML = ""; document.getElementById("exer").innerHTML = ""; document.getElementById("quar").innerHTML = ""; document.getElementById("hospCap").innerHTML = ""; document.getElementById("hour").innerHTML = ""; document.getElementById("day").innerHTML = ""; document.getElementById("week").innerHTML = ""; document.getElementById("food").appendChild(pFood); document.getElementById("exer").appendChild(pExer); document.getElementById("quar").appendChild(pQuar); document.getElementById("hospCap").appendChild(pHosp); //right dashboard let sldMask = slider({ title: '1. Wear Masks! 😷 : Percentage of population wearing masks', desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 100, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#1f9aad', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 10 ? '😰' : objs.value < 30 ? '☹️' : objs.value < 50 ? '😐' : objs.value < 70 ? '🙂' : objs.value < 90 ? '😄' : objs.value < 99 ? '😷' : '💯'; objs.desc.textContent = objs.value + '%'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); let sldHnds = slider({ title: '2. Wash Hands 👏 : Percentage of population washing hands', desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 100, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#40f5ce', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 10 ? '😰' : objs.value < 30 ? '☹️' : objs.value < 50 ? '😐' : objs.value < 70 ? '🙂' : objs.value < 90 ? '😄' : objs.value < 99 ? '👏' : '💯'; objs.desc.textContent = objs.value + '%'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); let sldSD = slider({ title: '3. Social Distance: How many feet of distance do you maintain?', descStyle: { 'pointer-events': 'none' }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#1f9aad', '#F2F2F2'] }, oninput: objs => { objs.output.textContent = objs.value == 6 ? 'Congrats, you did it! 🚶---🚶' : 'Only ' + (6 - objs.value) + ' more ft to go!'; //Not enough distance yet 👬. objs.desc.textContent = objs.value == 0 ? "LET'S COUNT TO 6!" : d3.range(objs.value) .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + '...') .reduce((a, b) => a + ' ' + b, ''); }}); let radius = sldSD.value * 3; sldSD.onchange = function() { radius = this.value * 3; } let sldBds = slider({ titleStyle: { 'font-size': '11px' }, min: 0, max: 20, step : 1, divStyle: { 'display': 'inline-block', 'text-align': 'center', 'margin-left': '3.5px' }, sliderStyle: { 'width': '100px', 'background': '#FFA5D0' }, theme: 'white-round', oninput: objs => { mutable HOSPITAL_BEDS = Array(+objs.value + 1).join('🛌'); } }); let sldResA = slider({ title: 'Resources Available', desc: "", min: 0, max: 100, step: 1, divAttrs: { id: 'slider1' }, divStyle: { display: 'inline-block' }, sliderStyle: { width: '200px' }, theme: 'white-round', //or default-round oninput: objs => { let secondSlider = d3.select('#slider2'); if (!secondSlider.empty()) { secondSlider.node().update(100 - objs.value); secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress); objs.slider.style.background = d3.interpolateCool(objs.progress); if (objs.value >= 50) { objs.output.textContent = '💃'; secondSlider.select('span').node().textContent = '🕺'; } else { objs.output.textContent = '🕺'; secondSlider.select('span').node().textContent = '💃'; } } else { objs.slider.style.background = d3.interpolateCool(objs.progress); objs.output.textContent = '💃'; }; }}); let sldResU = slider({ title: 'Resources Used', desc: '', min: 0, max: 100, step: 1, value: 50, divAttrs: { id: 'slider2' }, divStyle: { display: 'inline-block' }, sliderStyle: { width: '200px' }, theme: 'white-round', //or `default-round oninput: objs => { let secondSlider = d3.select('#slider1'); if (!secondSlider.empty()) { secondSlider.node().update(100 - objs.value); secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress); objs.slider.style.background = d3.interpolateCool(objs.progress); if (objs.value <= 50) { objs.output.textContent = '🕺'; secondSlider.select('span').node().textContent = '💃'; } else { objs.output.textContent = '💃'; secondSlider.select('span').node().textContent = '🕺'; }; } else { objs.slider.style.background = d3.interpolateCool(objs.progress); objs.output.textContent = '🕺'; }; }}); document.getElementById("masks").innerHTML = ""; document.getElementById("hands").innerHTML = ""; document.getElementById("socialDist").innerHTML = ""; // document.getElementById("resources").innerHTML = ""; document.getElementById("masks").appendChild(sldMask); document.getElementById("hands").appendChild(sldHnds); document.getElementById("socialDist").appendChild(sldSD); // document.getElementById("resources").appendChild(sldResA); // document.getElementById("resources").appendChild(sldResU); context.canvas.onmousemove = (e) => { mutable mousePos = {x: e.offsetX, y: e.offsetY}; } context.lineJoin = "round"; context.lineCap = "round"; const places = [{name: 'school', x1: 29/fx, y1: 155/fy, x2: 185/fx, y2: 13/fy, x3: 303/fx, y3:138/fy, x4: 156/fx, y4: 225/fy}, {name: 'cafe', x1: 354/fx, y1: 140/fy, x2: 345/fx, y2: 9/fy, x3: 685/fx, y3:120/fy, x4: 504/fx, y4: 225/fy}, {name: 'phar', x1: 196/fx, y1: 296/fy, x2: 319/fx, y2: 175/fy, x3: 453/fx, y3:299/fy, x4: 323/fx, y4: 372/fy}, {name: 'bank', x1: 701/fx, y1: 126/fy, x2: 820/fx, y2: 18/fy, x3: 925/fx, y3:114/fy, x4: 806/fx, y4: 186/fy}, {name: 'hosp', x1: 32/fx, y1: 490/fy, x2: 197/fx, y2: 339/fy, x3: 308/fx, y3:477/fy, x4: 155/fx, y4: 564/fy}, {name: 'poli', x1: 601/fx, y1: 290/fy, x2: 718/fx, y2: 176/fy, x3: 924/fx, y3:319/fy, x4: 795/fx, y4: 398/fy}, {name: 'gas', x1: 364/fx, y1: 428/fy, x2: 543/fx, y2: 312/fy, x3: 649/fx, y3:383/fy, x4: 471/fx, y4: 486/fy}, {name: 'cremH', x1: 30/fx, y1: 705/fy, x2: 169/fx, y2: 632/fy, x3: 290/fx, y3:721/fy, x4: 171/fx, y4: 786/fy}, {name: 'redH', x1: 245/fx, y1: 583/fy, x2: 371/fx, y2: 504/fy, x3: 488/fx, y3:607/fy, x4: 383/fx, y4: 665/fy}, {name: 'fire', x1: 608/fx, y1: 489/fy, x2: 762/fx, y2: 401/fy, x3: 865/fx, y3:487/fy, x4: 733/fx, y4: 563/fy}, {name: 'mgH', x1: 401/fx, y1: 731/fy, x2: 589/fx, y2: 594/fy, x3: 652/fx, y3: 699/fy, x4: 500/fx, y4: 787/fy}, {name: 'shop', x1: 667/fx, y1: 675/fy, x2: 798/fx, y2: 553/fy, x3: 926/fx, y3:682/fy, x4: 800/fx, y4: 753/fy}] let tadpoles = new Array(n).fill().map(() => ({ vx: (Math.random() - 0.5) * v, vy: (Math.random() - 0.5) * v, px: new Array(m), py: new Array(m), dsx: new Array(m), dsy: new Array(m), src: 0, dst: 11, count: 0, color: 'blue' })); for (let i = 0; i < n; i++){ let iSrc = tadpoles[i].src = between(0, 11); let iDst = tadpoles[i].dst = between(0, 11); tadpoles[i].px.fill(between((places[iSrc].x1 + places[iSrc].x4)/2, (places[iSrc].x2 + places[iSrc].x3)/2)); tadpoles[i].py.fill(between((places[iSrc].y1 + places[iSrc].y2)/2, (places[iSrc].y3 + places[iSrc].y4)/2)); tadpoles[i].dsx.fill(between((places[iDst].x1 + places[iDst].x4)/2, (places[iDst].x2 + places[iDst].x3)/2)); tadpoles[i].dsy.fill(between((places[iDst].y1 + places[iDst].y2)/2, (places[iDst].y3 + places[iDst].y4)/2)); } let temp = []; let cycle = 0 //debugging loop // for (let t of tadpoles) { // console.log("source: ", t.px, t.py); // console.log("Destination: ", t.dsx, t.dsy); // } while (true) { context.clearRect(0, 0, width, height); context.drawImage(img, 0, 0, width, height); let td = 0 for (let t of tadpoles) { // console.log("tadpole: ", td); if (reachedDst(t)){ // return 0; tadpoles[td].src = t.src = t.dst; tadpoles[td].px = t.px; //= t.dsx tadpoles[td].py = t.py; //= t.dsy tadpoles[td].dst = t.dst = between(0, 11); t.dsx.fill(between((places[t.dst].x1 + places[t.dst].x4)/2, (places[t.dst].x2 + places[t.dst].x3)/2)); tadpoles[td].dsx = t.dsx; t.dsy.fill(between((places[t.dst].y1 + places[t.dst].y2)/2, (places[t.dst].y3 + places[t.dst].y4)/2)); tadpoles[td].dsy = t.dsy; } let dx = t.vx = tadpoles[td].vx = ((t.dsx - t.px)/t.dsx) * v; let dy = t.vy = tadpoles[td].vy = ((t.dsy - t.py)/t.dsy) * v; // console.log("changes: ", dx, dy, "currPos: ", t.px, t.py, "dest: ", t.dsx, t.dsy, "diff: ", t.dsx - t.px, (t.dsy - t.px)); let x = t.px[0] += dx; let y = t.py[0] += dy; let speed = Math.sqrt(dx * dx + dy * dy); const count = speed * 10; const k1 = -5 - speed / 3; // Bounce off the walls. if (x < 0 || x > width) t.vx *= -1; if (y < 0 || y > height) t.vy *= -1; //social distancing for (let i = 0; i < n; ++i){ if (i == td) continue; let p2x = tadpoles[i].px[0]; let p2y = tadpoles[i].py[0]; if (i > td){ p2x += tadpoles[i].vx; p2y += tadpoles[i].vy; } // console.log(t.px); // console.log(p2x); let dist = Math.sqrt(Math.pow(Math.abs(x-p2x), 2) + Math.pow(Math.abs(y-p2x), 2)) if (dist < 12){ t.color = 'red'; } } // Swim! for (var j = 1; j < m; ++j) { const vx = x - t.px[j]; const vy = y - t.py[j]; const k2 = Math.sin(((t.count += count) + j * 3) / 300) / speed; t.px[j] = (x += dx / speed * k1) - dy * k2; t.py[j] = (y += dy / speed * k1) + dx * k2; speed = Math.sqrt((dx = vx) * dx + (dy = vy) * dy); } // Head context.save(); context.translate(t.px[0], t.py[0]); context.rotate(Math.atan2(t.vy, t.vx)); context.beginPath(); context.ellipse(0, 0, 5, 5, 0, 0, 2 * Math.PI); context.fillStyle = t.color; context.fill(); context.restore(); context.beginPath(); context.arc(t.px[0], t.py[0], radius, 0, 2 * Math.PI); context.strokeStyle = t.color; context.stroke(); // Body context.beginPath(); context.moveTo(t.px[0], t.py[0]); for (let i = 1; i < 3; ++i) context.lineTo(t.px[i], t.py[i]); context.lineWidth = 4; context.strokeStyle = t.color; context.stroke(); // Tail context.beginPath(); context.moveTo(t.px[0], t.py[0]); for (let i = 1; i < m; ++i) context.lineTo(t.px[i], t.py[i]); context.lineWidth = 2; context.strokeStyle = t.color; context.stroke(); td++; } cycle++; yield context.canvas; document.getElementById("mainScene").innerHTML = ""; document.getElementById("mainScene").appendChild(context.canvas); if(cycle == 100) // return 0; cycle = 0; } }36:T8bf,input = (settings = {}, type) => { if (typeof settings != 'object') return 'Please provide a value!'; let theme = settings.theme ? settings.theme : 'default', initialize = settings.initialize != undefined ? settings.initialize : true, on = type == 'button' ? 'onclick' : type == 'select' ? 'onchange' : 'oninput'; setGlobalStyles(theme); let objs = { title: createElement('title', settings.title, theme, settings), desc: createElement('desc', settings.desc, theme, settings), output: type == 'slider' ? createElement('output', settings.value, theme, settings) : type == 'checkbox' ? createElement('output', settings.label, theme, settings) : '', settings, value: settings.value }; objs.additionalElement = settings.additionalElement ? createElement(settings.additionalElement.name, settings.additionalElement.value, theme, settings) : ''; objs[type] = createElement(type, settings.value, theme, settings), objs.div = createElement('div', [objs.title, objs[type], objs.output, objs.additionalElement, objs.desc], theme, settings); objs[type][on] = () => { if (!settings.preventUpdate) { objs.div.update(); }; if (type == 'slider') objs.progress = (objs.value - settings.min) / (settings.max - settings.min); if (settings.utilities) { for (let [key, func] of Object.entries(settings.utilities)) { func(settings[key], objs); }; }; if (settings[on]) settings[on](objs); }; objs.div.update = (value = objs[type].value || settings.value) => { value = isNaN(value) ? value : +value; if (type == 'checkbox' && objs.value != false) value = false; else if (type == 'checkbox') value = settings.value; objs.value = value; if (type != 'select') objs[type].value = value; objs.div.value = objs.value; if (type != 'checkbox' && objs.output) objs.output.textContent = objs.value; objs.div.dispatchEvent(new CustomEvent('input')); }; if (settings.preventUpdate) objs.div.update(); if (initialize) { objs[type][on](); } else if (!settings.preventUpdate) { objs.div.update(); }; return objs.div; }37:T62e,createElement = (type, text = '', theme = '', settings = '') => { if (text == undefined) return ''; text = type != 'slider' && type != 'checkbox' ? text : ''; let typesMapping = { title: { tag: 'div', mandatoryAttrs: {class: 'title'} }, button: { tag: 'button', mandatoryAttrs: {} }, checkbox: { tag: 'input', mandatoryAttrs: { type: 'checkbox', value: settings.value } }, select: { tag: 'select', mandatoryAttrs: {} }, slider: { tag: 'input', mandatoryAttrs: { type: 'range', min: settings.min, max: settings.max, step: settings.step, value: settings.value } }, output: { tag: 'span', mandatoryAttrs: {class: 'output'} }, desc: { tag: 'div', mandatoryAttrs: {class: 'desc'} }, div: { tag: 'div', mandatoryAttrs: {class: `input-${theme}`} }, caret: { tag: 'svg', mandatoryAttrs: {class : 'caret'} } }; let el = html`<${typesMapping[type].tag}>${text}`; Object.entries(typesMapping[type].mandatoryAttrs).forEach(d => el.setAttribute(d[0], d[1])); if (typeof settings[type + 'Attrs'] == 'object') Object.entries(settings[type + 'Attrs']).forEach(d => { if (d[0] == 'class') el.classList.add(d[1]); else el.setAttribute(d[0], d[1]) }); if (typeof settings[type + 'Style'] == 'object') Object.entries(settings[type + 'Style']).forEach(d => el.style[d[0]] = d[1]); return el; }38:T46d,highlightSlider = (settings, objs) => { settings.lowerAdj = 100 * (settings.lower - objs.settings.min) / (objs.settings.max - objs.settings.min); settings.upperAdj = 100 * (settings.upper - objs.settings.min) / (objs.settings.max - objs.settings.min); if (settings.preventUpdate) objs.settings.preventUpdate = true; if (+objs.slider.value == settings.lower || +objs.slider.value == settings.upper) { objs.div.update(objs.slider.value); }; if (+objs.slider.value < settings.lower || +objs.slider.value > settings.upper) { objs.div.update(objs.slider.value); objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.lowerAdj}%, ${settings.colors.inactive} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } else { objs.slider.style.background = `linear-gradient(90deg, ${settings.colors.normal} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.lowerAdj}%, ${settings.colors.active} ${settings.upperAdj}%, ${settings.colors.normal} 0%)`; } }39:Tbd8,themes = ` .input-default button, .input-white button, .input-default select, .input-white select { outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0.9; height: 30px; margin-left: 0px; padding: 5px 10px 5px 10px; background: #EFEFEF; border: 0.5px solid white; border-radius: 5px; color: #262626; font-family: Avenir, Arial; font-size: 12px; font-weight: 600; cursor: pointer; } .input-white button, .input-white select { color: white; } .input-default select, .input-white select { padding-right: 29px; } .input-default .caret, .input-white .caret { width: 12px; height: 10px; margin-left: -24px; fill: black; pointer-events: none; opacity: 0.75; } .input-white .caret { fill: white; } .input-default input[type = 'range'], .input-default-thin input[type = 'range'], .input-default-round input[type = 'range'], .input-white input[type = 'range'], .input-white-thin input[type = 'range'], .input-white-round input[type = 'range'] { appearance: none; -webkit-appearance: none; width: 200px; height: 5px; border-radius: 1px; background: #E5E5E5; } .input-default input[type = 'range']::-webkit-slider-thumb, .input-white input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 5px; } .input-white input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-thin input[type = 'range']::-webkit-slider-thumb, .input-white-thin input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 7.5px; height: 20px; background: #545454; cursor: pointer; border: none; border-radius: 2.5px; } .input-white-thin input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } .input-default-round input[type = 'range']::-webkit-slider-thumb, .input-white-round input[type = 'range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; background: #545454; cursor: pointer; border: none; border-radius: 7.5px; } .input-white-round input[type = 'range']::-webkit-slider-thumb { background: #FCFCFC; border: 1px solid #545454; } input[type = 'range']:focus { outline: none; } .output { margin-left: 5px; color: #262626; font-family: Courier; font-size: 14px; } .title { margin-bottom: 3.5px; margin-left: 2.5px; color: black; font-family: Avenir, Arial; font-size: 14px; font-weight: 600; } .desc { margin-top: 6px; margin-left: 2.5px; color: #4C4C4C; font-family: Avenir, Arial; font-size: 12px; } `3a:[{"id":"269ee262daebed772dff7d659fd7e53ab8c6da8b20b52c28ab98d6959daf27debb6d189552b54fac56759c442278e6c4a431c75b367186973085fab1969e0321","href":"https://static.observableusercontent.com/files/269ee262daebed772dff7d659fd7e53ab8c6da8b20b52c28ab98d6959daf27debb6d189552b54fac56759c442278e6c4a431c75b367186973085fab1969e0321","name":"city@1.jpg","type":"image/jpeg","lastModified":1587678613864.146,"size":345406}] 32:{"id":"bc1991edf5be953d","slug":"tadpoles","title":"COVID-19 Personal Awareness","thumbnail":"012858bf6b4e6f40c9277d4ac927ff8c1247fb048c7c8b7739a2c7ebbed456a8","access_level":"public","create_time":"$D2020-04-20T19:39:35.811Z","update_time":"$D2020-04-25T21:53:32.126Z","view_time":null,"first_public_time":"$D2020-04-23T17:37:42.071Z","fork":{"id":"89d1029360df333a","slug":"tadpoles","title":"Tadpoles","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"eb2d3fd92e0a3c6f","login":"nouran-soliman","name":"Nouran Soliman","avatar_url":"https://avatars-next.observableusercontent.com/d0fe7184fda08b9827531452ef76628a4dff33978b58cc5502c60517089a0ade","tier":"starter_2024"},"version":647,"publish_version":647,"role":null,"authored":false,"authors":[{"type":"individual","id":"d9fbc5175445c2af","login":"nouran-soliman","name":"Nouran Soliman","avatar_url":"https://avatars-next.observableusercontent.com/74e6f647ff048979a87bf26ebbc84f4fdf357e8dc6ea6ebdca9c8a5906028841","tier":null}],"members":[{"type":"individual","id":"d9fbc5175445c2af","login":"nouran-soliman","name":"Nouran Soliman","avatar_url":"https://avatars-next.observableusercontent.com/74e6f647ff048979a87bf26ebbc84f4fdf357e8dc6ea6ebdca9c8a5906028841","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"COVID-19 Personal Awareness","cells":[{"id":631,"value":"md` # COVID-19 Personal Awareness\n [Presentation Slides](https://docs.google.com/presentation/d/1wYo023ltJmeH51osnqCnJGftjaGpbeY2Aje74xQz57A/edit?usp=sharing)\n\n## Introduction to Problem\n\n## Project Goal/Vision\n\n## Narrative\n\n## Simulation Model and Assumptions\n\n## Interactivity\n\n## Anticipated Scope\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"mutable mousePos = ({x: width / 2, y: 800 / 2})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"mutable HOSPITAL_BEDS = ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"n = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"m = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"v = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"arrivalDist = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"range = DOM.range(0, 10, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"angle = Generators.input(range)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":" d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof r = slider({\n min: 0, \n max: 20, \n step: 1, \n value: 10, \n title: \"Social distancing radius\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof image = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"function fetchImage(src) {\n return new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.src = src;\n image.onload = () => resolve(image);\n image.onerror = reject;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"img = FileAttachment(\"city@1.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"function between(min, max) { \n min = Math.floor(min);\n max = Math.floor(max);\n return Math.floor(\n Math.random() * (max - min + 1) + min\n )\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"fullscreen = {\n const button = html`