Published
Edited
May 12, 2020
1 star
Insert cell
Insert cell
viewof selectedState = select({
title: "View data for",
options: [
{ label: "entire country", value: "US" },
...us.objects.states.geometries
.sort((a, b) => d3.ascending(a.properties.name, b.properties.name))
.map(d => ({ label: d.properties.name, value: d.id }))
]
})
Insert cell
viewof selectedDate = {
const [start, end] = d3.extent(csv.map(d => d.date));
const dates = d3.utcDay.range(start, d3.utcDay.offset(end, 1));
const fmt = d3.utcFormat("%a %b %d, %Y");

return slider({
min: 0,
max: dates.length - 1,
step: 1,
title: "Select date",
value: this ? this.input.value : dates.length - 1,
getValue: n => dates[n.value],
format: fmt
});
}
Insert cell
Insert cell
chart1 = html`
<svg width=${width} height=${width / 2} viewBox="0 0 1000 500">
<g class="legend" transform="translate(130,0)">
${legend({
color,
title: "Cases per capita (log scale)",
tickValues: [1e-4, 1e-3, 1e-2],
tickFormat: v => (v === 0 ? "0" : `1 in ${d3.format("~s")(1 / v)}`)
})}
</g>
<svg id="plot" />
<svg id="map" />
</svg>
`
Insert cell
Insert cell
Preact.render(growthRate.DOM)
Insert cell
Insert cell
chart5 = Preact.render(trajectories.DOM)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
selectedDateAsISOString = (selectedDate || mostRecentDate).toISOString()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
unactivable = selection => selection.on("mouseover", null).on("mouseout", null)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more