Public
Edited
Oct 1, 2023
f = x => x ** 2
df = x => 2*x
import { range } from "@chiahsun-ws/math-functions"
dx = {
const N = 4;
const l = range(0, 4, 1).map(n => -(0.5 ** n));
const r = range(4, 0, -1).map(n => 0.5 ** n);
return [l, r].flat();
}
maxX = 20
minX = -(maxX)
step = 0.01
x0 = 1
approaching = d3.map(dx, (d) => (
[{x1: x0 + d, y1: f(x0+d), x2: x0, y2: f(x0), f: "Appoaching"}
]
)).flat()
/*approaching = d3.map(dx, (d) => (
[{x: x0 + d, y: f(x0+d), f: "Appoaching"},
{x: x0, y: f(x0), f: "Appoaching"}
]
)).flat()*/
data = [
d3.map(range(minX, maxX, step), (d) => ({x: d, y: f(d), f: "x ** 2"})) // ,
// approaching
].flat()
N = 2
Plot.plot({
width: 900,
color: { legend: true },
x: { domain: [-2, 2] }, // d3.extent(approaching, d => d.x) },
y: { grid: true, domain: [0, 4] },// d3.extent(approaching, d => d.y) },
marks:[
Plot.lineY(data, {x: "x", y: "y", stroke: "f"}),
Plot.arrow(approaching, {x1: "x1", y1: "y1", x2: "x2", y2: "y2"})
// Plot.link({length: 100}, {x1: 0, x2: 2, y1: 1, y2: 4})
// Plot.arrow({length: 1}, {x1: 0, y1: 0, x2: 1, y2: 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.
