35:null 36:["$","title",null,{"children":"COVID-19 Personal Awareness DataVis Game | Nouran Soliman | Observable"}] 3c:T954,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;">

`3d:T1be2,md `## Abstract In this project, we have developed an 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. To evaluate the experience of our visualization game, we conducted an informal user-study with 10 participants and collected their qualitative feedback. ## 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 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 dots represent younger population). ## System and Simulation Model Our system takes from the user 3 main categories of input: personal preventive measures, Community preventive measures, and level of shutdown. the simulation model then uses these inputs to visualize the infection spread across the city over the duration of 7 days. The simulation model first initializes number of days to 7, age distribution and population size following Boston city, initial infection distribution of 10% and home assignment, which means every person gets assigned a home that they start off and end the day at. For everyday, the model updates the ticker and assigns each person a path based on level of shutdown. During the day, the user input is read which is used to update chance of infections and people’s paths. Finally the charts are updated. The implementation details of the model are in the report. ## User Study To evaluate the user experience of our datavis game, we invited 10 participants for an informal user study. We asked them to play as long as they preferred and then provide us with qualitative feedback. We observed that players mostly played the game 3-4 times and ran the simulation for an average of 5.1 days. In general, the feedback showed that our goal was clearly conveyed as some participants found the game being a powerful tool for informative. We also asked the participants to give us some critique on game narrative, user interactivity and graph visualization in our usual “I like.. I wish...What if…” format. * We observed that the participants found the game idea visually appealing relatable, engaging and educational . * While they found sliders easy and interactive, they wished for more control and more parameters such as - housing type, population distribution. * Interestingly, the participants were also curious and wanted more information in the understanding the impact, such as detailed comparison based on location and type of population. ## 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 playful 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 Boston city, age group of the city and level of lockdown imposed in that city * An informal **user-study with 10 participants to evaluate the experience** of using our COVID-19 personal awareness datavis game. `3e:T956f,// 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, 100]) .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 ? '40% 😐' : objs.value < 51 ? '50% 😐' : objs.value < 61 ? '60% 😐' : 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 ? '40% 😐' : objs.value < 51 ? '50% 😐' : objs.value < 61 ? '60% 😐' : 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 ? '40% 😐' : objs.value < 51 ? '50% 😐' : objs.value < 61 ? '60% 😐' : 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: 1, 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, 100]); 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"; }3f: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(); }40: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; }41: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; }42: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%)`; } }43: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; } `44:[{"id":"3bb8cd109533161fd8685fb892c1494d9c6888675bb6e02ffeff2348b20ed059a35e23c0e472d91ec47e77a84ae61fb286ac695360d10a87617675f82f6877ab","href":"https://static.observableusercontent.com/files/3bb8cd109533161fd8685fb892c1494d9c6888675bb6e02ffeff2348b20ed059a35e23c0e472d91ec47e77a84ae61fb286ac695360d10a87617675f82f6877ab","name":"wcs.jpg","type":"image/jpeg","lastModified":1589425469682.305,"size":65951},{"id":"5261b819922358adc847312441f7e163ec3881f07c684364dfb70979ef2d5d630b2f5c50dab8c8ed1a4d4605c08306445499f5a082684f8994deb2d2439bb7fd","href":"https://static.observableusercontent.com/files/5261b819922358adc847312441f7e163ec3881f07c684364dfb70979ef2d5d630b2f5c50dab8c8ed1a4d4605c08306445499f5a082684f8994deb2d2439bb7fd","name":"background-final-04@2.jpg","type":"image/jpeg","lastModified":1589425469682.305,"size":29768},{"id":"64870a803599a1a990426f5955ed47aaf1d85e4d292e16d63c042c8d9e0bc5bb08cd55f0b4b2368bb5c3fe75ad31dd4c82629c94c7be9c277b801c3dde3a07df","href":"https://static.observableusercontent.com/files/64870a803599a1a990426f5955ed47aaf1d85e4d292e16d63c042c8d9e0bc5bb08cd55f0b4b2368bb5c3fe75ad31dd4c82629c94c7be9c277b801c3dde3a07df","name":"background-final-02.png","type":"image/png","lastModified":1589425469682.305,"size":396952}] 3a:{"id":"81b29cb5c797af89","slug":"covid-19-personal-awareness-datavis-game/5","title":"COVID-19 Personal Awareness DataVis Game","thumbnail":"e901ef90bccde749110da6ce31187e161fd27ae3e579cd743b3ecaea0f4e379d","access_level":"public","create_time":"$D2020-05-14T03:04:29.682Z","update_time":"$D2020-05-14T03:34:23.490Z","view_time":null,"first_public_time":"$D2020-05-14T03:04:42.072Z","has_unpublished_edits":null,"fork":{"id":"c75458d138facfc2","slug":"covid-19-personal-awareness-datavis-game/3","title":"COVID-19 Personal Awareness DataVis Game","owner":{"id":"be32f447d5d01bce","login":"dishitaturakhia","name":""}},"stars":2,"starred":false,"owner":{"type":"team","id":"eb2d3fd92e0a3c6f","login":"nouran-soliman","name":"Nouran Soliman","avatar_url":"https://avatars-next.observableusercontent.com/d0fe7184fda08b9827531452ef76628a4dff33978b58cc5502c60517089a0ade","tier":"starter_2024","bio":"PhD student at CSAIL, MIT"},"version":1437,"publish_version":1437,"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,"bio":"PhD student at CSAIL, MIT"}],"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","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://www.dropbox.com/s/b7cb0br4bft71re/COVID-19%20Personal%20Awareness-Final%20Presentation.pdf?dl=0) | [Presentation Video](https://www.dropbox.com/s/vudc23l4v1dvixc/COVID-19%20Personal%20Awareness-Final%20Presentation%20Video.mp4?dl=0) | [Final Paper](https://www.dropbox.com/s/5bpy8ebn2t1glqx/6_894_DataVis_Project___COVID_19_Personal_Awareness_Game.pdf?dl=0) | [User Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLSdzRDp4JskmisixZQzKb8lnPEQoWCpVINcEZEGzkYq-E8F8AQ/viewform) | [Github Page](https://github.mit.edu/6894-sp20/FP-COVID-19-Personal-Awareness)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md` ## Personal Awareness Game\n**Your city of Boston is facing COVID-19 pandemic. You can make a difference with your choices!\nAdjust the sliders below to understand the impact of certain precautions on the daily infection numbers.** `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1310,"value":"md` **Instructions:**\n* The simulation goes for maximum 7 days\n* Adjust the sliders to choose your actions, community actions and lockdown parameters\n* The sliders can be adjusted at anytime during simulation and the results show the impact of chosen actions\n \n**Please Note:**\n* If the simulation **freezes for more than 5 seconds, please refresh to restart.**\n* The overlap of people (dots) does not mean overlap in real life (This is just for the sake of the available space here)\n* Social distancing is taken into account in infection transmission simulation but not visually.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1231,"value":"md `## Implementation Code Below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"n = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"m = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"v = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"arrivalDist = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1110,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1423,"value":"mutable mousePos = ({x: width / 2, y: 800 / 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"range = DOM.range(0, 10, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"angle = Generators.input(range)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":" d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof image = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"viewof f = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"worstCaseChart = FileAttachment(\"wcs.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"fullscreen = {\n const button = html`