The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Sep 5, 2021
17 stars
fit = (await FileAttachment("cals_and_walking_summary_data_per_day_for_BD.csv").csv()).map(d => ({
date: new Date(d["Start time"].replace(/ /, "T")),
cals: +d.cals,
walking: +d.walking
}))
Inputs.table(fit)
Plot.line(fit, {x: "date", y: "cals"}).plot()
Plot.plot({
y: {
grid: true,
label: "↑ Calories expended"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, {x: "date", y: "cals"})
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Calories expended"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, {x: "date", y: "cals"}),
Plot.dot(gaps, {x: "date", y: "cals", r: 20, stroke: "red"})
]
})
gaps = [
{date: new Date("2016-05-15"), cals: 500},
{date: new Date("2016-08-15"), cals: 1600},
{date: new Date("2018-12-01"), cals: 500}
]
Plot.plot({
y: {
grid: true,
label: "↑ Calories expended"
},
marks: [
Plot.ruleY([0]),
Plot.ruleX(fit, {x: "date", y: "cals"})
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Calories expended per day"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, Plot.binX(
{y: "sum", filter: null},
{x: "date", y: "cals", thresholds: d3.utcDay}
))
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Calories expended per day"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, Plot.binX(
{y: "median", filter: null},
{x: "date", y: "cals", thresholds: d3.utcDay}
))
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Calories expended per day (weekly median)"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, Plot.binX(
{y: "median", filter: null},
{x: "date", y: "cals", thresholds: d3.utcWeek}
))
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Calories expended per day (7-day rolling mean)"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, Plot.windowY(7, Plot.binX(
{y: "median", filter: null},
{x: "date", y: "cals", thresholds: d3.utcDay}
)))
]
})
Plot.plot({
y: {
grid: true,
label: "↑ Time spent walking per day (hours)",
transform: d => d / (1000 * 60 * 60)
},
marks: [
Plot.ruleY([0]),
Plot.ruleX(fit, {x: "date", y: "walking"})
]
})
html`${[
Plot.plot({
height: 240,
y: {
grid: true,
label: "↑ Calories expended"
},
marks: [
Plot.ruleY([0]),
Plot.ruleX(fit, {x: "date", y: "cals", stroke: "steelblue"})
]
}),
htl.html`<p>`,
Plot.plot({
height: 240,
y: {
grid: true,
label: "↑ Time spent walking per day (hours)",
transform: d => d / (1000 * 60 * 60)
},
marks: [
Plot.ruleY([0]),
Plot.ruleX(fit, {x: "date", y: "walking", stroke: "brown"})
]
})
]}`
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.
