{
const hull = flatDataPair.filter((d) => d.type === "hull"),
point = flatDataPair.filter((d) => d.type === "point"),
{ times } = data;
const trace = {
x: hull.map((d) => d.x),
y: hull.map((d) => d.y),
z: hull.map((d) => d.time),
type: "scatter3d",
mode: "lines",
opacity: 0.4,
line: {
color: hull.map((d) => d.time),
width: 5 // hull.map((d) => d.std)
}
};
const trace1 = {
x: point.map((d) => d.x),
y: point.map((d) => d.y),
z: point.map((d) => d.time),
type: "scatter3d",
mode: "markers",
// opacity: 0.5,
marker: {
size: 1.5,
color: "darkgreen"
}
};
const div = DOM.element("div");
Plotly.newPlot(div, [trace, trace1], layout);
return div;
}
Plot.plot({
width,
x: { grid: true, nice: true },
y: { grid: true, nice: true },
color: { legend: true },
marks: [
Plot.ruleY([0], { opacity: 0.5 }),
Plot.line(data, {
x: "i",
y: "value",
opacity: 0.5,
stroke: (d) => "Chn." + d.channel
}),
Plot.line(data, {
x: "i",
y: "value2",
stroke: (d) => "Chn." + d.channel,
strokeWidth: 2
})
]
})
flatDataPair = {
const flat = [];
dataPair.map((pair) => {
const { time, points, pointsHull, std } = pair;
points.map((point) => {
flat.push({ x: point[0], y: point[1], time, std, type: "point" });
});
pointsHull.map((point) => {
flat.push({ x: point[0], y: point[1], time, std, type: "hull" });
});
});
return flat;
}
flatDataPair
Type Table, then Shift-Enter. Ctrl-space for more options.
dataPair = {
const { channels, times } = data,
pair = [];
var dt, s1, s2, points, hull;
for (let t = 0; t < times; ++t) {
dt = data.filter((d) => d.time === t);
points = [];
for (let i = 0; i < channels; i += 2) {
s1 = dt.find((d) => d.channel === i);
s2 = dt.find((d) => d.channel === i + 1);
points.push([s1.value2, s2.value2]);
}
hull = d3.polygonHull(points);
hull.push(hull[0]);
pair.push({
time: t,
points,
pointsHull: hull,
std: dataStat[t].std
});
}
return pair;
}
dataPair
Type Table, then Shift-Enter. Ctrl-space for more options.
dataStat = {
const { channels, times } = data,
stat = [];
var array, mean, std;
for (let t = 0; t < times; ++t) {
array = data.filter((d) => d.time === t).map((d) => d.value2);
std = Math.sqrt(d3.variance(array));
mean = d3.mean(array);
stat.push({ std, mean, time: t });
}
return stat;
}
data = {
const data = [],
rnd = d3.randomNormal(),
{ channels, times } = userSetupForData,
channel = {};
var v = 0;
for (let c = 0; c < channels; ++c) {
channel[c] = { v1: v };
for (let t = 0; t < times; ++t) {
data.push({ i: c * times + t, channel: c, time: t, value: v });
if (t === times - 1) Object.assign(channel[c], { v2: v });
v += rnd();
}
}
data.map((d) => {
const { v1, v2 } = channel[d.channel],
{ value, time } = d;
const value2 = value - v1 - (time / (times - 1)) * (v2 - v1);
Object.assign(d, { value2 });
});
Object.assign(data, { channels, times });
return data;
}
data
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3")
Plotly = require("https://cdn.plot.ly/plotly-2.20.0.min.js")
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.
