Published
Edited
Apr 29, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function Plots({ dimension }) {
const munged = add_derivatives({ dimension })(data).data;
const plots = [`Acceleration`, `Velocity`, `Position`].map((derivative) => {
return Plot.plot({
label: `${derivative} (${dimension})`,
...config,
y: {
...config.y,
tickFormat: derivative === `Acceleration` ? undefined : "s"
},
x: {
label: null
},
marks: [
Plot.dot(munged, {
...dot_config,
y: (d) => d[derivative.toLowerCase()]
})
]
});
});
return htl.html`${plots}`;
}
Insert cell
function add_derivatives({ dimension: dim }) {
return (data, facets) => {
const out = pipe(
data,
(arr) =>
arr.map((d) => {
const { [dim]: acceleration } = d;
return { ...d, acceleration };
}),
(arr) => {
const mean = d3.mean(arr, (d) => d.acceleration);
const std = d3.deviation(arr, (d) => d.acceleration);
return arr
.map((d) => ({
...d,
acceleration: (d.acceleration - mean) / std
}))
.filter((d) => Math.abs(d.acceleration) < 10);
},
(arr) =>
arr.map((d, i, arr) => {
const { dt, acceleration } = d;
const dv = acceleration * dt;
return { ...d, dv };
}),
(arr) => {
const cumsum = d3.cumsum(arr, (d) => d.dv);
return arr
.map((d, i) => ({ ...d, velocity: cumsum[i] }))
.map((d, i, arr) => {
const { dt, velocity } = d;
const dx = velocity * dt;
return { ...d, dx };
});
},
(arr) => {
const cumsum = d3.cumsum(arr, (d) => d.dx);
return arr.map((d, i) => ({ ...d, position: cumsum[i] }));
}
);
return {
data: out,
facets
};
};
}
Insert cell
Insert cell
function pipe(arr, ...fns) {
let out = arr;
for (const func of fns) {
out = func(out);
}
return out;
}
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