Public
Edited
Jul 9, 2023
{
const d = [2, 2];
const dTo = [d[0] * i + d[1] * j, 0];
const data = [math.lerpArray(d, dTo, t)];
const gridTransform = `matrix(${1 + (i - 1) * t}, 0, ${-j * t}, ${
1 - t
}, 0, 0)`;
const transformedGridOptions = {
stroke: slate["300"],
strokeOpacity: 1,
strokeWidth: 1.5
};
const linkOptions = {
strokeWidth: 3,
strokeLinecap: "round"
};
const transformedGrid = Plot.plot({
axis: null,
width,
aspectRatio: 1,
x: {
domain: [-10, 10],
interval: 1
},
y: {
domain: [-6, 6],
interval: 1
},
marks: [
Plot.gridX({ ...transformedGridOptions }),
Plot.gridY({ ...transformedGridOptions })
],
style: {
background: "none",
transform: gridTransform
}
});
const plot = Plot.plot({
axis: null,
width,
aspectRatio: 1,
x: {
domain: [-10, 10]
// interval: 1
},
y: {
domain: [-6, 6]
// interval: 1
},
marks: [
Plot.gridX(d3.range(-10, 11), {
y1: 0.1,
y2: -0.1,
stroke: "black",
strokeOpacity: 1
}),
Plot.ruleY([0]),
Plot.dot([null], {
x: 0,
y: 0,
r: 20,
stroke: "none",
fill: "black",
fillOpacity: 0.1
}),
// Axis arrows
Plot.arrow([null], {
x1: 0,
y1: 0,
x2: 1 + (i - 1) * t,
y2: 0,
stroke: cyan["400"],
strokeWidth: 2
}),
Plot.arrow([null], {
x1: 0,
y1: 0,
x2: j * t,
y2: 1 * (1 - t),
stroke: orange["400"],
strokeWidth: 2
}),
// Plot.arrow(data, {
// x1: 0,
// y1: 0,
// x2: (d) => d[0],
// stroke: cyan["400"],
// strokeWidth: 2
// }),
// Plot.arrow(data, {
// x1: (d) => d[0],
// y1: 0,
// y2: (d) => d[1],
// stroke: orange["400"],
// strokeWidth: 2
// }),
Plot.dot(data, {
stroke: "none",
fill: slate["600"],
stroke: slate["600"],
fillOpacity: 0.5,
r: 5
})
// Plot.link([null], {
// ...linkOptions,
// x1: 0,
// y1: 0,
// x2: 1,
// stroke: cyan["400"]
// }),
// Plot.link([null], {
// ...linkOptions,
// x1: 0,
// y1: 0,
// y2: 1,
// stroke: orange["400"]
// })
],
style: {
position: "absolute",
top: 0,
left: 0,
background: "none"
}
});
const output = html`
<div style="overflow: ${"hidden"}; position: relative;">
${transformedGrid}
${plot}
</div>
`;
console.log(output);
return output;
}
viewof i = Inputs.input(2)
viewof j = Inputs.input(1)
CSUtils = require("https://bundle.run/canvas-sketch-util@1.10.0")
math = CSUtils.math
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.
