Table(
d3.groups(data, d => d.state)
.filter(([, data]) => data.some(d => d.positiveIncrease))
.map(([key, data]) => ({
"State": key,
"Total cases": data[0].positive,
"New cases": data[0].positiveIncrease,
"Trend": data
})),
{
layout: "auto",
rows: Infinity,
sort: "New cases",
reverse: true,
maxWidth: 640,
format: {
"Trend": data => sparkarea({
x: data.map(d => d.date),
y: data.map(d => Math.max(0, d.positiveIncrease)),
xdomain
})
}
}
)
function sparkarea({
x: X,
y: Y,
xdomain = d3.extent(X),
ydomain = d3.extent(Y),
width = 240,
height = 20
}) {
const x = d3.scaleUtc(xdomain, [0, width]);
const y = d3.scaleLinear(ydomain, [height, 0]);
const area = d3.area()
.x((d, i) => x(X[i]))
.y1((d, i) => y(Y[i]))
.y0(height)
.defined((d, i) => !isNaN(X[i]) && !isNaN(Y[i]));
return d3.create("svg")
.attr("width", width)
.attr("height", height)
.style("vertical-align", "middle")
.style("margin", "-3px 0")
.call(g => g.append("path")
.attr("fill", "#faa")
.attr("d", area(data)))
.call(g => g.append("path")
.attr("fill", "none")
.attr("stroke", "red")
.attr("d", area.lineY1()(data)))
.node();
}
xdomain = d3.extent(data, d => d.date)
data = d3.csv("https://api.covidtracking.com/v1/states/daily.csv", d => {
d.date = `${d.date.slice(0, 4)}-${d.date.slice(4, 6)}-${d.date.slice(6, 8)}`;
d3.autoType(d);
return d;
})
d3 = require("d3@6")
import {Table} from "@observablehq/inputs"
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.
