2d:null 2e:["$","title",null,{"children":"COVID-19 Personal Awareness | dishitaturakhia | Observable"}] 33:T6b4,grid = html`

Food

Exercise

Hospital Capacity

`34:Td3c,md `## Introduction to Problem Recent COVID-19 pandemic has brought to attention the importance of following the pracautionary guidelines of washing hands, wearing masks and maintaining social distancing at individual level. As the economy opens up and people start going out, it is important for everyone to be aware of personal responsibility in avoiding spread of COVID-19. However, people usually fail to realize the impact every action can have on a community level. We want to highlight that "every individual's action and community action has a huge impact" on the outcome (of infection rate and severity of infections). ## Project Goal/Vision In this project, we want to explore how interactive visualization can be used to create personal awareness about following the COVID-19 prevention guidelines. Through our personal awareness game, our goal is to make people to realize how significant it is for every individual to adhere to the guidelines because a single person's actions can impact the whole community. ## Narrative We decided to use the game format because it invites the user to play around with the parameters in an engaging way. By seeing how each decision made by the user impacts the infection temporally (every day and over a span of 5 weeks), our simulation uses visualization for creating awareness and displaying information. Instead of using abstracted version of dot simulation (discussed in class), we further decided to contextualize the game to represent a realistic scenario of a town. We represented the common places visited in the game context, such as hospital, pharmacy, grocery stores, parks, school, cafe, etc. Based on the level of shutdown chosen, we simulate the dot movements in those respective areas. For example, in complete shutdown (with essential businees open), the dots move between houses, parks, pharmacy, grocery store and hospitals only. While in fully open economy, the dots move in all areas. ## Interactivity For interactivity, we chose 3 main areas of decision making for the user - 1. individual decisions, 2. community decisions, and 3. level of shutdown. Within the individual and community decisions, we further have decision sliders for the precautionary measures of a. wearing masks, b. washing hands and c. maintaining social distance of 6ft. Based on the decisions made by the user, the visualization shows the impact of the decisions on infections and resources against the condition of normal life, i.e. without any precautions in a fully open economy. For the movement of dats, we also added the animation of dots bouncing off each other if they observe 6ft of social distancing, thus slowing down infection rate. This interactivity creates an awareness of social distancing between individuals. ## Simulation Model and Data Assumptions ## Anticipated Scope The sketch image below shows our final vision of the game, narrative and interactivity. The final game would help the user visualize the impact of individual actions, community actions and level of shutdown on the infection numbers. These parameters are interactive sliders in the bottom panel. The imapct of the user actions is visualized in the right panel with features such as day ticker, comparative bar chart of daily numbers based on parameters v/s normal conditions (if there were no precaustions taken), and the resources used. `35:T4eba,// color scheme: red: '#ff6e6e' | dark teel green : '#40f5ce' | blue :#03d3fc { const width = document.getElementById("fullScreen").clientWidth * 0.7; const height = 550; //width * (550/650); const fx = 660/width; const fy = 550/height; const context = DOM.context2d(width, height); //right 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 = "#ff6e6e"; else pFood.style.background = "#1f9aad"; 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 = "#ff6e6e"; else pFood.style.background = "#1f9aad"; await new Promise(requestAnimationFrame); } } s = k; } pFood.value = sum; pFood.dispatchEvent(new CustomEvent("input")); pFood.style.background = "#1f9aad"; })(); 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 = "#ff6e6e"; else pExer.style.background = "#1f9aad"; 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 = "#ff6e6e"; else pExer.style.background = "#1f9aad"; await new Promise(requestAnimationFrame); } } s = k; } pExer.value = sum; pExer.dispatchEvent(new CustomEvent("input")); pExer.style.background = "#1f9aad"; })(); // 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 = "#ff6e6e"; // else pQuar.style.background = "#1f9aad"; // 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 = "#ff6e6e"; // else pQuar.style.background = "#1f9aad"; // await new Promise(requestAnimationFrame); // } } // s = k; // } // pQuar.value = sum; // pQuar.dispatchEvent(new CustomEvent("input")); // pQuar.style.background = "#1f9aad"; // })(); 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 = "#1f9aad"; else pHosp.style.background = "#ff6e6e"; 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 = "#1f9aad"; else pHosp.style.background = "#ff6e6e"; await new Promise(requestAnimationFrame); } } s = k; } pHosp.value = sum; pHosp.dispatchEvent(new CustomEvent("input")); pHosp.style.background = "#1f9aad"; })(); 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); //bottom dashboard -------------------------------------------------------------------------- // define the individual sliders ---------- let sldIndMask = slider({ title: '😷 Did you use masks?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 1, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#1f9aad', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 0.25 ? 'No 😰' : objs.value < 0.5 ? 'Maybe 😐' : 'Yes 😷'; // 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 < 0.1 ? 0.05 : objs.value > 1 ? -0.05 : 0) + 'px'; }}); let sldIndHnds = slider({ title: '👏 : Did you wash your hands?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 1, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#40f5ce', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 0.10 ? 'No 😰' : objs.value < 0.50 ? 'Maybe 😐' : 'Yes 👏'; // 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 sldIndSD = 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 indradius = sldIndSD.value * 3; sldIndSD.onchange = function() { indradius = this.value * 3; } // define the community sliders ---------- 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 = '🕺'; }; }}); //getElementById for sliders ---------- document.getElementById("indmasks").innerHTML = ""; document.getElementById("indhands").innerHTML = ""; document.getElementById("indsocialDist").innerHTML = ""; document.getElementById("masks").innerHTML = ""; document.getElementById("hands").innerHTML = ""; document.getElementById("socialDist").innerHTML = ""; // document.getElementById("resources").innerHTML = ""; document.getElementById("indmasks").appendChild(sldIndMask); document.getElementById("indhands").appendChild(sldIndHnds); document.getElementById("indsocialDist").appendChild(sldIndSD); 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: 'gas', x1: 70/fx, y1: 55/fy, x2: 165/fx, y2: 0/fy, x3: 240/fx, y3:45/fy, x4: 139/fx, y4: 98/fy}, {name: 'school', x1: 287/fx, y1: 461/fy, x2: 377/fx, y2: 377/fy, x3: 458/fx, y3:458/fy, x4: 375/fx, y4: 505/fy}, {name: 'cafe', x1: 465/fx, y1: 425/fy, x2: 590/fx, y2: 350/fy, x3: 655/fx, y3:428/fy, x4: 582/fx, y4: 482/fy}, {name: 'cafe2', x1: 433/fx, y1: 78/fy, x2: 590/fx, y2: 340/fy, x3: 685/fx, y3:120/fy, x4: 504/fx, y4: 225/fy}, {name: 'phar', x1: 300/fx, y1: 180/fy, x2: 395/fx, y2: 105/fy, x3: 455/fx, y3:165/fy, x4: 375/fx, y4: 220/fy}, {name: 'bank', x1: 300/fx, y1: 340/fy, x2: 375/fx, y2: 270/fy, x3: 435/fx, y3:300/fy, x4: 375/fx, y4: 375/fy}, {name: 'hosp', x1: 430/fx, y1: 250/fy, x2: 550/fx, y2: 130/fy, x3: 630/fx, y3:230/fy, x4: 500/fx, y4: 295/fy}, {name: 'poli', x1: 175/fx, y1: 110/fy, x2: 235/fx, y2: 50/fy, x3: 340/fx, y3:100/fy, x4: 305/fx, y4: 180/fy}, {name: 'fire', x1: 75/fx, y1: 205/fy, x2: 155/fx, y2: 140/fy, x3: 235/fx, y3:195/fy, x4: 140/fx, y4: 240/fy}, {name: 'shop', x1: 385/fx, y1: 375/fy, x2: 375/fx, y2: 305/fy, x3: 535/fx, y3:370/fy, x4: 460/fx, y4: 420/fy}, {name: 'cremH', x1: 15/fx, y1: 340/fy, x2: 255/fx, y2: 210/fy, x3: 325/fx, y3:255/fy, x4: 90/fx, y4: 380/fy}, {name: 'redH', x1: 5/fx, y1: 495/fy, x2: 250/fx, y2: 355/fy, x3: 315/fx, y3:400/fy, x4: 45/fx, y4: 545/fy}, {name: 'mgH', x1: 1/fx, y1: 115/fy, x2: 60/fx, y2: 80/fy, x3: 125/fx, y3: 125/fy, x4: 5/fx, y4: 185/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: '#03d3fc' })); 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 = '#ff6e6e'; } } // 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":"2a6b7c1d58c5f475875397c3368175c51bc9623748bd0ce2caf2da0850e76006168cea097876dcc1f3c7b0bd19ffde357b9e479c47f66c19ee89ab8caef46443","href":"https://static.observableusercontent.com/files/2a6b7c1d58c5f475875397c3368175c51bc9623748bd0ce2caf2da0850e76006168cea097876dcc1f3c7b0bd19ffde357b9e479c47f66c19ee89ab8caef46443","name":"background._newai-02.png","type":"image/png","lastModified":1587899267033.807,"size":1363480},{"id":"a12d2ae7e2a21f1bbba2c2a15ae69ded9c769386f9d25d3fc2731459db1cac3e4a9d020fb9bc63a3d8d732189f957ebac1e54249172b928b3171d90c0c7b226b","href":"https://static.observableusercontent.com/files/a12d2ae7e2a21f1bbba2c2a15ae69ded9c769386f9d25d3fc2731459db1cac3e4a9d020fb9bc63a3d8d732189f957ebac1e54249172b928b3171d90c0c7b226b","name":"background-02.png","type":"image/png","lastModified":1587900809168.089,"size":377261},{"id":"00adf465fdb4a66730a87b7792894c54945e1bb20aac182c53ed8a17751ea80fe0067d1470c1bbb3eb0bb1fb7383be257dd01fe05c44d81700f6e9fc28d4ceef","href":"https://static.observableusercontent.com/files/00adf465fdb4a66730a87b7792894c54945e1bb20aac182c53ed8a17751ea80fe0067d1470c1bbb3eb0bb1fb7383be257dd01fe05c44d81700f6e9fc28d4ceef","name":"background-02.jpg","type":"image/jpeg","lastModified":1587902363677.501,"size":481923},{"id":"3374aa29a545960876a9904d867b5eeef978d0ec4ca652006745d84dfb431e1170a1f0208b759636d2e27f9e7c9c2cf88d46efb361b43939e082bc454567e7dd","href":"https://static.observableusercontent.com/files/3374aa29a545960876a9904d867b5eeef978d0ec4ca652006745d84dfb431e1170a1f0208b759636d2e27f9e7c9c2cf88d46efb361b43939e082bc454567e7dd","name":"FinalScopeSketch.PNG","type":"image/png","lastModified":1587927638972.825,"size":726633},{"id":"763d40c803364ac1bae37d4a4ea56e7f7839005fc913f9dac28580fb12ead9caef7beb96c654c8f971753fe904d37e3a4c5bec7ffce024ac6192659285ace9b4","href":"https://static.observableusercontent.com/files/763d40c803364ac1bae37d4a4ea56e7f7839005fc913f9dac28580fb12ead9caef7beb96c654c8f971753fe904d37e3a4c5bec7ffce024ac6192659285ace9b4","name":"FinalScopeSketch2.PNG","type":"image/png","lastModified":1587932686363.487,"size":885615}] 31:{"id":"b0dafe3886e72144","slug":"covid-19-personal-awareness","title":"COVID-19 Personal Awareness","thumbnail":"88865a6bdaeda001093197f306b57d7082a333afdaf46900bcf765928ee66446","access_level":"public","create_time":"$D2020-04-26T11:07:20.233Z","update_time":"$D2020-04-26T23:58:04.071Z","view_time":null,"first_public_time":"$D2020-04-26T11:15:17.726Z","has_unpublished_edits":null,"fork":{"id":"bc1991edf5be953d","slug":"tadpoles","title":"COVID-19 Personal Awareness","owner":{"id":"eb2d3fd92e0a3c6f","login":"nouran-soliman","name":"Nouran Soliman"}},"stars":3,"starred":false,"owner":{"type":"team","id":"be32f447d5d01bce","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":"starter_2024"},"version":770,"publish_version":770,"role":null,"authored":false,"authors":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null}],"members":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"COVID-19 Personal Awareness","cells":[{"id":631,"value":"md` # COVID-19 Personal Awareness\n(6.894 Project by Dishita Turakhia and Nouran Soliman)\n\n [Presentation Slides](https://docs.google.com/presentation/d/1wYo023ltJmeH51osnqCnJGftjaGpbeY2Aje74xQz57A/edit?usp=sharing)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md` ## Personal Awareness Game\nYour city is facing COVID-19 infection. Adjust the sliders below to understand the effect of taking precautions on the spread of infection rate. \n\n(Current version of game below)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"sketchimg = FileAttachment(\"FinalScopeSketch2.PNG\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"mutable mousePos = ({x: width / 2, y: 800 / 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"console.log(document.getElementById(\"fullScreen\").clientWidth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"mutable HOSPITAL_BEDS = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"n = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"m = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"v = 10","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"img = FileAttachment(\"background-02.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`