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
}))
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"})
]
})
Those big spikes are mistakes in my data collection. One is snowboarding for 16 hours, another is cycling at 110kph for 3 hours!
https://pbs.twimg.com/media/E-kBIaoUcAMnIFU?format=jpg&name=900x900
We can either filter them out, or crop the bounds of the y axis. Which you'd do depends on how much you know about the data and how it was collected. Those big spikes are mistakes in my data collection.
Plot.plot({
y: {
grid: true,
domain: [0, 4500],
label: "↑ Calories expended"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, {x: "date", y: "cals"})
]
})Plot.plot({
y: {
grid: true,
domain: [0, 5000],
label: "↑ Calories expended"
},
marks: [
Plot.ruleY([0]),
Plot.line(fit, {x: "date", y: "cals"})
]
})
data_to_plot = [
{
x: fit.map(x=>x.date),
y: fit.map(x=>x.cals),
mode: 'lines',
name: "Calories",
},
{
x: fit.map(x=>x.date),
y: fit.map(x=>x.walking / 1000 / 60 /60),
mode: 'lines',
yaxis: 'y2',
name: "Hours of Walking",
}
];
{
let layout = {
width: width,
title: 'Calories expended by me over the last 6 years',
xaxis: {
title: 'Date 🗓️',
showgrid: true,
zeroline: false,
},
yaxis: {
title: 'Calories',
range: [0, 4500],
showline: false,
showgrid: false,
},
yaxis2: {
title: 'Hours of walking',
overlaying: 'y',
side: 'right',
range: [0, 8],
showline: false,
showgrid: false,
}
}
const div = DOM.element('div');
Plotly.newPlot(div, data_to_plot, layout);
return div;
}
data_to_plot_v2 = [
{
x: fit.map(x=>x.date),
y: fit.map(x=>x.cals),
mode: 'lines',
name: "Calories",
},
{
x: fit.map(x=>x.date),
y: fit.map(x=>x.walking / 1000 / 60 /60),
mode: 'lines',
xaxis: 'x2',
yaxis: 'y2',
name: "Hours of Walking",
}
];
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
