Also listed in…
Coronavirus
chart.update(line)
height = width / 2
margin = ({top: 20, right: 30, bottom: 30, left: 40})
data = Object.assign(covid, { y: "U.S. cumulative positive case count" })
color = d3
.scaleSequential()
.interpolator(d3.interpolateRainbow)
.domain(x.domain())
format = d => (d < 100 ? d : d3.format(".2s")(d))
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(
d3
.axisLeft(y)
.tickFormat(format)
.ticks(5)
)
.call(g => g.select(".domain").remove())
.call(g =>
g
.select(".tick:last-of-type text")
.clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y)
)
xAxis = g =>
g.attr("transform", `translate(0,${height - margin.bottom})`).call(
d3
.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0)
)
xAxisLeft = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(
d3
.axisLeft(
xOn
)
.ticks(width / 80)
.tickSizeOuter(0)
)
.call(g =>
g
.append("text")
.attr("x", 4)
.attr("y", x(d3.max(data.map(d => d.on))) - 4)
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.attr("fill", "black")
.text("On this day we thought")
.call(halo)
)
xAxisTop = g =>
g
.attr("transform", `translate(0,${margin.top})`)
.call(
d3
.axisTop(x)
.ticks(width / 80)
.tickSizeOuter(0)
)
.call(g =>
g
.append("text")
.attr("x", width - margin.right)
.attr("y", 12)
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.attr("fill", "black")
.text("There were this many cases on this day")
.call(halo)
)
y = d3
.scaleLog()
.domain([1, d3.max(data, d => d.value)])
// .nice()
.range([height - margin.bottom, margin.top])
x = d3
.scaleUtc()
.domain(d3.extent([...data.map(d => d.on), ...data.map(d => d.about)]))
.range([margin.left, width - margin.right])
xOn = d3
.scaleUtc()
.domain(d3.extent(data.map(d => d.on)))
.range([margin.left, x(d3.max(data.map(d => d.on)))])
.nice()
options = [
{
label: html`Lines connect case counts estimated on the same date; x-axis shows the date they’re about.`,
value: { name: "on-over-about", line: lineAbout }
},
{
label: html`Lines connect case count estimates about the same date; x-axis shows date they’re made on.`,
value: { name: "about-over-on", line: lineOn }
}
]
lineOn = d3
.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.on))
.y(d => y(d.value))
lineAbout = d3
.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.about))
.y(d => y(d.value))
line2D = d3
.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.about))
.y(d => xOn(d.on))
covid = d3
.csvParse(
await FileAttachment("covid-combined@1.csv").text(),
({ on, about, positive }) => ({
on: new Date(on),
about: new Date(about),
value: +positive
})
)
.sort((a, b) => (+a.on === +b.on ? +a.about - b.about : +a.on - b.on))
d3 = require("d3@6")
dataByAbout = Array.from(d3.group(data, ({ about }) => +about).values())
dataByOn = Array.from(d3.group(data, ({ on }) => +on).values())
dataActual = data.filter(({ on, about }) => +on === +about)
function halo(text) {
text
.select(function() {
return this.parentNode.insertBefore(this.cloneNode(true), this);
})
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 4)
.attr("stroke-linejoin", "round");
}
import { html, svg } from "@observablehq/htl"
import { resample } from "@tophtucker/scrapbook"
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.
