import { countyCases } from "@asg017/control-chart-challenge-starter-pack-the-la-times-covid-dat"
Plot.barY(countyCases, { x: "date", y: "new_confirmed_cases" }).plot()
Plot.barY(countyCases.slice(0, n), {
x: "date",
y: "new_confirmed_cases"
}).plot()
Plot.barY(countyCases, { x: "date", y: "new_confirmed_cases" }).plot({
x: { ticks: countyCases.map((d) => d.date).filter((d, i) => i % m === 0) }
})
Plot.barY(countyCases, { x: "date", y: "new_confirmed_cases" }).plot({
x: {
ticks: d3.utcMonth.range(...d3.extent(countyCases, (d) => d.date)),
tickFormat: "%b"
}
})
ticks = d3.utcMonth.range(...d3.extent(countyCases, (d) => d.date))
ticks.map(d3.timeFormat("%b"))
Plot.plot({
x: {
ticks: d3.utcMonth.range(...d3.extent(countyCases, (d) => d.date)),
tickFormat: "%b"
},
marks: [
Plot.barY(countyCases, { x: "date", y: "new_confirmed_cases" })
// other marks
]
})
multiFormat = {
const formatMillisecond = d3.utcFormat(".%L"),
formatSecond = d3.utcFormat(":%S"),
formatMinute = d3.utcFormat("%I:%M"),
formatHour = d3.utcFormat("%I %p"),
formatDay = d3.utcFormat("%a %d"),
formatWeek = d3.utcFormat("%b %d"),
formatMonth = d3.utcFormat("%B"),
formatYear = d3.utcFormat("%Y");
return function (date) {
return (d3.utcSecond(date) < date
? formatMillisecond
: d3.utcMinute(date) < date
? formatSecond
: d3.utcHour(date) < date
? formatMinute
: d3.utcDay(date) < date
? formatHour
: d3.utcMonth(date) < date
? d3.utcWeek(date) < date
? formatDay
: formatWeek
: d3.utcYear(date) < date
? formatMonth
: formatYear)(date);
};
}
Plot.barY(countyCases, { x: "date", y: "new_confirmed_cases" }).plot({
x: {
ticks: d3.utcMonth.range(...d3.extent(countyCases, (d) => d.date)),
tickFormat: multiFormat
}
})
import {notice} 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.
