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

Simulating Day 0...

NO precautions: % of population infected over time (averaged over 20)

Impact of your actions: % of population infected over time

Your Actions

Community Actions

Level of Shutdown

style="height:40%;">

Legend

style="height:40px;">

`35:T13c8,md `## Summary In this project, we have developed an \textit{interactive datavis game} to create awareness about taking precautions against spread of COVID-19. Our COVID-19 game allows the users to understand the effect of precautionary actions taken by them and the community by simulating the daily spread on COVID-19 through a game. The users can first select different levels of precautions such as wearing masks, washing hands and social distancing, then they can simulate the spread and finally observe the impact of their actions on number of infections with a daily graph. Thus, we use a gamified narrative, interactive simulation and statistical visualization to create personal awareness of taking the precautionary actions to avoid the spread of COVID-19. ## Introduction to Problem Recent COVID-19 pandemic has brought to attention the importance of following the precautionary 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 that affects everyone (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 COVID-19 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. Our vision is to make the datavis engaging for the users and we achieve this by (1) using a gamified narrative design of simulating infections within a city, with (2) an interactive environment that requires user input of choices for the simulation model to compute infections and (3) a graph visualization that shows the impact of the user choices on the daily infection numbers. ## Game 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, our simulation uses visualization for creating awareness and displaying information. Instead of using abstracted version of dot simulation (for example in this [Washington Post coronavirus simulator](https://www.washingtonpost.com/graphics/2020/world/corona-simulator/)), we further decided to contextualize the game to represent a realistic scenario of a town as in this [pandemic game example](https://peopleofthepandemicgame.com/). 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 only essential businesses open), the dots move between houses, parks, pharmacy, grocery store and hospitals only. While in fully open economy, the dots move in all areas. ## Playful 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. The user can also enter their age. Futhermore, the speed of dot movement represents the age distribution of the population (faster moving odts represent younger population). ## Simulation Model and Data Assumptions ## User Study ## Contributions Through our personal awareness game, our goal was 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. In order to achieve this, we contributed the following in this project: * A game that simulates the spread of COVID-19 infections with in a city (Boston city in our current version of the game) * An interactive panel for users to make choices on precautions taken by individual user and the community around them * A graphical visualization panel that helps users understand the impact of their actions on the daily infection numbers * A simulation model that predicts the rate of infections based on population of the city, age group of the city and level of lockdown imposed in that city * An informal user-study with 6 participants to evaluate the experience of using our COVID-19 personal awareness datavis game. `36:T9587,// color scheme: red: '#ff6e6e' | aqua green : '#40f5ce' | blue :#03d3fc | teel green : #1f9aad | #3399ff { let wearMaskColor = "#1f9aad"; let washHandsColor = "#40f5ce"; // let popColorMap = { notInfected: "#03d3fc", infectedWithoutSymp: '#ff6e6e', infectedWithSymp: '#ff6e6e'}; let popInfColorMap = ["#03d3fc", '#ff6e6e'] let start = false; // let infectionCnt = getInfectionDistribution("US"); //replace with actual dataset let infectionCnt = between(10, 90); let ageDistribution = between(5, 90); let numDays = 7; let foodAmount = 5; let exercise = 5; let hospitalBeds = 100; //random assignment let probInfection = 1; let probInfectionMask = 0.7; let probInfectionHands = 0.5; let probInfectionSD = 0.2; let shutdownLevel = 4; let indMask = 0; let indHnds = 0; let indSD = 0; let sldPopMasks = 0; let sldPopHnds = 0; 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); //top Bar // let startButton = document.getElementById("start"); // startButton.onclick = function() { // start = !start; // if(start) this.innerHTML = "Pause"; // else this.innerHTML = "Start"; // console.log(start); // } //right dashboard //Width and height var w = document.getElementById("rightDB").clientWidth; var h = 200; var dataset = [];//new Array(numDays).fill(0); var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, w]) .paddingInner(0.05); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset)]) .range([0, h]); //Create SVG element var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Create bars svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d) { return "rgb(0, 0, " + Math.round(d * 10) + ")"; }); //Create labels svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }) .attr("y", function(d) { return h - yScale(d) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); document.getElementById("barChart").innerHTML = ""; document.getElementById("barChart").appendChild(svg.node()); //bottom dashboard -------------------------------------------------------------------------- // define the individual sliders ---------- let sldIndMask = slider({ title: '😷 Do you want to you use a mask?', // 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: '👏 Do you want to 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: '👬 How many feet of social distance do you maintain?', // descStyle: { // 'pointer-events': 'none' // }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#03d3fc', '#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 ft!" // : d3.range(objs.value) // .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + 'ft...') // .reduce((a, b) => a + ' ' + b, ''); }}); let sldIndAge = slider({ title: '👨‍👦 What is your age group?', // descStyle: { // 'pointer-events': 'none' // }, min: 18, max: 80, step: 5, value: 32, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#787878', '#F2F2F2'] }, oninput: objs => { objs.output.textContent = objs.value < 18 ? 'below 18' : objs.value < 21 ? '18-20yrs' : objs.value < 31 ? '20-30yrs' : objs.value < 41 ? '30-40yrs' : objs.value < 51 ? '40-50yrs' : objs.value < 61 ? '50-60yrs' : objs.value < 71 ? '60-70yrs' : 'Above 70 yrs'; // objs.desc.textContent = objs.value + 'yrs'; // 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'; }}); sldIndMask.onchange = function() { indMask = this.value; } sldIndHnds.onchange = function() { indHnds = this.value; } sldIndMask.onchange = function() { indMask = this.value; } sldIndSD.onchange = function() { indSD = this.value * 3; } // let indradius = sldIndSD.value * 3; // sldIndSD.onchange = function() { // indradius = this.value * 3; // } // define the community sliders ---------- let sldMask = slider({ title: '😷 What % of population wears masks?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 98, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#1f9aad', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 11 ? '10% 😰' : objs.value < 21 ? '20% ☹️' : objs.value < 31 ? '30% ☹️' : objs.value < 41 ? '50% 😐' : objs.value < 51 ? '60% 😐' : objs.value < 61 ? '50% 😐' : objs.value < 71 ? '70% 🙂' : objs.value < 81 ? '80% 😄' : objs.value < 91 ? '90% 😷' : '💯'; // 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: '👏 What % of population washes hands?', // desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 98, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#40f5ce', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 11 ? '10% 😰' : objs.value < 21 ? '20% ☹️' : objs.value < 31 ? '30% ☹️' : objs.value < 41 ? '50% 😐' : objs.value < 51 ? '60% 😐' : objs.value < 61 ? '50% 😐' : objs.value < 71 ? '70% 🙂' : objs.value < 81 ? '80% 😄' : objs.value < 91 ? '90% 👏' : '💯'; // 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 sldSDPer = slider({ title: '🚶-🚶 What % of population is socially distant?', descStyle: { 'pointer-events': 'none' }, min: 0, max: 98, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#03d3fc', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 11 ? '10% 😰' : objs.value < 21 ? '20% ☹️' : objs.value < 31 ? '30% ☹️' : objs.value < 41 ? '50% 😐' : objs.value < 51 ? '60% 😐' : objs.value < 61 ? '50% 😐' : objs.value < 71 ? '70% 🙂' : objs.value < 81 ? '80% 😄' : objs.value < 91 ? '90% 🚶-🚶' : '💯'; // 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: '👬 How many feet of social distance does population maintain?', descStyle: { 'pointer-events': 'none' }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#03d3fc', '#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 ft!" // : d3.range(objs.value) // .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + 'ft...') // .reduce((a, b) => a + ' ' + b, ''); }}); let sldLD = slider({ title: 'What is the level of shutdown?', descStyle: { 'pointer-events': 'none' }, min: 1, max: 4, step: 1, value: 4, theme: 'white-round', background: { type: 'progress', colors: ['#787878', '#F2F2F2', '#787878'] }, oninput: objs => { objs.output.textContent = objs.value == 3? 'Stage 3' : objs.value == 2? 'Stage 2' : objs.value == 1? 'Stage 1' : 'Stage 4'; //Not enough distance yet 👬. objs.desc.textContent = objs.value == 1? "COMPLETE SHUTDOWN! - Only Essentials: Pharmacy, Hospital and Grocery Stores Open" : objs.value == 2? 'SECONDARY BUSINESSES OPEN! - Essentials + Banks, Open!' : objs.value == 3? 'TERTIARY BUSINESSES OPEN! - Secondary Businesses + Schools Open!' : 'EVERYTHING NORMAL!!!'; }}); sldMask.onchange = function() { sldPopMasks = this.value; } sldHnds.onchange = function() { sldPopHnds = this.value; } let sldPopSD = 0; sldSDPer.onchange = function(){ sldPopSD = this.value; } let radius = sldSD.value * 3; sldSD.onchange = function() { radius = this.value * 3; } //getElementById for sliders ---------- document.getElementById("indmasks").innerHTML = ""; document.getElementById("indhands").innerHTML = ""; document.getElementById("indsocialDist").innerHTML = ""; document.getElementById("indAge").innerHTML = ""; document.getElementById("masks").innerHTML = ""; document.getElementById("hands").innerHTML = ""; document.getElementById("socialDistPer").innerHTML = ""; document.getElementById("socialDist").innerHTML = ""; document.getElementById("shutdown").innerHTML = ""; document.getElementById("mylegend").innerHTML = ""; document.getElementById("worstCase").innerHTML = ""; document.getElementById("indmasks").appendChild(sldIndMask); document.getElementById("indhands").appendChild(sldIndHnds); document.getElementById("indsocialDist").appendChild(sldIndSD); document.getElementById("indAge").appendChild(sldIndAge); document.getElementById("masks").appendChild(sldMask); document.getElementById("hands").appendChild(sldHnds); document.getElementById("socialDistPer").appendChild(sldSDPer); document.getElementById("socialDist").appendChild(sldSD); document.getElementById("shutdown").appendChild(sldLD); document.getElementById("mylegend").appendChild(legend); worstCaseChart.width = 284; worstCaseChart.height = 180; document.getElementById("worstCase").appendChild(worstCaseChart); // let tempData = new Array(10).fill().map(() => ({ // name: "day", // value: between(0, 100), // })); // document.getElementById("barChart").appendChild(plotBarChart(tempData)); //END of bottom dashboard -------------------------------------------------------------------------- context.canvas.onmousemove = (e) => { mutable mousePos = {x: e.offsetX, y: e.offsetY}; } context.lineJoin = "round"; context.lineCap = "round"; //exposureIntensity: 0.1 for parks const places = [{name: 'h1', x1: 0/fx, y1: 115/fy, x2: 55/fx, y2: 77/fy, x3: 127/fx, y3:124/fy, x4: 42/fx, y4: 162/fy, exposureIntensity: 2}, {name: 'h2', x1: 2/fx, y1: 338/fy, x2: 32/fx, y2: 369/fy, x3: 64/fx, y3:396/fy, x4: 4/fx, y4: 425/fy, exposureIntensity: 2}, {name: 'h3', x1: 16/fx, y1: 341/fy, x2: 111/fx, y2: 294/fy, x3: 147/fx, y3: 337/fy, x4: 86/fx, y4: 374/fy, exposureIntensity: 2}, {name: 'h4', x1: 116/fx, y1: 290/fy, x2: 185/fx, y2: 255/fy, x3: 231/fx, y3: 297/fy, x4: 175/fx, y4: 326/fy, exposureIntensity: 2}, {name: 'h5', x1: 197/fx, y1: 249/fy, x2: 266/fx, y2: 213/fy, x3: 321/fx, y3: 255/fy, x4: 245/fx, y4: 294/fy, exposureIntensity: 2}, {name: 'h6', x1: 0/fx, y1: 504/fy, x2: 34/fx, y2: 484/fy, x3: 63/fx, y3: 521/fy, x4: 19/fx, y4: 546/fy, exposureIntensity: 2}, {name: 'h7', x1: 34/fx, y1: 473/fy, x2: 107/fx, y2: 442/fy, x3: 136/fx, y3: 483/fy, x4: 73/fx, y4: 518/fy, exposureIntensity: 2}, {name: 'h8', x1: 114/fx, y1: 433/fy, x2: 182/fx, y2: 397/fy, x3: 224/fx, y3: 442/fy, x4: 155/fx, y4: 477/fy, exposureIntensity: 2}, {name: 'h9', x1: 189/fx, y1: 395/fy, x2: 260/fx, y2: 353/fy, x3: 309/fx, y3: 400/fy, x4: 238/fx, y4: 438/fy, exposureIntensity: 2}, {name: 'h10', x1: 595/fx, y1: 169/fy, x2: 667/fx, y2: 112/fy, x3: 666/fx, y3: 161/fy, x4: 663/fx, y4: 206/fy, exposureIntensity: 2}, {name: 'h11', x1: 133/fx, y1: 545/fy, x2: 216/fx, y2: 482/fy, x3: 255/fx, y3: 544/fy, x4: 208/fx, y4: 549/fy, exposureIntensity: 2}, {name: 'h12', x1: 435/fx, y1: 538/fy, x2: 474/fx, y2: 519/fy, x3: 510/fx, y3: 547/fy, x4: 473/fx, y4: 549/fy, exposureIntensity: 2}, {name: 'h13', x1: 478/fx, y1: 516/fy, x2: 542/fx, y2: 482/fy, x3: 595/fx, y3: 531/fy, x4: 546/fx, y4: 549/fy, exposureIntensity: 2}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}, {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, exposureIntensity: 1}] //indices of places according to level of shutdown let homeInds = 12; let level1ShutdownInds = homeInds + 3; let level2ShutdownInds = level1ShutdownInds + 4; let level3ShutdownInds = level2ShutdownInds + 1; let level4ShutdownInds = level3ShutdownInds + 2; let levelShutdownInds = [homeInds, level1ShutdownInds, level2ShutdownInds, level3ShutdownInds, level4ShutdownInds] //people properties 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', //dark blue: '#3399ff or light blue color: #03d3fc infected: false, age: between(18, 39), speed: v, //set later to v/log age-16 placesCnt: 6, places: new Array(6), homeIndex: between(0, homeInds), visitedCnt: 0, show: true, susceptibility: 0, wearingMask: false, washingHands: false, socialDistance: 0, totalDailyExposure: 0, chanceOfInfection: 0, totalDailyExposureNormal: 0, chanceOfInfectionNormal: 0, infectedNormal: false, colorNormal: "#03d3fc", })); let above40 = Math.ceil(0.4*n); // console.log(tadpoles); for (let i = 0; i < n; i++){ if(i < above40) //40% above 40 tadpoles[i].age = between(40, 80); tadpoles[i].susceptibility = getSusceptibility(tadpoles[i].age); //set speed according to age tadpoles[i].speed = v/(Math.log(tadpoles[i].age - 16)/3); tadpoles[i].vx *= tadpoles[i].speed; tadpoles[i].vy *= tadpoles[i].speed; } tadpoles = shuffle(tadpoles); let infected = Math.floor(0.1*n); for (let i = 0; i < n; i ++){ if(i < infected){ tadpoles[i].infected = true; tadpoles[i].color = popInfColorMap[1]; } } tadpoles = shuffle(tadpoles); //assign houses let houseInd = 0; for(let i = 0; i < n; i++){ tadpoles[i].homeIndex = houseInd; if(!((i+1)%4)) houseInd++; } let selfIndex = 0; // swap self to be first array element for (let i = 0; i < n; i ++){ if(!tadpoles[i].infected){ let temp = tadpoles[i]; tadpoles[i] = tadpoles[selfIndex]; tadpoles[selfIndex] = temp; break; } } // let normalTadpoles = [].concat(tadpoles); //start here!!! let cumInfected = 0; let cumInfectedNormal = 0; //days loop for (let day = 0; day < numDays; day++){ document.getElementById("ticker").innerHTML = "Simulating Day "+ (day+1)+"..."; let allCompletedPath = 0; for (let i = 0; i < n; i++){ // reset totalDailyExposure // tadpoles[i].totalDailyExposure = 0; shutdownLevel = sldLD.value; //assign places according to shutdown level tadpoles[i].placesCnt = between(0, shutdownLevel+2); if(tadpoles[i].placesCnt == 0){ allCompletedPath++; console.log("N Completed path: ", allCompletedPath); // tadpoles[i].show = false; } // console.log(tadpoles[i].placesCnt); for (let j = 0; j < tadpoles[i].placesCnt - 1; j++){ tadpoles[i].places[j] = between(0, levelShutdownInds[shutdownLevel]); } tadpoles[i].places[tadpoles[i].placesCnt - 1] = tadpoles[i].homeIndex; tadpoles[i].visitedCnt = 0; //assign start from home, and first destination let iSrc = tadpoles[i].src = tadpoles[i].homeIndex; let iDst = tadpoles[i].dst = tadpoles[i].homeIndex; if(tadpoles[i].placesCnt != 0) iDst = tadpoles[i].dst = tadpoles[i].places[0]; 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 (allCompletedPath < n) { //inside a day loop //if(start) { //freeze while context.clearRect(0, 0, width, height); context.drawImage(img, 0, 0, width, height); let td = 0 //link sliders and variables here ********* for (let t of tadpoles) { if(td == selfIndex){ tadpoles[td].washingHands = t.washingHands = !!sldIndHnds.value; tadpoles[td].wearingMask = t.wearingMask = !!sldIndMask.value; tadpoles[td].socialDistance = t.socialDistance = sldIndSD.value; } else { //population if(td < ((sldHnds.value/100)*n)+1) tadpoles[td].washingHands = t.washingHands = true; else tadpoles[td].washingHands = t.washingHands = false; if(td < ((sldMask.value/100)*n)+1) tadpoles[td].wearingMask = t.wearingMask = true; else tadpoles[td].wearingMask = t.wearingMask = false; if(td < ((sldSDPer.value/100)*n)+1) tadpoles[td].socialDistance = t.socialDistance = sldSD.value; else tadpoles[td].socialDistance = t.socialDistance = 0; } //set params according to input age of user tadpoles[selfIndex].age = sldIndAge.value; tadpoles[selfIndex].susceptibility = getSusceptibility(tadpoles[selfIndex].age); tadpoles[selfIndex].speed = v/(Math.log(tadpoles[selfIndex].age - 16)/3); tadpoles[selfIndex].vx *= tadpoles[selfIndex].speed; tadpoles[selfIndex].vy *= tadpoles[selfIndex].speed; // console.log("tadpole: ", td); if (reachedDst(t) && tadpoles[td].visitedCnt < tadpoles[td].placesCnt){ if(!t.infected){//infection transmission USER CONDITIONS for(let k = 0; k < n; k++){ if(k == td) continue; // let arrivedAtMyDest = tadpoles[k]; let arrivedAtMyDest = {px:0, py:0} arrivedAtMyDest.px = tadpoles[k].px; arrivedAtMyDest.py = tadpoles[k].py; let dstn = places[t.dst]; //infected person at same destination if(isAroundDest(arrivedAtMyDest, dstn) && tadpoles[k].infected){ if(td == selfIndex) console.log("MET INFECTED ", k); let maskFactor = 1; let handsFactor = 1; if(tadpoles[k].wearingMask) maskFactor = 0.8; if(tadpoles[k].washingHands) handsFactor = 0.7; let infOther = maskFactor * handsFactor * (1/((tadpoles[k].socialDistance/2)+1)); // * (1/((getDist(t, tadpoles[k])/15)+1)); include in infec? maskFactor = handsFactor = 1; if(t.wearingMask) maskFactor = 0.8; if(t.washingHands) handsFactor = 0.7; let infSelf = maskFactor * handsFactor * (1/((t.socialDistance/2)+1)); let infectiousness = infSelf * infOther; if(td == selfIndex){ console.log("MET INFECTED ", k, " infOther: ", infOther, " infSelf: ", infSelf); } tadpoles[td].totalDailyExposure += (infectiousness * places[t.dst].exposureIntensity); } } t.totalDailyExposure = tadpoles[td].totalDailyExposure; let chanceOfInfection = 1 - Math.pow(1-t.susceptibility, t.totalDailyExposure); tadpoles[td].chanceOfInfection = t.chanceOfInfection = chanceOfInfection; //if(td == selfIndex) console.log( "Self Infection Chance: ", chanceOfInfection); if(chanceOfInfection >= 0.5){ //transmit infection tadpoles[td].infected = t.infected = true; tadpoles[td].color = t.color = popInfColorMap[1]; } } //----------------------------infection transmission NORMAL CONDITIONS if(!t.infectedNormal){//infection transmission for(let k = 0; k < n; k++){ if(k == td) continue; // let arrivedAtMyDest = tadpoles[k]; let arrivedAtMyDest = {px:0, py:0} arrivedAtMyDest.px = tadpoles[k].px; arrivedAtMyDest.py = tadpoles[k].py; let dstn = places[t.dst]; //infected person at same destination if(isAroundDest(arrivedAtMyDest, dstn) && tadpoles[k].infectedNormal){ //if(td == selfIndex) console.log("MET INFECTED Normal", k); let infectiousness = 1; tadpoles[td].totalDailyExposureNormal += (infectiousness * places[t.dst].exposureIntensity); } } t.totalDailyExposureNormal = tadpoles[td].totalDailyExposureNormal; let chanceOfInfectionNormal = 1 - Math.pow(1-t.susceptibility, t.totalDailyExposureNormal); tadpoles[td].chanceOfInfectionNormal = t.chanceOfInfectionNormal = chanceOfInfectionNormal; //if(td == selfIndex) console.log( "Self Infection Chance: ", chanceOfInfection); if(chanceOfInfectionNormal >= 0.5){ //transmit infection tadpoles[td].infectedNormal = t.infectedNormal = true; tadpoles[td].colorNormal = t.colorNormal = popInfColorMap[1]; } } //---------------------------------------END OF INFECTION TRANSMISSION tadpoles[td].visitedCnt ++; tadpoles[td].src = t.src = t.dst; tadpoles[td].px = t.px; //= t.dsx tadpoles[td].py = t.py; //= t.dsy if(tadpoles[td].visitedCnt == tadpoles[td].placesCnt) { //reached all places allCompletedPath++; // console.log(td, " Completed ", allCompletedPath); // tadpoles[td].show = false; } else{ //if(tadpoles[td].visitedCnt <= tadpoles[td].placesCnt-1) tadpoles[td].dst = t.dst = tadpoles[td].places[tadpoles[td].visitedCnt]; // console.log(tadpoles[td].visitedCnt, tadpoles[td].placesCnt); 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; } } // else if(tadpoles[td].visitedCnt > = tadpoles[td].placesCnt){ //people sitting at home currently // if(!t.infected){//infection transmission // for(let k = 0; k < n; k++){ // if(k == td) continue; // // let arrivedAtMyDest = tadpoles[k]; // let arrivedAtMyDest = {px:0, py:0} // arrivedAtMyDest.px = tadpoles[k].px; // arrivedAtMyDest.py = tadpoles[k].py; // let dstn = places[t.dst]; // //infected person at same destination // if(isAroundDest(arrivedAtMyDest, dstn) && tadpoles[k].infected){ // if(td == selfIndex) console.log("MET INFECTED ", k); // let infectiousness = 1; // tadpoles[td].totalDailyExposure += (infectiousness * places[t.dst].exposureIntensity); // } // } // t.totalDailyExposure = tadpoles[td].totalDailyExposure; // let chanceOfInfection = 1 - Math.pow(1-t.susceptibility, t.totalDailyExposure); // tadpoles[td].chanceOfInfection = t.chanceOfInfection = chanceOfInfection; // if(td == selfIndex) console.log( "Self Infection Chance: ", chanceOfInfection); // if(chanceOfInfection >= 0.5){ //transmit infection // tadpoles[td].infected = t.infected = true; // tadpoles[td].color = t.color = popInfColorMap[1]; // } // } // } let dx = t.vx = tadpoles[td].vx = ((t.dsx - t.px)/t.dsx) * t.speed;// v; let dy = t.vy = tadpoles[td].vy = ((t.dsy - t.py)/t.dsy) * t.speed;//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); } if(tadpoles[td].show){ // console.log(tadpoles[td].visitedCnt); // Head if(td == selfIndex){ //you look slike a star let x, y, r, n, inset; x = t.px[0]; y = t.py[0]; r = 5; n = 5; inset = 3; context.save(); context.beginPath(); context.translate(x, y); context.moveTo(0,0-r); for (var i = 0; i < n; i++) { context.rotate(Math.PI / n); context.lineTo(0, 0 - (r*inset)); context.rotate(Math.PI / n); context.lineTo(0, 0 - r); } context.closePath(); context.fillStyle = t.color; context.fill(); context.restore(); } else{ // others look like a dot 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(); } if(t.wearingMask){ //draw mask let temp = context.lineWidth; context.lineWidth = 3; context.beginPath(); context.arc(t.px[0], t.py[0], 7, 0, 2 * Math.PI); context.strokeStyle = wearMaskColor; context.stroke(); context.lineWidth = temp; } if(t.washingHands){ //draw hands let temp = context.lineWidth; context.lineWidth = 3; context.beginPath(); context.arc(t.px[0], t.py[0], 6, 0, 2 * Math.PI); context.strokeStyle = washHandsColor; context.stroke(); context.lineWidth = temp; } //social distancing context.beginPath(); context.arc(t.px[0], t.py[0], t.socialDistance*3, 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++; } //after tadpoles loop cycle++; yield context.canvas; document.getElementById("mainScene").innerHTML = ""; document.getElementById("mainScene").appendChild(context.canvas); if(cycle == 100) // return 0; cycle = 0; }//freeze while end } //inside a day loop end (while) //plot bar chart at the end of the day let tempInf = 0; let tempInfNormal = 0; for(let j = 0; j < n; j++){ if(tadpoles[j].infected) tempInf ++; if(tadpoles[j].infectedNormal) tempInfNormal++; } let newInfections = tempInf - cumInfected - infected; let newInfectionsNormal = tempInfNormal - cumInfectedNormal - infected; console.log("INFECTIONSSS: ", newInfections, newInfectionsNormal ); cumInfected += newInfections; cumInfectedNormal += newInfectionsNormal; let perSaved = (Math.abs(newInfectionsNormal - newInfections)*100)/n //--------------------------add column---------------------------------------------------------------- let perTempInf = (tempInf/n)*100; perTempInf = Number(perTempInf.toPrecision(4)); dataset.push(perTempInf); // dataset.push(perSaved); //Update scale domains xScale.domain(d3.range(dataset.length)); yScale.domain([0, d3.max(dataset)]); let maxValue = 50; var bars = svg.selectAll("rect") .data(dataset); bars.enter() .append("rect") .attr("x", w) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }) .attr("fill", function(d) { return "rgb(3, 211, 255)"; //" + 255 - Math.round(d * 10) + " }) .merge(bars) .transition() .duration(500) .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return h - yScale(d); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return yScale(d); }); //Update all labels var labels = svg.selectAll("text") .data(dataset); labels.enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", function(d) { return "black"; }) .attr("x", function(d, i) { return w + xScale.bandwidth() / 2; }) .attr("y", function(d) { if (d < 0.07 * maxValue){ return h - yScale(d) - 7 } else { return h - yScale(d) + 14; } }) .merge(labels) .transition() .duration(500) .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }); console.log("End of Day: ", day+1); }//days loop end document.getElementById("ticker").innerHTML = "End of Experience"; }37:T602,function plotBarChart(data){ let color = "steelblue"; let height = 1500; let margin = ({top: 30, right: 0, bottom: 30, left: 40}); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); data = data.sort((a, b) => d3.descending(a.value, b.value), {format: "%", y: "↑ Difference in Percentage of Saved People"}); let x = d3.scaleBand() .domain(d3.range(data.length)) .range([margin.left, width - margin.right]) .padding(0.1); let y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]).nice() .range([height - margin.bottom, margin.top]); let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0)); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, data.format)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -margin.left) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-size", "11px") .text(data.y)); svg.append("g") .attr("fill", color) .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }38: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; }39: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; }3a: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%)`; } }3b: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; } `3c:[{"id":"5261b819922358adc847312441f7e163ec3881f07c684364dfb70979ef2d5d630b2f5c50dab8c8ed1a4d4605c08306445499f5a082684f8994deb2d2439bb7fd","href":"https://static.observableusercontent.com/files/5261b819922358adc847312441f7e163ec3881f07c684364dfb70979ef2d5d630b2f5c50dab8c8ed1a4d4605c08306445499f5a082684f8994deb2d2439bb7fd","name":"background-final-04@2.jpg","type":"image/jpeg","lastModified":1589352445850.901,"size":29768},{"id":"64870a803599a1a990426f5955ed47aaf1d85e4d292e16d63c042c8d9e0bc5bb08cd55f0b4b2368bb5c3fe75ad31dd4c82629c94c7be9c277b801c3dde3a07df","href":"https://static.observableusercontent.com/files/64870a803599a1a990426f5955ed47aaf1d85e4d292e16d63c042c8d9e0bc5bb08cd55f0b4b2368bb5c3fe75ad31dd4c82629c94c7be9c277b801c3dde3a07df","name":"background-final-02.png","type":"image/png","lastModified":1589352445850.901,"size":396952},{"id":"3bb8cd109533161fd8685fb892c1494d9c6888675bb6e02ffeff2348b20ed059a35e23c0e472d91ec47e77a84ae61fb286ac695360d10a87617675f82f6877ab","href":"https://static.observableusercontent.com/files/3bb8cd109533161fd8685fb892c1494d9c6888675bb6e02ffeff2348b20ed059a35e23c0e472d91ec47e77a84ae61fb286ac695360d10a87617675f82f6877ab","name":"wcs.jpg","type":"image/jpeg","lastModified":1589394145038.297,"size":65951}] 32:{"id":"2b2aec7ca4b916b7","slug":"covid-19-personal-awareness-datavis-game","title":"COVID-19 Personal Awareness DataVis Game","thumbnail":"ddffa8187d91e3fd83000bb5c8fc3996f64ad88ced114ad119a1b47306cb1b1a","access_level":"public","create_time":"$D2020-05-13T06:47:25.850Z","update_time":"$D2020-05-13T18:55:03.208Z","view_time":null,"first_public_time":"$D2020-05-13T15:45:13.041Z","has_unpublished_edits":null,"fork":true,"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":1393,"publish_version":1393,"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":0,"collection":null,"type":"notebook","body":{"title":"COVID-19 Personal Awareness DataVis Game","cells":[{"id":631,"value":"md` # COVID-19 Personal Awareness DataVis Game\n(6.894 Final Project by Dishita Turakhia and Nouran Soliman)\n\n [Presentation Slides](https://docs.google.com/presentation/d/14KXtGK-fa35aEG0iJ3JoiPfc0Kya4Hq_c2D--SjBBoQ/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\n**Your city of Boston is facing COVID-19 pandemic. You and community actions can make a difference by taking precautions!\nAdjust the sliders below to understand the impact of taking precautions on the daily infection numbers.** `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"md` **Notes:**\n* The overlap of people does not mean overlap in real life (This is just for the sake of the available space here). Social distancing is taken into account in infection transmission but not visually.\n* The experience is supposed to show 7 days, if it **freezes in the middle please refresh to restart.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"md `## Implementation Code Below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"//console.log(document.getElementById(\"fullScreen\").clientWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"mutable mousePos = ({x: width / 2, y: 800 / 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"n = 50","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 = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"arrivalDist = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"function shuffle(array) {\n for (let i = array.length - 1; i > 0; i--) {\n let j = Math.floor(Math.random() * (i + 1));\n [array[i], array[j]] = [array[j], array[i]];\n }\n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"function getSusceptibility(age){\n if (age <= 19) return 0.03;//0.4; \n else if (age <= 39) return 0.08; // 0.6;\n else if (age <= 59) return 0.10; //0.8;\n else if (age <= 79) return 0.25; //0.95;\n else return 0.35;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":985,"value":"function getDist(t1, t2){\n return Math.sqrt(Math.pow(Math.abs(t1.px-t2.px), 2) + Math.pow(Math.abs(t1.py-t2.py), 2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"range = DOM.range(0, 10, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"angle = Generators.input(range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":" d3 = require(\"d3@5\")","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof image = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"viewof f = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"infectionData = d3.csvParse(await Files.text(f))","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-final-02.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"legend = FileAttachment(\"background-final-04@2.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"worstCaseChart = FileAttachment(\"wcs.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"function getInfectionDistribution(zipcode){\n for (let cnt of infectionData){\n if ( cnt.name == zipcode)\n return cnt.value;\n }\n}","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"fullscreen = {\n const button = html`