36:["$","title",null,{"children":"COVID-19 Personal Awareness DataVis Game | dishitaturakhia | Observable"}] 3e:T75d,grid = html`

Day 1

Impact on Infections

Your Actions

Community Actions

Level of Shutdown

`3f:T60be,// color scheme: red: '#ff6e6e' | light neon green : '#40f5ce' | blue :#03d3fc | dark teel green : #1f9aad { let wearMaskColor = "#1f9aad"; let washHandsColor = "#40f5ce"; const width = document.getElementById("fullScreen").clientWidth * 0.7; const height = 550; //width * (550/650); const fx = 660/width; const fy = 550/height; let indMask = 0; let indHnds = 0; let indSD = 0; let sldPopMasks = 0; let sldPopHnds = 0; const context = DOM.context2d(width, height); //right dashboard const pFood = html`

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

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

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

`; (async () => { let sum = 0; let n = 10000; let s = 5000; let k = s; while(true){ let t = between(10, 10000); if(s < t){ for (k = s; k < t; ++k){ sum += k * k; let p = (k / n) * 100; pHosp.style.width = p + "%"; if(p < 50) pHosp.style.background = "#1f9aad"; else pHosp.style.background = "#ff6e6e"; await new Promise(requestAnimationFrame); } } else { for (k = s; k > t; --k){ sum -= k * k; let p = (k / n) * 100; pHosp.style.width = p + "%"; if(p < 50) pHosp.style.background = "#1f9aad"; else pHosp.style.background = "#ff6e6e"; await new Promise(requestAnimationFrame); } } s = k; } pHosp.value = sum; pHosp.dispatchEvent(new CustomEvent("input")); pHosp.style.background = "#1f9aad"; })(); // document.getElementById("food").innerHTML = ""; // document.getElementById("exer").innerHTML = ""; // document.getElementById("quar").innerHTML = ""; // document.getElementById("hospCap").innerHTML = ""; // document.getElementById("hour").innerHTML = ""; // document.getElementById("day").innerHTML = ""; // document.getElementById("week").innerHTML = ""; // document.getElementById("food").appendChild(pFood); // document.getElementById("exer").appendChild(pExer); // document.getElementById("quar").appendChild(pQuar); // document.getElementById("hospCap").appendChild(pHosp); // let playscrubber = {Scrubber(numbers, {loop: false, alternate: false, delay: 500, autoplay: false})}; //bottom dashboard -------------------------------------------------------------------------- // define the individual sliders ---------- let sldIndMask = slider({ title: '😷 Do you wear 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 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 much social distance do you practice?', // descStyle: { // 'pointer-events': 'none' // }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#1f9aad', '#F2F2F2'] }, oninput: objs => { objs.output.textContent = objs.value == 6 ? 'Congrats, you did it! 🚶---🚶' : 'Only ' + (6 - objs.value) + ' more ft to go!'; //Not enough distance yet 👬. objs.desc.textContent = objs.value == 0 ? "LET'S COUNT TO 6!" : d3.range(objs.value) .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + '...') .reduce((a, b) => a + ' ' + b, ''); }}); 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: 100, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#1f9aad', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 10 ? '😰' : objs.value < 30 ? '☹️' : objs.value < 50 ? '😐' : objs.value < 70 ? '🙂' : objs.value < 90 ? '😄' : objs.value < 99 ? '😷' : '💯'; objs.desc.textContent = objs.value + '%'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); let sldHnds = slider({ title: '👏 What % of population washes hands?', desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 100, step: 1, value: 0, theme: 'white-round', background: { type: 'double', colors: ['#40f5ce', '#ff6e6e'] }, oninput: objs => { objs.output.textContent = objs.value < 10 ? '😰' : objs.value < 30 ? '☹️' : objs.value < 50 ? '😐' : objs.value < 70 ? '🙂' : objs.value < 90 ? '😄' : objs.value < 99 ? '👏' : '💯'; objs.desc.textContent = objs.value + '%'; // calculating tooltip's position (200px - margins) + exceptions for one- and three-number percentages objs.desc.style.marginLeft = objs.progress * (200 - 15) + (objs.value < 10 ? 5 : objs.value > 99 ? -5 : 0) + 'px'; }}); sldMask.onchange = function() { sldPopMasks = this.value; } sldHnds.onchange = function() { sldPopHnds = this.value; } let sldSDPer = slider({ title: 'What % of population practices social distancing?', descStyle: { '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 == 6 // ? 'Congrats, you did it! 🚶---🚶' // : 'Only ' + (6 - objs.value) + ' more ft to go!'; // //Not enough distance yet 👬. // objs.desc.textContent = objs.value == 0 // ? "LET'S COUNT TO 6!" // : d3.range(objs.value) // .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + '...') // .reduce((a, b) => a + ' ' + b, ''); // } }); let sldSD = slider({ title: '👬 How much 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', '#1f9aad', '#F2F2F2'] }, oninput: objs => { objs.output.textContent = objs.value == 6 ? 'Congrats, you did it! 🚶---🚶' : 'Only ' + (6 - objs.value) + ' more ft to go!'; //Not enough distance yet 👬. objs.desc.textContent = objs.value == 0? "LET'S COUNT TO 6!" : d3.range(objs.value) .map(d => d == 5 ? (d + 1) + '!' : (d + 1) + '...') .reduce((a, b) => a + ' ' + b, ''); }}); let radius = sldSD.value * 3; sldSD.onchange = function() { radius = this.value * 3; } // define the lockdown level sliders ---------- let sldLD = slider({ title: 'What is the level of lockdown?', descStyle: { 'pointer-events': 'none' }, min: 1, max: 4, step: 1, value: 1, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#1f9aad', '#F2F2F2'] }, oninput: objs => { objs.output.textContent = objs.value == 4? 'Complete Shutdown!' : objs.value == 3? 'Seconary Businesses Open!' : objs.value == 2? 'Tertiary Businesses Open!' : 'Everything Normal!'; //Not enough distance yet 👬. objs.desc.textContent = objs.value == 4? "Only Essentials: Pharmacy, Hospital and Grocery Stores Open" : objs.value == 3? 'Essentials + Banks, Open!' : objs.value == 2? 'Secondary + Cafes, Schools Open!' : 'Everything Open!'; }}); let ldradius = sldLD.value * 3; sldLD.onchange = function() { ldradius = this.value * 3; } // extra sliders unused ----- let sldBds = slider({ titleStyle: { 'font-size': '11px' }, min: 0, max: 20, step : 1, divStyle: { 'display': 'inline-block', 'text-align': 'center', 'margin-left': '3.5px' }, sliderStyle: { 'width': '100px', 'background': '#FFA5D0' }, theme: 'white-round', oninput: objs => { mutable HOSPITAL_BEDS = Array(+objs.value + 1).join('🛌'); } }); let sldResA = slider({ title: 'Resources Available', desc: "", min: 0, max: 100, step: 1, divAttrs: { id: 'slider1' }, divStyle: { display: 'inline-block' }, sliderStyle: { width: '200px' }, theme: 'white-round', //or default-round oninput: objs => { let secondSlider = d3.select('#slider2'); if (!secondSlider.empty()) { secondSlider.node().update(100 - objs.value); secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress); objs.slider.style.background = d3.interpolateCool(objs.progress); if (objs.value >= 50) { objs.output.textContent = '💃'; secondSlider.select('span').node().textContent = '🕺'; } else { objs.output.textContent = '🕺'; secondSlider.select('span').node().textContent = '💃'; } } else { objs.slider.style.background = d3.interpolateCool(objs.progress); objs.output.textContent = '💃'; }; }}); let sldResU = slider({ title: 'Resources Used', desc: '', min: 0, max: 100, step: 1, value: 50, divAttrs: { id: 'slider2' }, divStyle: { display: 'inline-block' }, sliderStyle: { width: '200px' }, theme: 'white-round', //or `default-round oninput: objs => { let secondSlider = d3.select('#slider1'); if (!secondSlider.empty()) { secondSlider.node().update(100 - objs.value); secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress); objs.slider.style.background = d3.interpolateCool(objs.progress); if (objs.value <= 50) { objs.output.textContent = '🕺'; secondSlider.select('span').node().textContent = '💃'; } else { objs.output.textContent = '💃'; secondSlider.select('span').node().textContent = '🕺'; }; } else { objs.slider.style.background = d3.interpolateCool(objs.progress); objs.output.textContent = '🕺'; }; }}); // document.getElementById("playcrubber").innerHTML = ""; //getElementById for sliders ---------- document.getElementById("indmasks").innerHTML = ""; document.getElementById("indhands").innerHTML = ""; document.getElementById("indsocialDist").innerHTML = ""; document.getElementById("masks").innerHTML = ""; document.getElementById("hands").innerHTML = ""; document.getElementById("socialDistPer").innerHTML = ""; document.getElementById("socialDist").innerHTML = ""; // document.getElementById("resources").innerHTML = ""; document.getElementById("lockdown").innerHTML = ""; document.getElementById("divchart").innerHTML = ""; // document.getElementById("playscrubber").appendChild(playscrubber); document.getElementById("indmasks").appendChild(sldIndMask); document.getElementById("indhands").appendChild(sldIndHnds); document.getElementById("indsocialDist").appendChild(sldIndSD); document.getElementById("masks").appendChild(sldMask); document.getElementById("hands").appendChild(sldHnds); document.getElementById("socialDistPer").appendChild(sldSDPer); document.getElementById("socialDist").appendChild(sldSD); // document.getElementById("resources").appendChild(sldResA); // document.getElementById("resources").appendChild(sldResU); document.getElementById("lockdown").appendChild(sldLD); document.getElementById("divchart").appendChild(barchart); context.canvas.onmousemove = (e) => { mutable mousePos = {x: e.offsetX, y: e.offsetY}; } context.lineJoin = "round"; context.lineCap = "round"; const places = [{name: 'gas', x1: 70/fx, y1: 55/fy, x2: 165/fx, y2: 0/fy, x3: 240/fx, y3:45/fy, x4: 139/fx, y4: 98/fy}, {name: 'school', x1: 287/fx, y1: 461/fy, x2: 377/fx, y2: 377/fy, x3: 458/fx, y3:458/fy, x4: 375/fx, y4: 505/fy}, {name: 'cafe', x1: 465/fx, y1: 425/fy, x2: 590/fx, y2: 350/fy, x3: 655/fx, y3:428/fy, x4: 582/fx, y4: 482/fy}, {name: 'cafe2', x1: 433/fx, y1: 78/fy, x2: 590/fx, y2: 340/fy, x3: 685/fx, y3:120/fy, x4: 504/fx, y4: 225/fy}, {name: 'phar', x1: 300/fx, y1: 180/fy, x2: 395/fx, y2: 105/fy, x3: 455/fx, y3:165/fy, x4: 375/fx, y4: 220/fy}, {name: 'bank', x1: 300/fx, y1: 340/fy, x2: 375/fx, y2: 270/fy, x3: 435/fx, y3:300/fy, x4: 375/fx, y4: 375/fy}, {name: 'hosp', x1: 430/fx, y1: 250/fy, x2: 550/fx, y2: 130/fy, x3: 630/fx, y3:230/fy, x4: 500/fx, y4: 295/fy}, {name: 'poli', x1: 175/fx, y1: 110/fy, x2: 235/fx, y2: 50/fy, x3: 340/fx, y3:100/fy, x4: 305/fx, y4: 180/fy}, {name: 'fire', x1: 75/fx, y1: 205/fy, x2: 155/fx, y2: 140/fy, x3: 235/fx, y3:195/fy, x4: 140/fx, y4: 240/fy}, {name: 'shop', x1: 385/fx, y1: 375/fy, x2: 375/fx, y2: 305/fy, x3: 535/fx, y3:370/fy, x4: 460/fx, y4: 420/fy}, {name: 'cremH', x1: 15/fx, y1: 340/fy, x2: 255/fx, y2: 210/fy, x3: 325/fx, y3:255/fy, x4: 90/fx, y4: 380/fy}, {name: 'redH', x1: 5/fx, y1: 495/fy, x2: 250/fx, y2: 355/fy, x3: 315/fx, y3:400/fy, x4: 45/fx, y4: 545/fy}, {name: 'mgH', x1: 1/fx, y1: 115/fy, x2: 60/fx, y2: 80/fy, x3: 125/fx, y3: 125/fy, x4: 5/fx, y4: 185/fy}] let tadpoles = new Array(n).fill().map(() => ({ vx: (Math.random() - 0.5) * v, vy: (Math.random() - 0.5) * v, px: new Array(m), py: new Array(m), dsx: new Array(m), dsy: new Array(m), src: 0, dst: 11, count: 0, color: '#03d3fc' })); for (let i = 0; i < n; i++){ let iSrc = tadpoles[i].src = between(0, 11); let iDst = tadpoles[i].dst = between(0, 11); tadpoles[i].px.fill(between((places[iSrc].x1 + places[iSrc].x4)/2, (places[iSrc].x2 + places[iSrc].x3)/2)); tadpoles[i].py.fill(between((places[iSrc].y1 + places[iSrc].y2)/2, (places[iSrc].y3 + places[iSrc].y4)/2)); tadpoles[i].dsx.fill(between((places[iDst].x1 + places[iDst].x4)/2, (places[iDst].x2 + places[iDst].x3)/2)); tadpoles[i].dsy.fill(between((places[iDst].y1 + places[iDst].y2)/2, (places[iDst].y3 + places[iDst].y4)/2)); } let temp = []; let cycle = 0 //debugging loop // for (let t of tadpoles) { // console.log("source: ", t.px, t.py); // console.log("Destination: ", t.dsx, t.dsy); // } while (true) { context.clearRect(0, 0, width, height); context.drawImage(img, 0, 0, width, height); let td = 0 for (let t of tadpoles) { // console.log("tadpole: ", td); if (reachedDst(t)){ // return 0; tadpoles[td].src = t.src = t.dst; tadpoles[td].px = t.px; //= t.dsx tadpoles[td].py = t.py; //= t.dsy tadpoles[td].dst = t.dst = between(0, 11); t.dsx.fill(between((places[t.dst].x1 + places[t.dst].x4)/2, (places[t.dst].x2 + places[t.dst].x3)/2)); tadpoles[td].dsx = t.dsx; t.dsy.fill(between((places[t.dst].y1 + places[t.dst].y2)/2, (places[t.dst].y3 + places[t.dst].y4)/2)); tadpoles[td].dsy = t.dsy; } let dx = t.vx = tadpoles[td].vx = ((t.dsx - t.px)/t.dsx) * v; let dy = t.vy = tadpoles[td].vy = ((t.dsy - t.py)/t.dsy) * v; // console.log("changes: ", dx, dy, "currPos: ", t.px, t.py, "dest: ", t.dsx, t.dsy, "diff: ", t.dsx - t.px, (t.dsy - t.px)); let x = t.px[0] += dx; let y = t.py[0] += dy; let speed = Math.sqrt(dx * dx + dy * dy); const count = speed * 10; const k1 = -5 - speed / 3; // Bounce off the walls. if (x < 0 || x > width) t.vx *= -1; if (y < 0 || y > height) t.vy *= -1; //social distancing for (let i = 0; i < n; ++i){ if (i == td) continue; let p2x = tadpoles[i].px[0]; let p2y = tadpoles[i].py[0]; if (i > td){ p2x += tadpoles[i].vx; p2y += tadpoles[i].vy; } // console.log(t.px); // console.log(p2x); let dist = Math.sqrt(Math.pow(Math.abs(x-p2x), 2) + Math.pow(Math.abs(y-p2x), 2)) if (dist < 12){ t.color = '#ff6e6e'; } } // Swim! for (var j = 1; j < m; ++j) { const vx = x - t.px[j]; const vy = y - t.py[j]; const k2 = Math.sin(((t.count += count) + j * 3) / 300) / speed; t.px[j] = (x += dx / speed * k1) - dy * k2; t.py[j] = (y += dy / speed * k1) + dx * k2; speed = Math.sqrt((dx = vx) * dx + (dy = vy) * dy); } // Head context.save(); context.translate(t.px[0], t.py[0]); context.rotate(Math.atan2(t.vy, t.vx)); context.beginPath(); context.ellipse(0, 0, 5, 5, 0, 0, 2 * Math.PI); context.fillStyle = t.color; context.fill(); context.restore(); if(indMask && td == 0){ 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(indHnds && td == 0){ 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; } if(indSD && td == 0){ context.beginPath(); context.arc(t.px[0], t.py[0], indSD, 0, 2 * Math.PI); context.strokeStyle = t.color; context.stroke(); } if( td < (sldPopMasks/100)*n && td != 0){ 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( td < (sldPopHnds/100)*n && td != 0){ 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; } if(td != 0){ context.beginPath(); context.arc(t.px[0], t.py[0], radius, 0, 2 * Math.PI); context.strokeStyle = t.color; context.stroke(); } // Body context.beginPath(); context.moveTo(t.px[0], t.py[0]); for (let i = 1; i < 3; ++i) context.lineTo(t.px[i], t.py[i]); context.lineWidth = 4; context.strokeStyle = t.color; context.stroke(); // Tail context.beginPath(); context.moveTo(t.px[0], t.py[0]); for (let i = 1; i < m; ++i) context.lineTo(t.px[i], t.py[i]); context.lineWidth = 2; context.strokeStyle = t.color; context.stroke(); td++; } cycle++; yield context.canvas; document.getElementById("mainScene").innerHTML = ""; document.getElementById("mainScene").appendChild(context.canvas); if(cycle == 100) // return 0; cycle = 0; } }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:T80b,function Scrubber(values, { format = value => value, initial = 0, delay = null, autoplay = true, loop = true, alternate = false } = {}) { values = Array.from(values); const form = html``; let timer = null; let direction = 1; function start() { form.b.textContent = "Pause"; timer = delay === null ? requestAnimationFrame(tick) : setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (delay === null) cancelAnimationFrame(timer); else clearInterval(timer); timer = null; } function tick() { if (delay === null) timer = requestAnimationFrame(tick); if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; } form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && timer) form.b.onclick(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (timer) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); disposal(form).then(stop); return form; }42: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; }43: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%)`; } }44: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; } `45:[{"id":"b71ff73d7c2206daaeaaf25161a1863ed368a00e6141ae7782cd023abfec3dbea619e5360dc4051a59cbbbafd95f3fcf47ef25531a2245dc8d2d212cef24a259","href":"https://static.observableusercontent.com/files/b71ff73d7c2206daaeaaf25161a1863ed368a00e6141ae7782cd023abfec3dbea619e5360dc4051a59cbbbafd95f3fcf47ef25531a2245dc8d2d212cef24a259","name":"politifact3.csv","type":"text/csv","lastModified":1589213268472.383,"size":5560},{"id":"de985f768104b53848ce3eac133bd53b59846f775698d9b3aea85efca4b10dac6551d4228f53c88db377e874ead8193380b04d088e17e4fcf69d4a6f4285be96","href":"https://static.observableusercontent.com/files/de985f768104b53848ce3eac133bd53b59846f775698d9b3aea85efca4b10dac6551d4228f53c88db377e874ead8193380b04d088e17e4fcf69d4a6f4285be96","name":"background-final-02.jpg","type":"image/jpeg","lastModified":1589213268472.383,"size":483758},{"id":"763d40c803364ac1bae37d4a4ea56e7f7839005fc913f9dac28580fb12ead9caef7beb96c654c8f971753fe904d37e3a4c5bec7ffce024ac6192659285ace9b4","href":"https://static.observableusercontent.com/files/763d40c803364ac1bae37d4a4ea56e7f7839005fc913f9dac28580fb12ead9caef7beb96c654c8f971753fe904d37e3a4c5bec7ffce024ac6192659285ace9b4","name":"FinalScopeSketch2.PNG","type":"image/png","lastModified":1589213268472.383,"size":885615},{"id":"23ee34cde6719d5ffb7d226d06a52a82f586b3eb678d850339bf5c958b23bda1febb2eb5b4d0b3bf66d5967581c7215303413d7dde1a00012dc6de86ccf8e0df","href":"https://static.observableusercontent.com/files/23ee34cde6719d5ffb7d226d06a52a82f586b3eb678d850339bf5c958b23bda1febb2eb5b4d0b3bf66d5967581c7215303413d7dde1a00012dc6de86ccf8e0df","name":"background-final-04.jpg","type":"image/jpeg","lastModified":1589347371767.299,"size":48744}] 3a:{"id":"9821fdf4ca239a12","slug":"covid-19-personal-awareness/4","title":"COVID-19 Personal Awareness DataVis Game","thumbnail":"165f66eb134aad9153fa4c2c56dce5f4ab85cea51f6c99b1e3ad428728e84953","access_level":"public","create_time":"$D2020-05-11T16:07:48.472Z","update_time":"$D2020-05-13T05:40:58.707Z","view_time":null,"first_public_time":"$D2020-05-11T16:12:37.236Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"be32f447d5d01bce","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1044,"publish_version":1044,"role":null,"authored":false,"authors":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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://docs.google.com/presentation/d/1wYo023ltJmeH51osnqCnJGftjaGpbeY2Aje74xQz57A/edit?usp=sharing)\n\n`","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\nYour city of Boston is facing COVID-19 pandemic. You and community actions can make a difference by taking precautions! Adjust the sliders below to understand the im[pact of taking 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":972,"value":"Scrubber(numbers, {loop: false, alternate: false, delay: 500, autoplay: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"swatches({color})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"mutable mousePos = ({x: width / 2, y: 800 / 2})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"console.log(document.getElementById(\"fullScreen\").clientWidth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"mutable HOSPITAL_BEDS = ''","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 = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"arrivalDist = 1","pinned":true,"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":true,"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":true,"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\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof r = slider({\n min: 0, \n max: 20, \n step: 1, \n value: 10, \n title: \"Social distancing radius\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"viewof image = html``","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.jpg\").image()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1036,"value":"legend = FileAttachment(\"background-final-04.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"// playscrubber = {Scrubber(numbers, {loop: false, alternate: false, delay: 500, autoplay: false})}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":928,"value":"md `Graph starts here`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"barchart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .selectAll(\"g\")\n .data(series)\n .join(\"g\")\n .attr(\"fill\", d => color(d.key))\n .selectAll(\"rect\")\n .data(d => d.map(v => Object.assign(v, {key: d.key})))\n .join(\"rect\")\n .attr(\"x\", d => x(d[0]))\n .attr(\"y\", ({data: [name]}) => y(name))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"height\", y.bandwidth())\n .append(\"title\")\n .text(({key, data: [name, value]}) => `${name}\n${formatValue(value.get(key))} ${key}`);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"data = {\n const categories = {\n \"norm_deaths\": \"Deaths_normal\",\n \"norm_symptoms \": \"Symptomatic_normal\",\n \"norm_no_symptoms\": \"Asymptomatic_normal\",\n \"act_no_symptoms\": \"Asymptomatic_action\",\n \"act_symptoms\": \"Symptomatic_action\",\n \"act_deaths \": \"Deaths_action\"\n };\n\n const data = d3.csvParse(await FileAttachment(\"politifact3.csv\").text(), ({days: name, status: category, count: value}) => categories[category] ? {name, category: categories[category], value: +value} : null);\n\n // Normalize absolute values to percentage.\n // NEEDS CORRECTION ***\n d3.rollup(data, group => {\n const sum = d3.sum(group, d => d.value);\n for (const d of group) d.value /= sum;\n }, d => d.name);\n\n return Object.assign(data, {\n format: \".0%\",\n negative: \"← Under Normal Conditions\",\n positive: \"Results of Your Actions →\",\n negatives: [\"Deaths_normal\", \"Symptomatic_normal\", \"Asymptomatic_normal\"],\n positives: [\"Asymptomatic_action\", \"Symptomatic_action\", \"Deaths_action\"]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"signs = new Map([].concat(\n data.negatives.map(d => [d, -1]),\n data.positives.map(d => [d, +1])\n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"bias = d3.rollups(data, v => d3.sum(v, d => d.value * Math.min(0, signs.get(d.category))), d => d.name)\n \n// bias = d3.rollups(data, v => d3.sum(v, d => d.value * Math.min(0, signs.get(d.category))), d => d.name)\n// .sort(([, a], [, b]) => d3.ascending(a, b))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"series = d3.stack()\n .keys([].concat(data.negatives.slice().reverse(), data.positives))\n .value(([, value], category) => signs.get(category) * (value.get(category) || 0))\n .offset(d3.stackOffsetDiverging)\n (d3.rollups(data, data => d3.rollup(data, ([d]) => d.value, d => d.category), d => d.name))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"x = d3.scaleLinear()\n .domain(d3.extent(series.flat(2)))\n .rangeRound([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"y = d3.scaleBand()\n .domain(bias.map(([name]) => name))\n .rangeRound([margin.top, height - margin.bottom])\n .padding(2 / 33)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"color = d3.scaleOrdinal()\n .domain([].concat(data.negatives, data.positives))\n .range(d3.schemeSpectral[data.negatives.length + data.positives.length])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x)\n .ticks(width / 80)\n .tickFormat(formatValue)\n .tickSizeOuter(0))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", x(0) + 20)\n .attr(\"y\", -24)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.positive))\n .call(g => g.append(\"text\")\n .attr(\"x\", x(0) - 20)\n .attr(\"y\", -24)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.negative))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"yAxis = g => g\n .call(d3.axisLeft(y).tickSizeOuter(0))\n .call(g => g.selectAll(\".tick\").data(bias).attr(\"transform\", ([name, min]) => `translate(${x(min)},${y(name) + y.bandwidth() / 2})`))\n .call(g => g.select(\".domain\").attr(\"transform\", `translate(${x(0)},0)`))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"formatValue = {\n const format = d3.format(data.format || \"\");\n return x => format(Math.abs(x));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"height = bias.length * 30 + margin.top + margin.bottom\n//CHANGE THE MULTIPLICATION FACTOR FOR BIAS LENGTH HERE TO CHANGE HT OF BAR***","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":919,"value":"margin = ({top: 40, right: 20, bottom: 0, left: 20})\n// CHANGE THE MARGINS HERE TO ADJUST THE GRAPH WIDTH****","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"// d3 = require(\"d3@5\", \"d3-array@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"md `Graph ends here`","pinned":true,"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":true,"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`