Illinois COVID-19 data and visualizations. A personal project of David Eads + Grupo Visual.
IllinoisCumulativeCovidChartEN = IllinoisCovidChart(
["confirmed_cases_minus_deaths", "deaths"],
"en",
160
)
IllinoisNewCaseCovidChartEN = IllinoisCovidChart(
["confirmed_cases_change", "deaths_change"],
"en",
90
)
IllinoisCumulativeCovidChartES = IllinoisCovidChart(
["confirmed_cases_minus_deaths", "deaths"],
"es",
160
)
IllinoisNewCaseCovidChartES = IllinoisCovidChart(
["confirmed_cases_change", "deaths_change"],
"es",
90
)
maxWidth = 700
graphicWidth = width >= maxWidth ? maxWidth : 500
height = 400
dateRangeDivided = [
IllnoisDailyCovidCountsFiltered[0].date,
IllnoisDailyCovidCountsFiltered[
Math.floor(IllnoisDailyCovidCountsFiltered.length / 4)
].date,
IllnoisDailyCovidCountsFiltered[
Math.floor(IllnoisDailyCovidCountsFiltered.length / 2)
].date,
IllnoisDailyCovidCountsFiltered[
Math.floor((3 * IllnoisDailyCovidCountsFiltered.length) / 4)
].date,
IllnoisDailyCovidCountsFiltered[IllnoisDailyCovidCountsFiltered.length - 1]
.date
]
line = d3.line()
//height = 400
margin = ({ top: 20, right: 40, bottom: 30, left: 70 })
DataLastUpdated = new Date(IllnoisDailyCovidCountsFiltered.slice(-1)[0].date)
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)
})
)
);
}
lodash = require("lodash")
import { messageFormatter } with {
translations
} from "@chicagoreporter/formatjs-helpers"
import { IllinoisDailyCovidCounts } from "@chicagoreporter/coronavirus-illinois-historical-counts"
d3 = require("d3", "d3-array")
import { date, select, color } from "@jashkenas/inputs"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.