25:null 26:["$","title",null,{"children":"Untitled | dishitaturakhia | Observable"}] 2b:Tde3,md`## Consolidated dashboard ### Health Measures Taken by You:
${ //slider 01 slider({ title: '1. Wear Masks! 😷 : Percentage of population wearing masks', desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 100, step: 1, value: 75, 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'; } })} ${ //slider 02 slider({ title: '2. Wash Hands 🧼👏 : Percentage of population washing hands', desc: 'TOOLTIP.', descStyle: { 'margin-top': '0px', 'pointer-events': 'none' }, min: 0, max: 100, step: 1, value: 75, 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'; } })} ${ // slider 03 slider({ title: '3. Social Distance: How many feet of distance do you maintain?', descStyle: { 'pointer-events': 'none' }, min: 0, max: 6, step: 1, value: 0, theme: 'white-round', background: { type: 'progress', colors: ['#F2F2F2', '#1f9aad', '#F2F2F2'] }, oninput: objs => { objs.output.textContent = objs.value == 6 ? 'Congrats, you did it! 🚶------🚶' : 'Not enough distance yet 👬. Only ' + (6 - objs.value) + ' more ft to go!'; 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, ''); } })} ### Health resources in your area: 👩‍⚕️: - How many hospital beds in your area?
🏥: - 🛌No. of hospital beds used ${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('🛌'); } }) }` 2c: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; }2d: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; }2e: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%)`; } }2f: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; } `30:[] 29:{"id":"2bed8a491d11d59a","slug":"untitled/3","title":"","thumbnail":"d027677590a9a2644390a6aa80708a18c1b6bb28d396af8184a26ecf6bbbdae8","access_level":"public","create_time":"$D2020-04-24T21:43:16.628Z","update_time":"$D2020-04-25T14:44:16.229Z","view_time":null,"first_public_time":"$D2020-04-24T21:43:51.180Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"be32f447d5d01bce","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":"starter_2024"},"version":283,"publish_version":283,"role":null,"authored":false,"authors":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null}],"members":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"$undefined","cells":[{"id":231,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"mutable HOSPITAL_BEDS = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"slider({\n title: 'Resources Available',\n desc: \"\",\n min: 0,\n max: 100,\n step: 1,\n \n divAttrs: {\n id: 'slider1'\n },\n divStyle: {\n display: 'inline-block'\n },\n sliderStyle: {\n width: '200px'\n },\n theme: 'white-round', //or default-round\n oninput: objs => {\n let secondSlider = d3.select('#slider2');\n if (!secondSlider.empty()) {\n secondSlider.node().update(100 - objs.value);\n secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress);\n objs.slider.style.background = d3.interpolateCool(objs.progress);\n if (objs.value >= 50) {\n objs.output.textContent = '💃';\n secondSlider.select('span').node().textContent = '🕺';\n } else {\n objs.output.textContent = '🕺';\n secondSlider.select('span').node().textContent = '💃';\n }\n } else {\n objs.slider.style.background = d3.interpolateCool(objs.progress);\n objs.output.textContent = '💃';\n };\n }\n})\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"slider({\n title: 'Resources Used',\n desc: '',\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n divAttrs: {\n id: 'slider2'\n },\n divStyle: {\n display: 'inline-block'\n },\n sliderStyle: {\n width: '200px'\n },\n theme: 'white-round', //or `default-round\n oninput: objs => {\n let secondSlider = d3.select('#slider1');\n if (!secondSlider.empty()) {\n secondSlider.node().update(100 - objs.value);\n secondSlider.select('input').node().style.background = d3.interpolateCool(1 - objs.progress);\n objs.slider.style.background = d3.interpolateCool(objs.progress);\n if (objs.value <= 50) {\n objs.output.textContent = '🕺';\n secondSlider.select('span').node().textContent = '💃';\n } else {\n objs.output.textContent = '💃';\n secondSlider.select('span').node().textContent = '🕺';\n }; \n } else {\n objs.slider.style.background = d3.interpolateCool(objs.progress);\n objs.output.textContent = '🕺';\n };\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md ` ------- slider functions below------------------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"slider = (settings = {}) => {\n\n settings.min = settings.min == undefined ? settings.max - 1 || 0 : settings.min;\n settings.max = settings.max || settings.min + 1 || 1;\n settings.value = settings.value == undefined ? (settings.min + settings.max) / 2 : settings.value;\n settings.step = settings.step || (settings.max > settings.min\n ? (settings.max - settings.min) / 10\n : (settings.min - settings.max) / 10) || 0.1;\n\n settings.utilities = {};\n\n if (settings.background) {\n settings.utilities.background = setSliderBackground;\n };\n\n if (settings.highlight) {\n settings.utilities.highlight = highlightSlider;\n };\n\n return input(settings, 'slider');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"setGlobalStyles = function(style) {\n\n d3.selectAll('.inputStyles')\n .data([style])\n .enter()\n .append('style')\n .attr('class', 'inputStyles')\n .html(themes);\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"setSliderBackground = (settings, objs) => {\n\n let type = settings.type,\n color = settings.color,\n colors = settings.colors,\n progress = objs.progress,\n interpolation = settings.interpolation,\n custom = false;\n\n if (!interpolation) interpolation = d3.interpolate;\n else custom = true;\n\n type == 'normal' ? objs.slider.style.background = color : type == 'double' ? objs.slider.style.background = `linear-gradient(90deg, ${colors[0]} ${progress * 100}%, ${colors[1]} 0%)` : type == 'interpolate' ? objs.slider.style.background = (custom ? interpolation(progress) : interpolation(colors[0], colors[1])(progress)) : type == 'progress' ? (custom ? objs.slider.style.background = `linear-gradient(90deg, ${interpolation(progress)} ${progress * 100}%, ${color || interpolation(0)} 0%)` : objs.slider.style.background = `linear-gradient(90deg, ${interpolation(colors[0], colors[1])(progress)} ${progress * 100}%, ${colors[2] || colors[0]} 0%)`) : 0;\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2a:"$29:body"