Public
Edited
Sep 25, 2023
chart.update(dataAsArray)
redraw = {
randomize;
return rnd.permuteNoise();
}
data = {
redraw;
const now = new Date();
const dates = d3.timeDays(+now - 24 * 3600 * 1000 * 365, now, 7);
const min = -200;
const max = 1000;
let data = dates.flatMap((date, i) => {
return [
{
date,
variant: "A",
value: math.lerp(min, max, rnd.noise1D(i, 30))
},
{
date,
variant: "B",
value: math.lerp(min, max, rnd.noise1D(i / 15))
}
];
});
const maxVariance = (max - min) / 15;
data = data.map((d, i) => {
return {
...d,
value: math.lerp(
d.value - maxVariance,
d.value + maxVariance,
rnd.noise1D(d.value)
)
};
});
return data;
}
dataForChart = {
const copy = _.cloneDeep(data);
let d = [
copy.filter((d) => d.variant === "A"),
copy.filter((d) => d.variant === "B")
];
if (comparison === "Absolute") return d;
d[0].forEach((a, i) => {
d[1][i].value = d[1][i].value - d[0][i].value;
d[0][i].value = 0;
});
return d;
}
console.log(dataAsArray)
dataAsArray = {
const copy = _.cloneDeep(data);
const as = copy.filter((d) => d.variant === "A");
const bs = copy.filter((d) => d.variant === "B")
let d = [
{
dates: as.map(x => x.date),
values: as.map(x => x.value),
type: 'main'
},
{
dates: bs.map(x => x.date),
values: bs.map(x => x.value),
type: 'benchmark'
}
];
if (comparison === "Absolute") return d;
return [
{
dates: as.map(x => x.date),
values: as.map((x, i) => x.value - bs[i].value),
type: 'main'
},
{
dates: bs.map(x => x.date),
values: bs.map(x => 0),
type: 'benchmark'
}
];
}
import { CSRandom as rnd, CSMath as math } from "@saneef/canvas-sketch-util"
dt = +new Date()
xScale = d3
.scaleTime()
.nice(d3.timeMonth)
.range([0, width])
.domain([dt - 20, dt + 20])
xScale(dt - 1)
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.
