Illinois COVID-19 data and visualizations. A personal project of David Eads + Grupo Visual.
Published
Edited
Oct 21, 2020
Importers
ChicagoCommunityAreaPovertyGeoJSON = {
// Due to the funny data structure, we have to define variables that change as the loop is run 😔
let headers, arealabel;
// Extract rows
const rows = d3.csvParseRows(
await fetch(`${spreadsheetUrl}&gid=${sheets.Poverty}`).then(response =>
response.text()
),
(row, idx) => {
// Reject the first row, blank rows
if (idx === 0 || row.every(el => el === "")) return;
// The second row has headers
if (idx === 1) {
headers = row.slice(1);
return;
}
// Rows without data in the second column have the community area name
if (!row[1]) {
arealabel = row[0];
return;
}
// Create data structure with the community area, variable (e.g. % below poverty) and values for each year/year range
return {
variable: row[0],
areanumber: parseInt(arealabel.split(" ")[0]).toString(),
years: Object.assign(
{},
...headers.map((k, i) => ({
[k]: parseFloat(row[i + 1].trim().replace(",", ""))
}))
)
};
}
);
const groupedByArea = d3.group(rows, d => d.areanumber, d => d.variable);
return boundaries.features.map(f => {
const group = groupedByArea.get(f.properties.area_numbe);
Object.assign(f.properties, { census: group });
return f;
});
}
// Currently unused; but should be used to build URLs like the hardcoded poverty URL below
sheets = ({
RaceEthnicity: "379790456",
Poverty: "196943864"
})
boundaries = fetch(boundariesUrl).then(response => response.json())
boundariesUrl = "https://data.cityofchicago.org/api/geospatial/cauq-8yn6?method=export&format=GeoJSON"
import { HyperGrid } from "@chicagoreporter/hypergrid"
d3 = require("d3@5", "d3-array")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
