Public
Edited
Mar 17, 2021
covidData[0]
weeks = [
...new Set(
covidData.map(e => e.week).reduce((acc, w) => (acc.push(w), acc), [])
)
].sort((a, b) => a >= b)
groupedByWeek = d3.group(covidData, d => d.week)
covidData = d3
.csvParse(
await FileAttachment("positivity_by_week_by_group.csv").text(),
(d, i, columns) => (
d3.autoType(d),
{
week: d["WEEK"],
personType: d["PERSON_TYPE"],
allTests: d["ALL_TESTS"],
nvl: d["NVL(POSITIVE_TESTS,0)"],
groupPositivity: d["POSITIVITY_OF_GROUP"]
}
)
)
.sort((a, b) => b.WEEK - a.WEEK)
testsByWeekByPersonType = {
const h = {};
covidData.forEach(({ week, personType, allTests }) => {
h[week] ||= {};
h[week][personType] ||= {};
h[week][personType] = allTests;
});
return weeks
.map(w => {
return {
...{ week: w },
...h[w]
};
})
.map(w => ({
...initPersonObj(),
...w
}))
.map(w => ({
...w,
...{ total: personTypes.reduce((sum, pt) => (sum += w[pt]), 0) }
}));
}
personTypes = "Affiliate,Faculty,Staff,Student".split(",")
seriesCovid = d3
.stack()
.keys(personTypes)(testsByWeekByPersonType)
.map(d => (d.forEach(v => (v.key = d.key)), d))
xCovid = d3
.scaleBand()
.domain(weeks)
.range([margin.left, width - margin.right])
.padding(0.1)
yCovid = d3
.scaleLinear()
.domain([0, d3.max(seriesCovid, d => d3.max(d, d => d[1]))])
.rangeRound([height - margin.bottom, margin.top])
checkMax(seriesCovid)
function checkMax(s) {
return d3.max(s, d => d3.max(d, d => d[1]));
}
colorCovid = d3
.scaleOrdinal()
.domain(seriesCovid.map(d => d.key))
.range(d3.schemeSpectral[seriesCovid.length])
.unknown("#ccc")
xAxisCovid = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(xCovid).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove())
yAxisCovid = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(yCovid).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
formatValue = x => isNaN(x) ? "N/A" : x.toLocaleString("en")
height = 400
margin = ({top: 10, right: 10, bottom: 20, left: 40})
d3 = require("d3@6")
import {legend} from "@d3/color-legend"
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.
