31:T1ed1,IllinoisCovidChart = (selectedKeys, lang, labelOffsetDays = 70) => { const labelType = selectedKeys[0] === "confirmed_cases_change" ? "new" : "cumulative"; const series = d3 .stack() .keys(selectedKeys)(IllnoisDailyCovidCountsFiltered) .map(d => (d.forEach(v => (v.key = d.key)), d)); const x = d3 .scaleBand() .domain(dateRange) .range([margin.left, graphicWidth - margin.right]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]) .nice() .rangeRound([height - margin.bottom, margin.top]); const barColor = d3 .scaleOrdinal() .domain(series.map(d => d.key)) .range([confirmedColor, deathColor]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .style("font-size", "14px") .call( d3 .axisBottom(x) .tickSizeOuter(0) .tickFormat(d => d.toLocaleString(lang, { month: "short", day: "numeric", timeZone: "UTC" }) ) .tickValues(dateRangeDivided) ); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .style("font-size", "14px") .call(d3.axisLeft(y).tickFormat(d => d.toLocaleString())) .call(g => g.selectAll(".domain").remove()) .call(g => g .selectAll(".tick") .filter(function(d, i) { return i === 0; }) .attr("visibility", "hidden") ); const svg = d3.create("svg").attr("viewBox", [0, 0, graphicWidth, height]); svg.style("font-family", "Open Sans, Helvetica, Arial, sans-serif"); svg .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => barColor(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => { return x(d.data.date); }) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .append("title") .text(d => `${vizView}: ${d[1]}`) .append("text"); const maxDay = d3.greatest(IllnoisDailyCovidCountsFiltered, d => { if (typeof selectedKeys[1] === 'undefined') { return d[selectedKeys[0]]; } else { return d[selectedKeys[0]] > d[selectedKeys[1]] ? d[selectedKeys[0]] : d[selectedKeys[1]]; } }); const dataDelayDay = IllnoisDailyCovidCountsFiltered.filter( d => d.dateString === "2020-09-04" ); const labelOffset = x.bandwidth() * labelOffsetDays; const labels = svg.append("g"); // Label lines if (typeof selectedKeys[1] !== 'undefined') { const labelLineData = selectedKeys[0] === "confirmed_cases_change" ? dataDelayDay : [maxDay]; labels .append("g") .selectAll("path") .data(labelLineData) .join("path") .attr("stroke", "#555555") .attr("stroke-width", 1) .attr("stroke-dasharray", "2 2") .attr("transform", d => `translate(-${labelOffset},2)`) .attr("d", d => line([ [x(d.date), y(d[selectedKeys[0]] + d[selectedKeys[1]])], [ x(d.date) + labelOffset - 3, y(d[selectedKeys[0]] + d[selectedKeys[1]]) ] ]) ); if (selectedKeys[0] != "confirmed_cases_change") { labels .append("g") .selectAll("rect") .append("rect") .data([maxDay]) .join("rect") .attr("x", d => x(d.date) - labelOffset) .attr("y", d => y(d[selectedKeys[0]] + d[selectedKeys[1]]) + 50) .attr("fill", barColor(selectedKeys[1])) .attr("height", 22) .attr("width", 6); labels .append("g") .selectAll("rect") .append("rect") .data([maxDay]) .join("rect") .attr("x", d => x(d.date) - labelOffset) .attr("y", d => y(d[selectedKeys[0]] + d[selectedKeys[1]]) + 76) .attr("fill", barColor(selectedKeys[0])) .attr("height", 22) .attr("width", 6); labels .append("g") .selectAll("text") .attr("text-anchor", "start") .data([maxDay]) .join("text") .attr("transform", d => `translate(-${labelOffset},20)`) .style("font-size", "14px") .attr("x", d => x(d.date)) .attr("y", d => y(d[selectedKeys[0]] + d[selectedKeys[1]])) .append("tspan") .attr("x", d => x(d.date)) .style("font-size", "10px") .style("text-transform", "uppercase") .attr("fill", "#777777") .text(messageFormatter(labelType + ".biggest", lang).format()) .append("tspan") .attr("x", d => x(d.date)) .attr("dy", 20) .attr("fill", "#000000") .style("font-size", "12px") .style("font-weight", "bold") .style("text-transform", "none") .text(d => d.date.toLocaleString(lang, { month: "long", day: "numeric", timeZone: "UTC" }) ) .append("tspan") .attr("dy", 26) .style("font-weight", "normal") .attr("x", d => x(d.date) + 10) .text( d => `${messageFormatter(labelType + ".deaths", lang).format({ value: d[selectedKeys[1]].toLocaleString() })}` ) .append("tspan") .attr("x", d => x(d.date) + 10) .attr("dy", 26) .attr("fill", "#000000") .text( d => `${messageFormatter(labelType + ".cases", lang).format({ value: d[selectedKeys[0]].toLocaleString() })}` ); } else if (typeof selectedKeys[1] !== 'undefined') { labels .append("g") .append("g") .selectAll("text") .attr("text-anchor", "start") .data(dataDelayDay) .join("text") .attr("transform", d => `translate(-${labelOffset},20)`) .style("font-size", "14px") .attr("x", d => x(d.date)) .attr("y", d => y(d[selectedKeys[0]] + d[selectedKeys[1]])) .append("tspan") .attr("x", d => x(d.date)) .attr("dy", 2) .attr("fill", "#777777") .style("font-size", "12px") .text(messageFormatter("new.data1", lang).format()) .append("tspan") .attr("x", d => x(d.date)) .attr("dy", 12) .attr("fill", "#777777") .style("font-size", "12px") .text(messageFormatter("new.data2", lang).format()) .append("tspan") .attr("x", d => x(d.date)) .attr("dy", 12) .attr("fill", "#777777") .style("font-size", "12px") .text(messageFormatter("new.data3", lang).format()) .append("tspan") .attr("x", d => x(d.date)) .attr("dy", 12) .attr("fill", "#777777") .style("font-size", "12px") .text(messageFormatter("new.data4", lang).format()); } } svg .append("g") .attr("transform", "translate(10, 0)") .append("text") .style("font-size", "12px") .attr("fill", "#777777") .attr("text-anchor", "start") .attr("y", 0 + margin.top + height * 0.5) .append("tspan") .attr("x", d => x(IllnoisDailyCovidCountsFiltered[0].date)) .text(messageFormatter("start.line1", lang).format()) .append("tspan") .attr("x", d => x(IllnoisDailyCovidCountsFiltered[0].date)) .attr("dy", 18) .attr("dx", 15) .text(messageFormatter("start.line2", lang).format()); svg.append("g").call(xAxis); svg.append("g").call(yAxis); return html`

${messageFormatter(labelType + ".title", lang).format()}

${messageFormatter(labelType + ".subhed", lang).format()}

${svg.node()} ${footer(lang)}

`; }32:T4a0,footer = lang => html` `33:Tb87,translations = ({ en: { start: { line1: "← Jan. 24: First confirmed", line2: "case in Illinois" }, footer: "Source: Illinois Department of Health; last updated {lastupdated}.", new: { title: "New confirmed COVID-19 cases and deaths in Illinois by day", subhed: "Illinois saw a total of 10 confirmed cases of coronavirus between Jan. 24, 2020 and March 8, 2020, when the number of cases began to pick up. The state's first death due to COVID-19, the illness caused by the virus, was reported on March 16. Public health officials began reporting confirmed and probable cases combined on Nov. 6, following CDC guidance.", deaths: "{value} new deaths", cases: "{value} new cases", biggest: "Most cases in a day", data1: "IDPH reported 5,368", data2: "new cases due to", data3: "a data processing delay" }, cumulative: { title: "Total confirmed COVID-19 cases and deaths in Illinois by day", subhed: "Illinois saw a total of 10 confirmed cases of coronavirus between Jan. 24, 2020 and March 8, 2020, when the number of cases began to pick up. The state's first death due to COVID-19, the illness caused by the virus, was reported on March 16. Public health officials began reporting confirmed and probable cases combined on Nov. 6, following CDC guidance.", deaths: "{value} total deaths", cases: "{value} total cases", biggest: "Most recent total" } }, es: { start: { line1: "← Jan. 24: Primer caso", line2: "confirmado en Illinois" }, footer: "Fuente: sitio web del Departamento de Salud; última actualización {lastupdated}.", new: { title: "Nuevos casos confirmados de COVID-19 y muertes en Illinois por día", subhed: "Illinois vio un total de 10 casos confirmados de coronavirus entre el 24 de enero de 2020 y el 8 de marzo de 2020, cuando el número de casos comenzó a aumentar. La primera muerte del estado debido a COVID-19, la enfermedad causada por el virus, se informó el 16 de marzo.", deaths: "{value} nuevas muertes", cases: "{value} nuevos casos", biggest: "Mayor número de casos en un día", data1: "El IDPH reportó 5,368 ", data2: "nuevos casos, esto ", data3: "debido a un retraso", data4: "procesamiento de datos" }, cumulative: { title: "Total de casos confirmados de COVID-19 y muertes en Illinois por día", subhed: "Illinois vio un total de 10 casos confirmados de coronavirus entre el 24 de enero de 2020 y el 8 de marzo de 2020, cuando el número de casos comenzó a aumentar. La primera muerte del estado debido a COVID-19, la enfermedad causada por el virus, se informó el 16 de marzo.", deaths: "{value} muertes en total", cases: "{value} cases en total", biggest: "Total más reciente" } } })34:T5dc,IllnoisDailyCovidCountsFiltered = { const query = ` query getStateTestingResults($startDate: date!) { state_testing_results_change(order_by: {date: asc}, where:{date:{_gte:$startDate}}) { date confirmed_cases confirmed_cases_change confirmed_cases_change_pct confirmed_cases_minus_deaths deaths deaths_change deaths_change_pct total_tested total_tested_change total_tested_change_pct } state_testing_results_change_aggregate { aggregate { max { date } } } } `; return graphql({ query, operation: "getStateTestingResults", variables: { startDate } }).then(({ state_testing_results_change }) => state_testing_results_change.map( ({ date, confirmed_cases_change, ...row }) => ({ ...row, // The state changed how it reports out cases, including probable in the count starting on 11/6, // so we're manually modifying the change number here (since it was from a backlog of cases), but // leaving the total as of that date in place to match the state's overall numbers // http://www.dph.illinois.gov/news/public-health-officials-announce-10376-new-confirmed-cases-coronavirus-disease confirmed_cases_change: date === "2020-11-06" ? 10376 : confirmed_cases_change, dateString: date, date: new Date(date) }) ) ); }35:[] 2f:{"title":"COVID-19 in Illinois - Tracking the spread over time","cells":[{"id":0,"value":"md`# COVID-19 in Illinois - Tracking the spread over time\n\nThis notebook combines the Illinois Department of Health's automated data feed with manually collected and curated data from other official sources.\n\nIn this data, absolute values are _cumulative_ and \"change\" values represent the derived change relative to the previous measurement (which, prior to March 9, might be longer than one day).\n\nThanks to Brian Mackey and Janelle O'dea for their assistance compiling these figures.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"viewof deathColor = color({\n title: \"Color of deaths segment\",\n value: \"#f16913\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof confirmedColor = color({\n title: \"Color of cases segment\",\n value: \"#fdd0a2\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof vizView = select({\n title: \"Variable to display\",\n options: [\"total\", \"new\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"viewof startDate = date({\n title: \"Viz start date\",\n value: \"2020-03-09\",\n min: \"2020-01-24\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"IllinoisCumulativeCovidChartEN = IllinoisCovidChart(\n [\"confirmed_cases_minus_deaths\", \"deaths\"],\n \"en\",\n 160\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":936,"value":"IllinoisNewCaseCovidChartEN = IllinoisCovidChart(\n [\"confirmed_cases_change\", \"deaths_change\"],\n \"en\",\n 90\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1080,"value":"IllinoisCumulativeCovidChartES = IllinoisCovidChart(\n [\"confirmed_cases_minus_deaths\", \"deaths\"],\n \"es\",\n 160\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1079,"value":"IllinoisNewCaseCovidChartES = IllinoisCovidChart(\n [\"confirmed_cases_change\", \"deaths_change\"],\n \"es\",\n 90\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"maxWidth = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"graphicWidth = width >= maxWidth ? maxWidth : 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":1098,"value":"d3.greatest(IllnoisDailyCovidCountsFiltered, d => d.deaths_change)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1104,"value":"IllnoisDailyCovidCountsFiltered[IllnoisDailyCovidCountsFiltered.length - 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"dateRange = {\n let minDate = new Date(IllnoisDailyCovidCountsFiltered[0].dateString);\n let maxDate = new Date(\n IllnoisDailyCovidCountsFiltered[\n IllnoisDailyCovidCountsFiltered.length - 1\n ].dateString\n );\n return d3.utcDay.range(+minDate, +maxDate + 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"dateRangeDivided = [\n IllnoisDailyCovidCountsFiltered[0].date,\n IllnoisDailyCovidCountsFiltered[\n Math.floor(IllnoisDailyCovidCountsFiltered.length / 4)\n ].date,\n IllnoisDailyCovidCountsFiltered[\n Math.floor(IllnoisDailyCovidCountsFiltered.length / 2)\n ].date,\n IllnoisDailyCovidCountsFiltered[\n Math.floor((3 * IllnoisDailyCovidCountsFiltered.length) / 4)\n ].date,\n IllnoisDailyCovidCountsFiltered[IllnoisDailyCovidCountsFiltered.length - 1]\n .date\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":765,"value":"line = d3.line()","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"//height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"margin = ({ top: 20, right: 40, bottom: 30, left: 70 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1075,"value":"md`# Translation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"DataLastUpdated = new Date(IllnoisDailyCovidCountsFiltered.slice(-1)[0].date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1162,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"md`# Imports + data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1071,"value":"lodash = require(\"lodash\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1135,"value":"import { graphql } from \"@eads/covid-19-graphql-helpers\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"import { messageFormatter } with {\n translations\n} from \"@chicagoreporter/formatjs-helpers\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"import { IllinoisDailyCovidCounts } from \"@chicagoreporter/coronavirus-illinois-historical-counts\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require(\"d3\", \"d3-array\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"import { date, select, color } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}