31:T69b,multiRegionRollingAverageChart = async function(regions, metric, lang) { await triggerEmbedAnalytics(`IL Restore plan metrics - ${lang}`); const regionData = allRegionsRestoreData; const lastUpdatedStr = DataLastUpdated.toLocaleString(lang, { month: "long", day: "numeric", timeZone: "utc" }); //link should probably change const source = messageFormatter("footer", lang).format({ a: str => html`${str}`, lastupdated: lastUpdatedStr }); const credits = "Paula Friedrich/WBEZ, Pat Sier/City Bureau, David Eads, Asraa Mustufa"; return html` ${header(lang)}

${rollingAvgChartHeader(activePlanRegion, metric, lang)} ${ILrollingAverageChart(activePlanRegion, metric, lang)}

${regionData .filter( region => region.properties.id !== activePlanRegion.properties.id ) .map( region => html`

${rollingAvgChartHeader(region, metric, lang)} ${ILrollingAverageChart(region, metric, lang)}

` )}

${footer(credits, source, "en")}`; }32:T137b,ILrollingAverageChart = function(region, selectedKey, lang) { // Since we're merging date records, we need to filter out records where the selected item isn't present const series = region.properties.metrics.filter( data => data[selectedKey] !== undefined ); const yMax = selectedKey === "testPositivity" ? maxRate : 1; //scales const x = d3 .scaleBand() .domain(dateRange) .range([margin.left, graphicWidth - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, yMax]) .nice() .rangeRound([height - margin.bottom, margin.top]); // Area const metricArea = d3 .area() .x(d => x(d.date) + x.bandwidth() / 2) .y0(y(0)) .y1(d => y(d[selectedKey])); //Line const averageLine = d3 .line() .x(d => x(d.date) + x.bandwidth() / 2) .y(d => y(d[selectedKey])); //Label settings const thresholdLabelOffsetX = lang === "es" ? -220 : -160; const thresholdLabelOffsetY = -10; const phaseLabelOffsetX = -30; const phaseLabelOffsetY = 20; const labelFontSize = "1.6rem"; //Axes const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .style("font-size", labelFontSize) .style("color", tickColor) .call( d3 .axisBottom(x) .tickSizeOuter(0) .tickFormat(d => d.toLocaleString(lang, { month: "short", day: "numeric", timeZone: "UTC" }) ) .tickValues(dateRangeDivided) .tickPadding(8) ); const yAxis = g => g .attr("transform", `translate(${margin.left - 10},0)`) .style("font-size", labelFontSize) .style("color", tickColor) .call( d3 .axisLeft(y) .ticks(3) .tickFormat(d => d.toLocaleString(lang, { style: "percent" })) ) .call(g => g.selectAll(".domain").remove()) .call(g => g.selectAll(".tick").filter(function(d, i) { return i === 0; }) ); const svg = d3.create("svg").attr("viewBox", [0, 0, graphicWidth, height]); svg.append("g").call(xAxis); svg.append("g").call(yAxis); // Add area under const rollingAvgArea = svg .append("g") .append("path") .datum(series) .attr("fill", barColor) .attr("d", metricArea); //Add average line const rollingAvg = svg .append("g") .append("path") .attr("fill", "none") .attr("stroke", lineColor) .attr("stroke-miterlimit", 1) .attr("stroke-width", 3) .attr("d", averageLine(series)); //Add annotations const valueLabels = svg .append("g") .selectAll("text") .data([series[series.length - 1]]) .join("text") .attr("transform", "translate(10, 8)"); valueLabels .append("tspan") .text(d => d[selectedKey].toLocaleString(lang, { style: "percent", maximumSignificantDigits: 2 }) ) .attr("x", d => x(d.date)) .attr("y", d => y(d[selectedKey])) .attr("fill", lineColor) .style("font-family", "var(--sans-serif)") .style("font-weight", "bold") .style("font-size", labelFontSize); const thresholdLabel = svg.append("g"); const thresholdData = [ { date: dateRange[0], [selectedKey]: thresholdPoints[selectedKey] }, { date: dateRange[dateRange.length - 1], [selectedKey]: thresholdPoints[selectedKey] } ]; thresholdLabel .selectAll("path") .data([thresholdData]) .join("path") .attr("stroke", "#00845a") .attr("stroke-width", 4) .attr("stroke-dasharray", "4 8") .attr("d", averageLine); thresholdLabel .selectAll("text") .data([thresholdPoints[selectedKey]]) .join("text") .style("font-size", labelFontSize) .attr("x", d => x(lastDate)) .attr("y", d => y(d)) .attr( "transform", `translate(${thresholdLabelOffsetX},${thresholdLabelOffsetY})` ) .style("fill", "#006344") .style("font-family", "var(--sans-serif)") .style("font-weight", "bold") // TODO: Update annotation based on value .text(messageFormatter(`annotations.testPositivity`, lang).format()); const reopeningLabels = svg.append("g"); reopeningLabels .selectAll("path") .data(reopening) .join("path") .attr("stroke", "#555555") .attr("stroke-width", 1) .attr("stroke-dasharray", "2 2") .attr("d", d => d3.line()([[x(d.date), y(-.045)], [x(d.date), y(-.06)]])) .attr("transform", `translate(${x.bandwidth() / 2}, 0)`); reopeningLabels .selectAll("text") .data(reopening) .join("text") .attr("x", d => x(d.date)) .attr("y", y(-.06)) .style("fill", tickColor) .style("font-family", "var(--sans-serif)") .style("font-size", labelFontSize) .text(d => messageFormatter(`phases.${d.phase}`, lang).format()) .attr("transform", `translate(${phaseLabelOffsetX},${phaseLabelOffsetY})`); return html`${svg.node()}`; }33:Ta60,header = lang => { const positivityRecords = activePlanRegion.properties.metrics.filter( data => data.testPositivity !== undefined ); const lastPositivityRecord = positivityRecords[positivityRecords.length - 1]; const activeRate = lastPositivityRecord.testPositivity.toLocaleString(lang, { style: "percent", maximumSignificantDigits: 2 }); const rateStr = lang === "en" ? html`${activeRate} testing positivity rate` : html`promedio móvil de ${activeRate} en pruebas positivas`; const activePlanRegionName = messageFormatter( `regions.${activePlanRegion.properties.id}`, lang ).format(); return html`

${messageFormatter("header.subtitle1", lang).format({ activeRegion: activePlanRegionName, activeAvgRate: str => rateStr, reportDate: new Date(lastPositivityRecord.date).toLocaleString(lang, { month: "long", day: "numeric", timeZone: "utc" }), activeChange: str => html` ${activePlanRegion.properties.metrics > 0 ? "up" : "down"} ${Math.abs(activePlanRegion.properties.metrics).toLocaleString( lang, { style: "percent", maximumSignificantDigits: 2 } )}`, b: str => html`${str}` })}

${messageFormatter("header.subtitle", lang).format({ a: str => html`${str}`, dailyRate: str => html`${str}`, avgRate: str => html`${str}`, stateRate: "NULL", b: str => html`${str}` })}

`; }34:Tb80,rollingAvgChartHeader = function(region, metric, lang) { const planRegionName = messageFormatter( `regions.${region.properties.id}`, lang ).format(); // const metricData = // metric === "daily_positivity" // ? region.properties.metrics.dailyMetrics // : region.properties.metrics.dailyMetricsHA; // TODO: Allow others const metricData = region.properties.metrics; const positivityRecords = region.properties.metrics.filter( data => data.testPositivity !== undefined ); const lastPositivityRecord = positivityRecords[positivityRecords.length - 1]; const lastDateStr = new Date(lastPositivityRecord.date).toLocaleString(lang, { month: "long", day: "numeric", timeZone: "utc" }); const metricStr = messageFormatter( `metrics.daily_positivity_7rollavg`, lang ).format(); // const metricStr = messageFor const latestVal = lastPositivityRecord.testPositivity.toLocaleString(lang, { style: "percent", maximumSignificantDigits: 2 }); // const latestVal = metricData[metricData.length - 1][ // `${metric}_7rollavg` // ].toLocaleString(lang, { // style: "percent", // maximumSignificantDigits: 2 // }); // const changeSymbol = region.properties.metrics[] // const changeSymbol = // region.properties.metrics[`${metric}_change`] > 0 ? "+" : "-"; // const changeVal = Math.abs( // region.properties.metrics[`${metric}_change`] // ).toLocaleString(lang, { // style: "percent", // maximumSignificantDigits: 2 // }); // ${ // metric == "daily_positivity" // ? messageFormatter("latestChange", lang).format({ // change: changeSymbol, // changeAmt: changeVal, // span: str => html`${str}` // }) // : '' // } return html`

${regionMiniMap(region.properties.id)}

${planRegionName}

${messageFormatter("latest", lang).format({ date: lastDateStr, metric: metricStr, val: html`${latestVal}`, span: str => html`${str}`, block: `` })}

`; }35:T4d3,footer = (credits, source, lang) => html` `36:T1085,translations = ({ en: { latest: "{val} {metric} as of {date}", latestChange: `({change}{changeAmt} over 14-day period)`, footer: "Source: Illinois Department of Health; last updated {lastupdated}. Rolling averages are reported with a three-day lag.", header: { subtitle: "Testing positivity rates — the percentage of tests returned positive on any given day — are one of several metrics the state is watching to determine whether to reinstate restrictions in a given region. If the positivity rate's rolling 7-day average is above 8% for three consecutive days, the state may implement additional mitigations in the affected region.", subtitle1: "It looks like you're in the {activeRegion} of Illinois' reopening plan. Your region has a as of {reportDate}.", aboveEight: "The REGION has seen a rolling average at or above 8% for the last NUMBER." }, annotations: { testPositivity: "8% threshold", phase: "{phase} began", ICU_avail: "14% threshold", vents_avail: "14% threshold", med_surg_availability: "14% threshold" }, phases: { phase2: "Phase 2", phase3: "Phase 3", phase4: "Phase 4" }, metrics: { testPositivity: "testing positivity rolling average", daily_positivity: "daily positivity rate", daily_positivity_7rollavg: "rolling average", ICU_avail: "available ICU beds", ICU_avail_7rollavg: "rolling average", vents_avail: "available ventilators", vents_avail_7rollavg: "rolling average", med_surg_availability: "med surge availability", med_surg_availability__7rollavg: "rolling average" }, regions: { 1: "North region", 2: "North-Central region", 3: "West-Central region", 4: "Metro East region", 5: "Southern region", 6: "East-Central region", 7: "South Suburban region", 8: "West Suburban region", 9: "North Suburban region", 10: "Suburban Cook region", 11: "Chicago region" } }, es: { latest: "{val} {metric} hasta el {date}", latestChange: `({change}{changeAmt} over 14-day period)`, footer: "Fuente: Departamento de Salud de Illinois; actualización más reciente { lastupdated } . Los promedios son presentados con un retraso de 3 días.", header: { subtitle1: "Parece que estás en la {activeRegion} del plan de reapertura de Illinois. Actualmente, tu región tiene un , esto hasta el {reportDate}.", subtitle: "Las tasas de positividad de la pruebas - el porcentaje de pruebas que dieron positivo en un día determinado -, son una de las varias medidas que el estado toma en cuenta para determinar si se restablecen las restricciones en una región determinada. Si el promedio móvil de 7 días de la tasa de positividad es superior al 8% durante tres días consecutivos, el estado puede implementar mitigaciones adicionales en la región afectada.", aboveEight: "The REGION has seen a rolling average at or above 8% for the last NUMBER." }, annotations: { testPositivity: "8% de valor límite" }, metrics: { testPositivity: "promedio móvil", daily_positivity: "daily positivity rate", daily_positivity_7rollavg: "de promedio", ICU_avail: "available ICU beds", ICU_avail_7rollavg: "de promedio", vents_avail: "available ventilators", vents_avail_7rollavg: "de promedio", med_surg_availability: "med surge availability", med_surg_availability__7rollavg: "de promedio" }, regions: { 1: "Región norte", 2: "Región central-norte", 3: "Región central-oeste", 4: "Región metropolitana del este", 5: "Región sur", 6: "Región central-este", 7: "Región suburbana sur", 8: "Región suburbana oeste", 9: "Región suburbana norte", 10: "Región suburbana del Condado de Cook", 11: "Región de Chicago" } } })37:T4b8,restoreDataDates = { const { TestPositivity, HospitalAvailability, CLIAdmissions } = activeRestoreData; const positivityData = TestPositivity.map( ({ reportDate, regionID, testPositivityRollingAvg }) => ({ date: d3.utcDay(new Date(reportDate)), regionID, testPositivity: testPositivityRollingAvg / 100 }) ); const hospitalData = HospitalAvailability.map( ({ reportDate, regionID, AverageMedSurgAvailPct, AverageICUAvailPct }) => ({ date: d3.utcDay(new Date(reportDate)), regionID, AverageMedSurgAvailPct, AverageICUAvailPct }) ); const admissionsData = CLIAdmissions.map( ({ reportDate, regionID, CLIAdmissionsRA }) => ({ date: d3.utcDay(new Date(reportDate)), regionID, CLIAdmissionsRA }) ); const flattenDate = ({ values }) => values.reduce((acc, curr) => ({ ...acc, ...curr }), {}); return d3 .nest() .key(({ regionID }) => `region${regionID}`) .key(({ date }) => date) .entries([...positivityData, ...hospitalData, ...admissionsData]) .reduce( (acc, { key, values }) => ({ ...acc, [key]: values.map(flattenDate) }), {} ); }38:[{"id":"963d16ab9405495f20452b561d344e23570f5ef083b6afe7cd86710c09651f57387c573b01f7ace162a413c9c627adcb86aa78d91a47c9c13af8937cb152e572","href":"https://static.observableusercontent.com/files/963d16ab9405495f20452b561d344e23570f5ef083b6afe7cd86710c09651f57387c573b01f7ace162a413c9c627adcb86aa78d91a47c9c13af8937cb152e572","name":"IllinoisPlanRegionGeoData(4).json","type":"application/json","lastModified":1595003345741.496,"size":131156},{"id":"6cdf0e1c8ce4a42d752c04052de304daab7e72cef090288770849cde75d2780f826d7fea8afb90a98828ed22e3016bcfbe61814e85f0e5bd2c601be0dbc2c3ec","href":"https://static.observableusercontent.com/files/6cdf0e1c8ce4a42d752c04052de304daab7e72cef090288770849cde75d2780f826d7fea8afb90a98828ed22e3016bcfbe61814e85f0e5bd2c601be0dbc2c3ec","name":"IllinoisPlanRegionGeoData.json","type":"application/json","lastModified":1596658709922.959,"size":775343}] 2f:{"title":"COVID-19 In Illinois - Restore Metrics","cells":[{"id":0,"value":"md`# COVID-19 In Illinois - Restore Metrics\n\nThis notebook uses the Illinois Department of Health's automated [Restore Metrics](https://www.dph.illinois.gov/restore) data feed.\n\nThe data feed includes four metrics — the multi-region chart currently works best for the \\`\\`daily_positivity \\`\\` metric. The rest are a work in progress.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`# Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof barColor = color({\n title: \"Bar Color\",\n value: \"#afd8f7\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof lineColor = color({\n title: \"Line Color\",\n value: \"#143e93\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"viewof tickColor = color({\n title: \"Label/tick Color\",\n value: \"#343434\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"viewof metric = select({\n title: \"Metric\",\n options: [\n \"testPositivity\",\n \"AverageMedSurgAvailPct\",\n \"AverageICUAvailPct\",\n \"CLIAdmissionsRA\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1602,"value":"viewof selectRegion = select({\n title: \"Region\",\n options: allRegionsRestoreData.map(({ properties: { id, name } }) => ({\n label: `${name} region`,\n value: id\n })),\n value: geoActivePlanRegion.properties.id\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"ILRollingAverageChartEN = html`\n ${await multiRegionRollingAverageChart(\n allRegionsRestoreData,\n metric,\n \"en\"\n )} `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"ILRollingAverageChartES = html`\n ${await multiRegionRollingAverageChart(\n allRegionsRestoreData,\n metric,\n \"es\"\n )} `","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"line = d3.line()","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"margin = ({ top: 20, right: 70, bottom: 80, left: 80 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"maxWidth = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"graphicWidth = width >= maxWidth ? maxWidth : 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"DataLastUpdated = new Date(\n activeRestoreData.lastUpdatedDate.year,\n activeRestoreData.lastUpdatedDate.month - 1,\n activeRestoreData.lastUpdatedDate.day\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1004,"value":"md`# Geolocation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"{\n const button = html`